Create Product Quickviews using React and Tailwind CSS
Last Updated :
26 Sep, 2024
Product Quick views are essential UI components that allow users to preview product details without leaving the main page. This feature enhances user experience by enabling quick access to information like product image descriptions and prices and an Add to Cart button.
Prerequisites
Approach To Create Product Quickviews Sections
- Start by creating a new React application using the Create React App. This provides a solid foundation with a modern JavaScript setup.
- Integrate Tailwind CSS after installing Tailwind CSS, and set it up by creating a configuration file. This involves specifying the paths to your application’s files.
- Use React state management to handle the visibility of the Quickview modal. This involves tracking which product is currently being viewed and toggling the modal's display when the user clicks the "Quick View" button.
- Create a product listing that displays all available products. Each product card should include an image, name, price, and the Quickview button. On clicking this button, the Quickview modal should open with the relevant product details.
Steps to Create Product Quickviews Sections
Step 1: Set up a React Application
npx create-react-app react-app
Step 2: Install node modules using the command.
npm install
cd react-app
Step 3: Install and Configure Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 4: Configure the tailwind paths in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Step 5: Add tailwind directives to your index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
overflow: hidden;
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;
}
h2 {
margin-top: 2rem;
/* Adjust top margin for spacing */
}
Project Structure
project structureUpdated Dependencies:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}Step 6: Install React Icons
npm install react-icons
Example: In this example we will create Product Quick views using react and tailwind CSS
JavaScript
// App.js
import React, { useState } from 'react';
import './index.css'; // Ensure Tailwind is imported
const products = [
{ id: 1, name: 'Product 1', price: '$20.00',
image: 'https://via.placeholder.com/150',
description: 'This is a great product.' },
{ id: 2, name: 'Product 2', price: '$30.00',
image: 'https://via.placeholder.com/150',
description: 'This is an even better product.' },
{ id: 3, name: 'Product 3', price: '$40.00',
image: 'https://via.placeholder.com/150',
description: 'This is an amazing product.' },
{ id: 4, name: 'Product 4', price: '$50.00',
image: 'https://via.placeholder.com/150',
description: 'This is the best product.' },
];
const App = () => {
const [selectedProduct, setSelectedProduct] = useState(null);
const [cart, setCart] = useState([]);
const [isModalOpen, setIsModalOpen] = useState(false);
const [productToCancel, setProductToCancel] = useState(null);
const handleAddToCart = (product) => {
setCart([...cart, product.id]);
setSelectedProduct(null); // Close modal
};
const handleConfirmCancel = () => {
setCart(cart.filter(id => id !== productToCancel.id));
setIsModalOpen(false);
setProductToCancel(null);
};
const ProductCard = ({ product }) => {
const isInCart = cart.includes(product.id);
const handleCancelProduct = (product) => {
setProductToCancel(product);
setIsModalOpen(true);
};
return (
<div className="bg-white shadow-lg rounded-lg p-4
cursor-pointer transition-transform transform hover:scale-105 w-80 h-80">
<img src={product.image} alt={product.name}
className="w-full h-40 object-cover rounded-md" />
<h2 className="mt-2 text-lg font-semibold">{product.name}</h2>
<p className="text-gray-500">{product.price}</p>
{!isInCart ? (
<button
className="mt-2 w-full bg-green-500
text-white p-2 rounded-md hover:bg-blue-600 transition"
onClick={() => {
handleAddToCart(product);
setSelectedProduct(product);
}}
>
Add to Cart
</button>
) : (
<button
className="mt-2 w-full bg-red-500 text-white
p-2 rounded-md hover:bg-red-600 transition"
onClick={() => handleCancelProduct(product)}
>
Cancel
</button>
)}
</div>
);
};
const QuickviewModal = () => (
<div className="fixed inset-0 bg-black bg-opacity-50
flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 w-96">
<button onClick={() => setSelectedProduct(null)}
className="absolute top-2 right-2 text-gray-600 hover:text-gray-800">
âś•
</button>
{selectedProduct && (
<>
<img src={selectedProduct.image} alt={selectedProduct.name}
className="w-full h-48 object-cover rounded-md" />
<h2 className="mt-2 text-xl font-semibold">{selectedProduct.name}
</h2>
<p className="text-gray-500">{selectedProduct.price}</p>
<p className="mt-2">{selectedProduct.description}</p>
<button className="mt-4 w-full bg-green-500 text-white p-2
rounded-md hover:bg-blue-600 transition" onClick={() =>
handleAddToCart(selectedProduct)}>
Add to Cart
</button>
</>
)}
</div>
</div>
);
return (
<div className="min-h-screen bg-gray-100 flex flex-col items-center
justify-center p-5 mb-5">
<h1 className="text-4xl font-bold mb-10">Product Quickview</h1>
<div className="grid grid-cols-4 gap-6">
{products.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
{selectedProduct && <QuickviewModal />}
{isModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex
items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 w-96">
<h2 className="text-xl font-semibold">Confirm Cancellation</h2>
<p className="mt-2">Are you sure you want to remove
{productToCancel?.name} from the cart?</p>
<div className="mt-4 flex justify-between">
<button className="bg-red-500 text-white p-2
rounded-md hover:bg-red-600 transition"
onClick={handleConfirmCancel}>
Yes, Cancel
</button>
<button className="bg-gray-300 text-gray-700 p-2
rounded-md hover:bg-gray-400 transition" onClick={() =>
setIsModalOpen(false)}>
No, Keep
</button>
</div>
</div>
</div>
)}
</div>
);
};
export default App;
To start the Application run the following command:
npm start
Output: