A Product List Page is very useful in e-commerce websites as it helps the company to showcase their products to the user. This helps user to get information about the products available and make a selection. User can browse a wide variety of products and purchase the product they find useful.
Let us have a look at how the final page will look like:
Basic Feature of Product List Page:
- List: It is an interactive list using which users can see all the available products
- Image: An image which displays the user how the product will look like
- Features: A section which shows the features of the product
- Price Tag: Users can see the amount they have to pay for the product and discount they are getting
- Button: An interactive button using which the user make purchase or add product to their cart
Advantages of Product List Page:
- Provides a platform to showcase the products
- Users are provided with a wide variety of options to choose from
- Increases the sales of the company
- An organised and Interactive UI makes the business grow faster
Prerequisites:
Step to create the page
Step 1: Set up the project using the command
npx create-react-app <<Project_Name>>
Step 2: Navigate to the folder using the command
cd <<Project_Name>>
Step 3: Install the required dependencies using the command
npm install -D tailwindcss
Step 4: Create the tailwind config file using the command
npx tailwindcss init
Step 5: Rewrite the tailwind.config.js file as folllows
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Step 6: Import the fontawesome icons in the project by typing following code in index.html file in public folder
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
Step 7: Create a folder called components in src directory and create files Data.js, Product.js, Welcome.js inside it.
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
"devDependencies": {
"tailwindcss": "^3.3.3"
}
Example: Write the following code in respective files:
- App.js: This file imports all the components and passed data as props
- Data.js: This file contains data to be rendered
- Product.js: This file render product data on the browser
- Welcome.js: This component acts as welcome slide
- index.css: Tailwind CSS is imported using this file
- index.html: Fontawesome is imported in this file
Javascript
// App.js import './App.css'; import Product from './components/Product'; import Welcome from './components/Welcome'; import Data from './components/Data'; function App() { const data = Data return ( <div className="App"> <Welcome /> {data.map((e) => { return <Product data={e} /> })} </div> ); } export default App; |
Javascript
// Welcome.js export default function Welcome() { return ( <div className="h-36 w-full border-2 h-screen flex flex-col items-center justify-center bg-emerald-500 text-white"> <p className="text-2xl mb-4 block"> Welcome to neveropen Shopping Page!!! </p> <p className="text-lg"> Select from a wide variety of GFG Goodies!!! </p> </div> ) } |
Javascript
// Product.js export default function Product(props) { return ( <div className="w-2/3 h-48 p-2 bg-white-200 border-2 border-slate-200 rounded-lg flex flex-row mx-auto mt-6" > <div className="w-3/12 h-full"> <img className="pl-4 pt-2 w-72 h-32" src={props.data.image} /> </div> <div className="w-6/12 h-full p-2 "> <h3 className="pl-4 pt-2 text-2xl">{props.data.title}</h3> <div className="px-4"> {console.log(props.data.stars)} {props.data.stars.map((e) => { return (<i className="fa fa-star" style={{ color: "green" }}></i>) })} <span className="p-2">{props.data.reviewsCount}</span> </div> <div className="px-4"> {props.data.specs.map((e) => { return (<span>{e} •</span>) })} </div> <div className="px-4"> {props.data.features.map((e) => { return (<span>{e} •</span>) })} </div> </div> <div className="w-3/12 h-full border-l-4 p-2"> <div className="flex flex-row items-center "> <h4 className="text-lg"><span>₹</span> {props.data.newPrice} </h4> <span className="text-rose-400"> <s><span>₹</span> {props.data.oldPrice} </s> </span> </div> <h6 className="text-success">Free shipping</h6> <div className="flex flex-col mt-4"> <button className="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2" type="button"> Buy Now </button> <button className="text-black border-2 border-sky-600 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2 " type="button"> Add to wishlist </button> </div> </div> </div> ) } |
Javascript
// Data.js const Data = [ { title: "GFG TShirt", image: specs: ["100% Cotton", "Light Weight", "Best Finish"], features: ["Unique Design", "For Men", "Casual" ], newPrice: 800, oldPrice: 1000, stars: new Array(4).fill(1), reviewsCount: 289, }, { title: "GFG Hoodie", image: specs: ["Durable", "Light Weight", "Best Finish"], features: ["Comfortable Straps", "Water Bottle pocket", "Weather Proof"], newPrice: 599, oldPrice: 999, stars: new Array(5).fill(1), reviewsCount: 467, }, { title: "GFG Hoodie", image: specs: ["Sweat Fabric", "Attached Hood", "Kangaroo Pocket"], features: ["Elastic Cuffs", "Light Weight", "Unisex" ], newPrice: 1299, oldPrice: 1999, stars: new Array(5).fill(1), reviewsCount: 467, }, ] export default Data; |
CSS
/* index.css */ @tailwind base; @tailwind components; @tailwind utilities; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } |
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <link rel="stylesheet" href= integrity= "sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous"> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> |
Steps to run the application:
Step 1: Type the following command in terminal
npm run start
Step 2: Open your web browser and type the following URL
http://localhost:3000/
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
