Implement Search Bar in React for Ecommerce Website

Implement Search Bar in React for Ecommerce Website:

 

I observed that in eCommerce websites filtering products based on certain filters or user inputs is a super common thing.

In this little tutorial, I’ll be trying to layout the mechanics of filtering data from a state based on the search input.

Of course you can go all out and add all the fancy toggle filters, advanced search options and whatnot. But the concept of filtering stays the same, more or less.

Hope you enjoy!

Sketching Out A Product State

Let’s try to make a close to real ecommerce product list. The aim here is to use “tags”, “title”, “category” fields to look for the products. The tag filed contains few descriptions of what the product is. Just like Instagram #hashtags

{
id: 1,
title: "Check Textured Coat",
category: "Coat",
price: "175.4",
tags: "coat check textured camel brown long sleeves buttoned cuffs",
},
{
id: 2,
title: "Contrast Check Coat",
category: "Coat",
price: "155.4",
tags: "coat camel black grey marl lapel collar hip flap pockets",
},
{
id: 3,
title: "White Coat",
category: "Coat",
price: "125.4",
tags: "coat camel white short sleeves double-breasted button",
},
{
id: 4,
title: "Basic Hoodie",
category: "Hoodies / SweatShirts",
price: "55.4",
tags: "hoodie solid plain purple long baggy hood",
},
{
id: 5,
title: "Basic Hoodie",
category: "Hoodies / SweatShirts",
price: "55.4",
tags: "hoodie solid plain black long baggy hood",
},
{
id: 6,
title: "Basic short Hoodie",
category: "Hoodies / SweatShirts",
price: "55.4",
tags: "hoodie solid plain gray grey short hood",
},
]

SearchBarSection.js up-until now!

// SearchBarSection.js

import React, {useState} from "react";

const SearchBarSection = () => {
  const [products, setProducts] = useState([
    {
      id: 1,
      title: "Check Textured Coat",
      category: "Coat",
      price: "175.4",
      tags: "coat check textured camel brown long sleeves buttoned cuffs",
    },
    {
      id: 2,
      title: "Contrast Check Coat",
      category: "Coat",
      price: "155.4",
      tags: "coat camel black grey marl lapel collar hip flap pockets",
    },
    {
      id: 3,
      title: "White Coat",
      category: "Coat",
      price: "125.4",
      tags: "coat camel white short sleeves double-breasted button",
    },
    {
      id: 4,
      title: "Basic Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain purple long baggy hood",
    },
    {
      id: 5,
      title: "Basic Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain black long baggy hood",
    },
    {
      id: 6,
      title: "Basic short Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain gray grey short hood",
    },
  ]);
  return 
; }; export default SearchBarSection;

UI Component

We are just looking to setup a search bar and a display section. So lets get through with a basic UI first.

But before we get into it, might as well import this in App.js and have a look at our marvelous (laughs a lot of em’!) design on the browser

App.js

// App.js

import SearchBarSection from "./Projects/SearchBarSection/SearchBarSection";

function App() {
  return (
    
); } export default App;

Search Bar

Just the UI of the search bar. We’ll implement the input functionalities in the later section.

return (
    
);

SearchBarSection.js up-until now!

// SearchBarSection.js

import React, {useState} from "react";
import "./SearchBarSection.css";

const SearchBarSection = () => {
  const [products, setProducts] = useState([
    {
      id: 1,
      title: "Check Textured Coat",
      category: "Coat",
      price: "175.4",
      tags: "coat check textured camel brown long sleeves buttoned cuffs",
    },
    {
      id: 2,
      title: "Contrast Check Coat",
      category: "Coat",
      price: "155.4",
      tags: "coat camel black grey marl lapel collar hip flap pockets",
    },
    {
      id: 3,
      title: "White Coat",
      category: "Coat",
      price: "125.4",
      tags: "coat camel white short sleeves double-breasted button",
    },
    {
      id: 4,
      title: "Basic Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain purple long baggy hood",
    },
    {
      id: 5,
      title: "Basic Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain black long baggy hood",
    },
    {
      id: 6,
      title: "Basic short Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain gray grey short hood",
    },
  ]);
  return (
    
); }; export default SearchBarSection;
/* SearchBarSection.css */

