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

Java Spring Boot

Java Spring Boot: A Comprehensive Introduction to Microservices

Introduction to Java Spring Boot and Microservices Java Spring Boot has emerged as an important...
Read More
Fundamentals of Scala Programming

Mastering the Fundamentals of Scala Programming: A Complete Guide to Functional Programming

Introduction to Scala Programming Scala programming has gained immense popularity in recent years thanks to...
Read More
Java Programming

Java Basics for Beginners: A Step-by-Step Guide to Mastering Java Programming

Introduction to Java programming Java, a versatile and extensively utilised programming language, is popular among...
Read More