Product Components - AgroLogi/FreshShop GitHub Wiki
1. AllProductList Component
The AllProductList component is responsible for displaying a list of products on the e-commerce platform. It accepts a productList prop, which contains an array of products, and renders up to 8 products in a grid layout.
Key Features:
- Dynamic Product Rendering: The component uses the productList prop to dynamically generate a grid of product cards, each represented by the ProductItem component.
- Responsive Grid Layout: Tailwind CSS is used to ensure the grid layout adjusts for different screen sizes, with 2 columns for smaller screens and up to 4 columns for larger screens.
- Stylish Product Display: Products are displayed in a neat, interactive grid, providing a user-friendly and visually appealing layout for customers to browse products.
How It Works:
For each product, the component renders a ProductItem. The grid layout is styled using Tailwind CSS classes, ensuring responsiveness. By limiting the displayed products to 8 (index<8), the component keeps the display concise.
2. ProductItem Component
The ProductItem component is responsible for rendering individual product cards. It provides key product details, such as the product image, name, and pricing, while also offering an "Add to Cart" button with additional product details in a modal dialog.
Key Features:
- Product Details Display: Each product card shows the product’s image, name, selling price, and original price.
- Interactive Design: On hover, the card scales up and displays a shadow, providing a visually engaging experience.
- Add to Cart Button with Modal: The "Add to Cart" button is placed inside a dialog component. When clicked, the ProductItemDetails modal opens to show more detailed information about the product.
How It Works:
The component renders the product's image using the Next.js Image component for optimized loading. The pricing is displayed with the selling price highlighted and the original price struck through. Tailwind CSS classes ensure the card's responsiveness and smooth hover effect. The Dialog component wraps the "Add to Cart" button, allowing users to view product details in a pop-up modal before adding the item to their cart.
3. ProductItemDetails Component
The ProductItemDetails component is a detailed product view, displayed inside a modal dialog. It shows all relevant product information, including an image, detailed description, quantity available, and a button to add the product to the shopping cart.
Key Features:
- Detailed Product View: It shows the product’s image, name, description, pricing, and available quantity.
- Quantity Selector: Users can adjust the quantity of the product they wish to purchase using plus and minus buttons.
- Add to Cart Functionality: The component integrates with the shopping cart using the addToCart function, which handles adding the selected product and quantity to the user's cart.
- Responsive Design: The layout adjusts for different screen sizes, making it usable across devices.
How It Works:
When the "Add to Cart" button is clicked, the component first checks if the user is authenticated by verifying the JWT token stored in sessionStorage. If the user is not logged in, they are redirected to the sign-in page. If the user is authenticated, the product is added to the cart using the GlobalApi.addToCart function, which sends a request to the backend with the product details, user information, and selected quantity. Upon successful addition, the cart state is updated.
Conclusion:
These three components—AllProductList, ProductItem, and ProductItemDetails—work seamlessly to create an intuitive, engaging, and fully functional product browsing experience in the FreshShop e-commerce app. The AllProductList displays products in a responsive grid, ProductItem handles the display of individual product information and interaction, while ProductItemDetails offers a more in-depth view of the product, allowing users to adjust quantities and add items to their cart.