From cbf7152b511edcf45c7a8df5d09d1957784f0eb2 Mon Sep 17 00:00:00 2001 From: Anurag-kuche Date: Tue, 7 Jan 2025 22:45:22 +0530 Subject: [PATCH 1/3] Flash message added on clicking add to cart button --- package-lock.json | 14 ++++++++ package.json | 1 + src/App.js | 6 +++- src/Pages/Shop.js | 84 +++++++++++------------------------------------ src/Pages/cart.js | 6 +++- 5 files changed, 45 insertions(+), 66 deletions(-) diff --git a/package-lock.json b/package-lock.json index cbb755d..34c1164 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "react-redux": "^9.1.2", "react-router-dom": "^6.26.2", "react-scripts": "^5.0.1", + "react-toastify": "^11.0.2", "rimraf": "^6.0.1", "scrolltrigger": "^1.0.1", "styled-components": "^6.1.13", @@ -16503,6 +16504,19 @@ "node": ">=10" } }, + "node_modules/react-toastify": { + "version": "11.0.2", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.2.tgz", + "integrity": "sha512-GjHuGaiXMvbls3ywqv8XdWONwrcO4DXCJIY1zVLkHU73gEElKvTTXNI5Vom3s/k/M8hnkrfsqgBSX3OwmlonbA==", + "license": "MIT", + "dependencies": { + "clsx": "^2.1.1" + }, + "peerDependencies": { + "react": "^18 || ^19", + "react-dom": "^18 || ^19" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index b0e062e..87a63d2 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "react-redux": "^9.1.2", "react-router-dom": "^6.26.2", "react-scripts": "^5.0.1", + "react-toastify": "^11.0.2", "rimraf": "^6.0.1", "scrolltrigger": "^1.0.1", "styled-components": "^6.1.13", diff --git a/src/App.js b/src/App.js index c2d5fa5..1b37779 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ - import React from 'react'; +import { ToastContainer } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import ScrollToTop from './componets/ScrollToTop'; import { Provider } from 'react-redux'; @@ -46,6 +47,8 @@ function App() { + + } /> @@ -79,3 +82,4 @@ function App() { } export default App; + diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 22c7fab..4664a9b 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -4,20 +4,22 @@ import { motion } from 'framer-motion'; import { addToCart } from '../Store/cartSlice'; import { useState } from 'react'; import Button from '../componets/Button'; +import { toast, ToastContainer } from 'react-toastify'; // Add this import +import 'react-toastify/dist/ReactToastify.css'; const ShopContainer = styled.div` - padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar + padding: 6rem 2rem 4rem 2rem; max-width: 1200px; margin: 0 auto; - background-color: #fffbeb; // Warm background color - padding-top: 1.5rem; /* Adjusted padding for top */ + background-color: #fffbeb; + padding-top: 1.5rem; `; const Title = styled(motion.h1)` font-size: 2.5rem; margin-bottom: 2rem; text-align: center; - color: #78350f; // Warm brown color + color: #78350f; `; const DropdownContainer = styled.div` @@ -37,9 +39,10 @@ const ProductGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; - max-width: 1100px; // Slightly reduced to center content more + max-width: 1100px; margin: 0 auto; `; + const ProductCard = styled(motion.div)` background: linear-gradient(145deg, #ffffff, #e6e6e6); border-radius: 10px; @@ -49,7 +52,6 @@ const ProductCard = styled(motion.div)` transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; - &:hover { transform: translateY(-5px); box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9); @@ -58,18 +60,6 @@ const ProductCard = styled(motion.div)` &:hover .overlay { opacity: 1; } - - &:hover .overlay { - opacity: 1; -} - -transition: box-shadow 0.3s ease; - -&:hover { - box-shadow: 0 8px 12px rgba(0,0,0,0.15); -} - - `; const ProductImage = styled.img` @@ -107,7 +97,6 @@ const OverlayText = styled.p` text-align: center; `; - const ProductInfo = styled.div` padding: 1.25rem; background-color: white; @@ -136,15 +125,14 @@ const StyledButton = styled.button` background: linear-gradient(145deg, #7d5858, #8e6a6a); transform: scale(1.05); } - + &:active { transform: scale(0.98); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } `; -//changes in the images -const products = [ +const products = [ { id: 1, name: 'Espresso', price: 2.5, image: 'https://img.freepik.com/free-photo/caramel-latte-with-chocolade-table_140725-4.jpg?t=st=1727759794~exp=1727763394~hmac=c764d48b2b28767da2c6b996ec20e0d6a5857c19724850db5e46498687e16225&w=740', description: 'A strong, rich coffee shot, perfect for a quick pick-me-up.', type: 'hot' }, { id: 2, name: 'Cappuccino', price: 3.5, image: 'https://img.freepik.com/free-photo/delicious-organic-latte-macchiato-with-milk_23-2148420329.jpg?t=st=1727761406~exp=1727765006~hmac=10f2d9d7a08693daef2ef87ff4edd99d5bc33e1813adb65c8628d088268239b5&w=1380 ', description: 'Creamy and frothy, a classic Italian coffee with steamed milk.', type: 'hot' }, { id: 3, name: 'Latte', price: 4, image: 'https://img.freepik.com/free-photo/cold-chocolate-cocktail-with-ice-cream_140725-940.jpg?t=st=1727759865~exp=1727763465~hmac=ad44e2430bff005bce4db484fbef6f2ec22f05b97b41c8c6c28ecb8508c2d909&w=740 ', description: 'Smooth and milky, a comforting coffee drink with a velvety texture.', type: 'hot' }, @@ -197,63 +185,31 @@ const products = [ function Shop() { const dispatch = useDispatch(); - const [category, setCategory] = useState('hot'); - const handleAddToCart = (product) => { dispatch(addToCart(product)); + toast.success(`${product.name} added to cart!`); }; - const filteredProducts = products.filter((product) => product.type === category); - - - const [itemsNo,setItemsNo]=useState(9); - - const handleItemsNo = ()=>{ - const s = products.length; - if (s==itemsNo) { - setItemsNo(9); - } else { - setItemsNo(Math.min(itemsNo + 9,s)); - } - } return ( - - Our Beverage Selection + <Title initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}> + Our Coffee Selection - - setCategory(e.target.value)}> - - - - - - - {filteredProducts.slice(0, itemsNo).map((product) => ( - - + {products.map(product => ( + {product.name} - ${product.price.toFixed(2)} - + ${product.price} + handleAddToCart(product)}> + Add to Cart + ))} -
- -
+ ); } diff --git a/src/Pages/cart.js b/src/Pages/cart.js index 6392b52..7b24f70 100644 --- a/src/Pages/cart.js +++ b/src/Pages/cart.js @@ -3,6 +3,8 @@ import { useSelector, useDispatch } from 'react-redux'; import { removeFromCart, updateQuantity } from '../Store/cartSlice'; import styled from 'styled-components'; import { motion } from 'framer-motion'; +import { toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; const CartContainer = styled.div` padding: 2rem; @@ -67,10 +69,12 @@ function Cart() { const handleRemoveFromCart = (productId) => { dispatch(removeFromCart(productId)); + toast.error('Item removed from cart!'); }; const handleUpdateQuantity = (productId, quantity) => { dispatch(updateQuantity({ productId, quantity: parseInt(quantity) })); + toast.info('Cart updated!'); }; const totalPrice = cartItems.reduce( @@ -113,4 +117,4 @@ function Cart() { ); } -export default Cart; \ No newline at end of file +export default Cart; From fa5240e2542963b01b7183152ffaae652819720c Mon Sep 17 00:00:00 2001 From: Mohammed Mujtaba Date: Fri, 10 Jan 2025 20:06:58 +0530 Subject: [PATCH 2/3] Update Shop.js --- src/Pages/Shop.js | 345 ++++++++++++++++++---------------------------- 1 file changed, 131 insertions(+), 214 deletions(-) diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 8443635..daab349 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -667,224 +667,141 @@ function Shop() { } } - return ( - - - Our Coffee Selection - - - - {products.map(product => ( - - - - - - - - - - - - {filteredProducts.slice(0, itemsNo).map((product) => ( - - - - - - {product.name} - - ${product.price} - handleAddToCart(product)}> - Add to Cart - - - - ))} - - ${product.price.toFixed(2)} - - - - ))} -
- -
- - - - - - - + <Title initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}> + Our Coffee Selection + + + + - - - - ))} - - - + <Button + onClick={() => setCategory("cold")} + style={{ + width: '200px', + backgroundColor: category === "cold" ? "#f0efdc" : "#7c2414", + color: category === "cold" ? "black" : "white", + }} > - Our Smoothie and Milkshake Selection - - - {product2.map((product) => ( - -
- - - {product.description} - -
- - {product.name} - ${product.price.toFixed(2)} - - - - - - ))} - - - - Our Cake Selection - - - {product3.map((product) => ( - -
- - - {product.description} - -
- - {product.name} - ${product.price.toFixed(2)} - - - - - - ))} - - - + <Button + onClick={() => setCategory("food")} + style={{ + width: '200px', + backgroundColor: category === "food" ? "#f0efdc" : "#7c2414", + color: category === "food" ? "black" : "white", + }} > - Our Soup and Salad Selection - - - {product4.map((product) => ( - + + + + {filteredProducts.slice(0, itemsNo).map((product) => ( + + + -
- - - {product.description} - -
- - {product.name} - ${product.price.toFixed(2)} - - - - - - ))} - - - - ); + {product.name} + ${product.price.toFixed(2)} + handleAddToCart(product)}> + Add to Cart + + + + ))} +
+ +
+ + + + + {[product1, product2, product3, product4].map((productList, index) => ( + + + {index === 0 + ? "Our Tea Selection" + : index === 1 + ? "Our Smoothie and Milkshake Selection" + : index === 2 + ? "Our Cake Selection" + : "Our Soup and Salad Selection"} + + + {productList.map((product) => ( + +
+ + + {product.description} + +
+ + {product.name} + ${product.price.toFixed(2)} + + + + + ))} + + + ))} + +); } export default Shop; From 3bfd5a35669368d20da81a8a0617de22e4f0ad1a Mon Sep 17 00:00:00 2001 From: Mohammed Mujtaba Date: Fri, 10 Jan 2025 20:10:42 +0530 Subject: [PATCH 3/3] Update Shop.js --- src/Pages/Shop.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index daab349..5d1d959 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -1,3 +1,4 @@ +import React from 'react'; import { useDispatch } from 'react-redux'; // import React, { useState } from 'react'; // import { addToCart, removeFromCart } from '../Store/cartSlice';