Creating an E-commerce Product Filter with HTML, CSS and JavaScript

Published on May 22, 2024

First off, we have the standard HTML structure with the `<html>`, `<head>`, and `<body>` tags.

We have a meta tag specifying the viewport to ensure proper scaling on different devices.

Inside the body, we have a search container with an input field where users can search for products, brands, and more.

The input field has an id of ‘search-input‘, and we have a search button with an id of ‘search’ to trigger the search.

Below the search container, we have filter buttons for different product categories like topwear, bottomwear, jackets, and watches.

Each button has a class of button value and an on click attribute that calls a Java Script function to filter products based on the selected category.

Finally, we have a container with an id of ‘products’ where the filtered products will be displayed.

CSS

We’ll go through the CSS code line by line to understand how we’re styling our product filter.

Starting off, we have the universal selector ‘*’ which sets the padding, margin, and box-sizing for all elements, ensuring a consistent look across different browsers.

Next, we set the background colour of the body to a light blue-grey colour with ‘background-colour: #bed1cf;’ to give a soft, pleasing look.

Then we have the ‘.wrapper‘ class, which centres our content and makes it responsive by setting its width to 95%, margin to auto, and using flexbox to align items in the centre and column direction.

For the search container, we use flexbox again to centre the input field and search button. We set a margin for spacing, width to 50% for a balanced look, and use ‘flex-wrap’ to ensure it adapts well on smaller screens.

The search input field has a transparent background and a bottom border for a clean look. When focused, the border colour changes to white for better visibility. The search button has padding, a dark background colour, white text, and rounded corners to make it visually appealing.

For the filter buttons, we use the ‘.button-value’ class. Each button has padding, a background colour of white, and text colour of dark grey. They also have rounded corners and a cursor pointer to indicate interactivity. When a button is active, indicated by the ‘active’ class, its background colour changes to dark grey, and the text colour turns white.

The products container uses a grid layout with three columns, spacing between columns, and padding at the top and bottom for better layout and spacing.

Each product card has a white background, a maximum width, margin at the top, padding inside, rounded corners, and a subtle box shadow to make them stand out.

In the image-container’ class, we centre the image inside, set a fixed width and height. The images themselves are set to fit within their container without stretching.

The ‘.container’ class is used inside each card to add padding at the top and set text colour. We style the headings and subheadings with different font weights and sizes to differentiate product details.

JAVASCRIPT

First, we define a ‘products’ object containing all our product data. Each product has a name, category, price, and image. This will be the data we use to populate our product cards dynamically.

Here, we have an array of product objects. Each object represents a product with its ‘productName’, ‘category’, ‘price’, and ‘image’.

Next, we create a loop that goes through each product in the data array and creates a card for it.

We use a ‘for’ loop to iterate over ‘products.data’. For each product, we create a ‘div’ element for the card and add the relevant classes including the product’s category and a ‘hide’ class.

Inside the card, we create an image container and an image element, set the image source to the product’s image, and append it to the image container. Then, we append the image container to the card.

Next, we create a container for the product details. Inside this container, we create an ‘h5’ element for the product name and an ‘h6’ element for the price. We set their text content to the product’s name and price, respectively, and append them to the container.

Finally, we append the product details container to the card and then append the card to the ‘products’ div in our HTML.

Now, let’s move on to the filter functionality. We define a function ‘filterProduct‘ that takes a category value as its argument.

First, we get all the filter buttons and iterate through them. If the button’s text matches the category value, we add the ‘active’ class to it; otherwise, we remove the ‘active’ class.

Then, we get all the product cards and iterate through them. If the value is ‘all’, we remove the ‘hide’ class from all cards, making them all visible. Otherwise, we check if the card’s classes include the category value. If they do, we remove the ‘hide’ class; if they don’t, we add the ‘hide’ class.

For the search functionality, we add an event listener to the search button. When the button is clicked, we get the search input value and iterate through the product names.

We get all the product name elements and their corresponding cards. If a product name includes the search input value, we remove the ‘hide’ class from its card. If not, we add the ‘hide’ class.

Finally, we call the ‘filterProduct‘ function with the argument ‘all’ when the window loads to display all products by default.

And there you have it! We’ve added functionality to our product filter using JavaScript. Now, you can filter products by category and search for specific products.

Thank you for watching! I hope you found this tutorial helpful. Don’t forget to like, share, and subscribe for more web development tutorials. If you have any questions, leave them in the comments below. Until next time, happy coding!

Our Latest Blog

Get Expert Help Anytime with HyperLearn from LSET

Get Expert Help Anytime with HyperLearn from LSET

Learning to code or solving technical challenges doesn’t have to be a lonely and frustrating...
Read More
Transform Your Coding Journey with HyperLearn by LSET

Transform Your Coding Journey with HyperLearn by LSET

In today’s fast-paced tech landscape, staying ahead in coding and software development is essential for...
Read More
How Can Role-Specific Interview Prep Help You Land Your Dream Job

How Can Role-Specific Interview Prep Help You Land Your Dream Job?

Landing your dream job often feels like a monumental task, especially when the competition is...
Read More