HTML Help - Filters on a shopping page

Scribbles4321 · March 23

Hello. I'm extremely new to HTML and working on a little project with my friends to improve our expertise in HTML.

Here is what my HTML shopping page currently looks like:-

I have added a filter button, however.

I want to make it that so whenever I apply specific filters, only the shoes that relate to the specific filter pop up. (For example: If I make the brand Adidas and Size UK 7 with colour black, only those shoes appear.)

Only problem is, I do not know how to make a website that interactive. Similarly, I'd like the sort dropdown to work by sorting products from A-Z, low to high etc.

I've attached the HTML to the website. If someone is able to guide me into what to do, that would be greatly appreciated. Thank you. I will take any solution.

sneakers_clearance.html

Eigenvektor · March 23

You typically don't do that in HTML alone. You use Java Script/Type Script for the interactive parts.

And more commonly the filtering part would be done server-side/on the backend.

When you enter a filter, the JS translates that into a request with appropriate query parameters or a post body. The server would use the included filters to only return the appropriate data.

The front end would only be concerned with rendering it.

If you do the filtering on the front end, it means you unnecessarily send data to the user they're not interested in. That makes things slower and also increases memory usage in the browser for no purpose. And increases server load, which would have to load more data from its database than is necessary.

Scribbles4321 · March 24

Sadly, I am unable to do this as I do not have a back end. I'd prefer to do everything on the front end.

And I have problems with being able to incoporate this feature

undergroundbeef · March 24

If you’re looking to do this on the front end as a way to learn more stuff, here is one idea…

Use data attributes on the html elements for each shoe. These could be things like data-brand, data-price, etc.
When clicking the Apply button you can have it trigger a JavaScript function.
The function can take the settings from the form and use them to adjust what is shown by selecting the elements by the data attributes and hiding/showing them.
Hiding and showing things will likely lead to bugs, so you’ll probably want to have a reset function that gets called each time so the filter is always starting from the same state, and you’re not trying to micro-manage things as they change.

As mentioned by the other poster, this isn’t how it would be done on nike.com or anything (they would likely have a database where the attributes are stored and a query based on the filter would determine what is displayed... and there would likely be an API that sits in front of that database to handle those requests), but the above would teach you about custom data-* attributes, JavaScript, and CSS… getting them to all work together to make something interactive.

Typically, you’d want your HTML, CSS, and JavaScript to be in separate files, but you can also keep all the code in one file, especially when getting started (or trying to share something like this). It’s good to know how that works, but not something you’ll want as a site grows and gets more complex.

For sorting, you'd probably need to get more dynamic with how the page loads in and the data is stored. Which would mean you can throw out the above filter idea as well (you can still try it, but you'd want a different setup to implement both the filter and the sort).

You'd probably want all your data for each show in an array full of dictionaries.

Each dictionary in the array would contain the shoe name, price, brand, path to the image, etc. You'd probably want some kind of id as well, so if something is clicked on you have an easy way of knowing what it is without doing a messy string match.
Write a Javascript function that would run when the page loads that would use this array to build out all the HTML to display them and stick them into a div where the shoes should be displayed.
When a sort or filter is called, you'd filter/sort a copy of the array, and pass that to the function that generates the HTML and overwrite the data in that div.
Whenever the filter is updated, filter the original array based on the current settings, and again call the function to generate the HTML and update the div. Always starting with the original data will avoid a lot of bugs.
If you want to get fancy, you could use SQLite to store the data and write various SQL queries to accomplish the same goal of getting data to pass to a function to generate the HTML

There are frameworks, I see you're using Vue, that are made for this kind of thing, but while you're learning I think it's useful to come up with ways to use the basic tools you have to accomplish things and not lean on frameworks to solve everything, as they also add a lot of complexity and prevent you from learning the foundations. I'd build everything without Vue, even if it's ugly, so you get a better idea of how things work under the hood and what tools come out of the box. Then if you want to add in something like Vue or React, at least you have a better idea of if you need them and why.

Scribbles4321 · March 25

15 hours ago, undergroundbeef said:

If you’re looking to do this on the front end as a way to learn more stuff, here is one idea…

Use data attributes on the html elements for each shoe. These could be things like data-brand, data-price, etc.

When clicking the Apply button you can have it trigger a JavaScript function.

The function can take the settings from the form and use them to adjust what is shown by selecting the elements by the data attributes and hiding/showing them.

Hiding and showing things will likely lead to bugs, so you’ll probably want to have a reset function that gets called each time so the filter is always starting from the same state, and you’re not trying to micro-manage things as they change.

As mentioned by the other poster, this isn’t how it would be done on nike.com or anything (they would likely have a database where the attributes are stored and a query based on the filter would determine what is displayed... and there would likely be an API that sits in front of that database to handle those requests), but the above would teach you about custom data-* attributes, JavaScript, and CSS… getting them to all work together to make something interactive.

Typically, you’d want your HTML, CSS, and JavaScript to be in separate files, but you can also keep all the code in one file, especially when getting started (or trying to share something like this). It’s good to know how that works, but not something you’ll want as a site grows and gets more complex.

For sorting, you'd probably need to get more dynamic with how the page loads in and the data is stored. Which would mean you can throw out the above filter idea as well (you can still try it, but you'd want a different setup to implement both the filter and the sort).

You'd probably want all your data for each show in an array full of dictionaries.

Each dictionary in the array would contain the shoe name, price, brand, path to the image, etc. You'd probably want some kind of id as well, so if something is clicked on you have an easy way of knowing what it is without doing a messy string match.

Write a Javascript function that would run when the page loads that would use this array to build out all the HTML to display them and stick them into a div where the shoes should be displayed.

When a sort or filter is called, you'd filter/sort a copy of the array, and pass that to the function that generates the HTML and overwrite the data in that div.

Whenever the filter is updated, filter the original array based on the current settings, and again call the function to generate the HTML and update the div. Always starting with the original data will avoid a lot of bugs.

If you want to get fancy, you could use SQLite to store the data and write various SQL queries to accomplish the same goal of getting data to pass to a function to generate the HTML

There are frameworks, I see you're using Vue, that are made for this kind of thing, but while you're learning I think it's useful to come up with ways to use the basic tools you have to accomplish things and not lean on frameworks to solve everything, as they also add a lot of complexity and prevent you from learning the foundations. I'd build everything without Vue, even if it's ugly, so you get a better idea of how things work under the hood and what tools come out of the box. Then if you want to add in something like Vue or React, at least you have a better idea of if you need them and why.