.searchBarSection {
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.searchBar {
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid;
  border-radius: 20px;
}

.input {
  width: 250px;
  border: none;
  border-radius: 20px;
}

.button {
  background-color: transparent;
  border: none;
  width: 25px;
  border-radius: 20px;
}

Product Display

I don’t want to focus much on UI enhancements in this blog. This is more on the technical implementation side.

So we’ll be displaying the products WITHOUT IMAGES.

{products.map((product) => (
{product.category}

{product.title}

{product.price}
))}

We are not yet filtering the products based on search input and hence we see the whole list.
We’ll do that in the next section.

SearchBarSection.js up until now!

import React, {useState} from "react";
import "./SearchBarSection.css";

const SearchBarSection = () => {
  const [products, setProducts] = useState([
    {
      id: 1,
      title: "Check Textured Coat",
      category: "Coat",
      price: "175.4",
      tags: "coat check textured camel brown long sleeves buttoned cuffs",
    },
    {
      id: 2,
      title: "Contrast Check Coat",
      category: "Coat",
      price: "155.4",
      tags: "coat camel black grey marl lapel collar hip flap pockets",
    },
    {
      id: 3,
      title: "White Coat",
      category: "Coat",
      price: "125.4",
      tags: "coat camel white short sleeves double-breasted button",
    },
    {
      id: 4,
      title: "Basic Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain purple long baggy hood",
    },
    {
      id: 5,
      title: "Basic Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain black long baggy hood",
    },
    {
      id: 6,
      title: "Basic short Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain gray grey short hood",
    },
  ]);

  return (
    
{products.map((product) => (
{product.category}

{product.title}

{product.price}
))}
); }; export default SearchBarSection;

Adding in some CSS.

.display {
  display: flex;
  flex-wrap: wrap;
}

.product {
  margin: 20px;
  width: 200px;
  padding: 20px;
  border-radius: 20px;
  background-color: #f9d5d3;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

SearchBarSection.css up until now!

/* SearchBarSection.css */

.searchBarSection {
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.searchBar {
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid;
  border-radius: 20px;
}

.input {
  width: 250px;
  border: none;
  border-radius: 20px;
}

.button {
  background-color: transparent;
  border: none;
  width: 25px;
  border-radius: 20px;
}

.display {
  display: flex;
  flex-wrap: wrap;
}

.product {
  margin: 20px;
  width: 200px;
  padding: 20px;
  border-radius: 20px;
  background-color: #f9d5d3;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

Setting Up Search Functionality

The first thing we need to setup is a state to store the search input.

const [search, setSearch] = useState("");

Now let’s try to filter out the products based on this search state.
Here we are searching the string stored in the search state within tags, title and category string.

You can see some examples on Array.prototype.includes()

const filteredProducts = products.filter((product) => {
    if (
      product.tags.toLowerCase().includes(search) ||
      product.title.toLowerCase().includes(search) ||
      product.category.toLowerCase().includes(search)
    ) {
      return product;
    }
  });

Perfect! We are almost done. Let’s just quickly setup the onChange attribute on the input to set the “search” state on each character input.


 {
    setSearch(e.target.value.toLowerCase());
  }}
/>

Last little tweak and it’s done! Just replace the “product” in the “display” div with “filteredProducts”

{filteredProducts.map((product) => (
{product.category}

{product.title}

{product.price}
))}

SearchBarSection.js final!

import React, {useState} from "react";
import "./SearchBarSection.css";

const SearchBarSection = () => {
  const [products, setProducts] = useState([
    {
      id: 1,
      title: "Check Textured Coat",
      category: "Coat",
      price: "175.4",
      tags: "coat check textured camel brown long sleeves buttoned cuffs",
    },
    {
      id: 2,
      title: "Contrast Check Coat",
      category: "Coat",
      price: "155.4",
      tags: "coat camel black grey marl lapel collar hip flap pockets",
    },
    {
      id: 3,
      title: "White Coat",
      category: "Coat",
      price: "125.4",
      tags: "coat camel white short sleeves double-breasted button",
    },
    {
      id: 4,
      title: "Basic Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain purple long baggy hood",
    },
    {
      id: 5,
      title: "Basic Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain black long baggy hood",
    },
    {
      id: 6,
      title: "Basic short Hoodie",
      category: "Hoodies / SweatShirts",
      price: "55.4",
      tags: "hoodie solid plain gray grey short hood",
    },
  ]);

  const [search, setSearch] = useState("");

  const filteredProducts = products.filter((product) => {
    if (
      product.tags.toLowerCase().includes(search) ||
      product.title.toLowerCase().includes(search) ||
      product.category.toLowerCase().includes(search)
    ) {
      return product;
    }
  });

  return (
    
{filteredProducts.map((product) => (
{product.category}

{product.title}

{product.price}
))}
); }; export default SearchBarSection;

SearchBarSection.css final!

/* SearchBarSection.css */

.searchBarSection {
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.searchBar {
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid;
  border-radius: 20px;
}

.input {
  width: 250px;
  border: none;
  border-radius: 20px;
}

.button {
  background-color: transparent;
  border: none;
  width: 25px;
  border-radius: 20px;
}

.display {
  display: flex;
  flex-wrap: wrap;
}

.product {
  margin: 20px;
  width: 200px;
  padding: 20px;
  border-radius: 20px;
  background-color: #f9d5d3;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

Oh oh! I almost forgot.

App.js

// App.js

import SearchBarSection from "./Projects/SearchBarSection/SearchBarSection";

function App() {
  return (
    
); } export default App;
Enter fullscreen mode Exit fullscreen mode

from Tumblr https://generouspiratequeen.tumblr.com/post/635472039306756096

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s