Category Components Overview - AgroLogi/FreshShop GitHub Wiki
1. CategoryList Component
The CategoryList component is designed to display a list of product categories on the e-commerce homepage or a specific section dedicated to categories. It showcases each category with an associated icon, allowing users to easily navigate to product pages filtered by category.
Key Features:
- Dynamic Category Rendering: The component accepts a categoryList prop, which contains an array of categories fetched from the backend. Each category has a name and an icon.
- Responsive Grid Layout: The categories are displayed in a flexible grid layout using Tailwind CSS, ensuring responsiveness on different screen sizes. The number of columns adjusts based on the screen width.
- Interactive Category Tiles: Each category tile is interactive and becomes highlighted on hover. The icon scales up when hovered, adding a dynamic feel to the user experience. When clicked, it navigates the user to the respective category page (/products_category/[category-name]).
How It Works:
The component uses the Next.js Image component for rendering icons to optimize image loading. The category.attributes.name is used in the URL to navigate users to the corresponding category page. The use of Tailwind CSS utility classes ensures that the tiles have padding, rounded corners, and smooth transitions on hover, making the interface more user-friendly.
2. TopCategoryList Component
The TopCategoryList component is another version of the category list but designed for use in scenarios like category filters on product pages. It highlights the selected category and allows users to switch between categories.
Key Features:
- Horizontal Scrollable Layout: Unlike the CategoryList component, the categories are displayed in a horizontally scrollable format, making it suitable for smaller screens or as a top filter section on a product listing page.
- Selected Category Highlighting: The component accepts a selectedCategory prop, which determines the currently active category. The active category is visually distinct with a background color change and text color adjustment to enhance user experience.
- Responsive Design: The categories are arranged with a minimum width for each category tile, ensuring they are scrollable on smaller screens while maintaining a clean look on larger screens.
How It Works:
Similar to CategoryList, this component uses Next.js Image for icon rendering and Tailwind CSS for styling. The active category is highlighted using conditional styling based on the selectedCategory prop, making it easier for users to identify the currently selected filter.
3. ProductCategory Page
The ProductCategory page component handles the rendering of products filtered by category. It combines the TopCategoryList and AllProductList components to create a dynamic and user-friendly category page.
Key Features:
- Dynamic Data Fetching: The page fetches the list of products filtered by the selected category (params.categoryName) from the backend. It also fetches the full list of categories to display the category filter at the top.
- Category-Specific Header: A header is displayed at the top of the page, indicating the current category being viewed.
- Product Listing: Below the category filter, the list of products is displayed using the AllProductList component. This provides users with an intuitive way to browse all the products within a selected category.
How It Works:
The ProductCategory component utilizes getProductsByCategory and getCategoryList functions from the GlobalApi utility to fetch category and product data from the backend. The params.categoryName value from the URL is used to filter products, ensuring that the page is dynamically updated based on user selection. The page is styled using Tailwind CSS to provide a consistent look across devices.
Conclusion:
These three components—CategoryList, TopCategoryList, and ProductCategory—work together to create a seamless category browsing experience in the FreshShop app. The components are dynamic, responsive, and user-friendly, allowing users to easily navigate between product categories and view relevant products based on their interests. By leveraging Next.js, Tailwind CSS, and effective data fetching strategies, these components ensure a smooth and efficient user experience across all devices.