Skip to content

Implement "Highly Recommended" Section on Product Page #48

@Alexandrbig1

Description

@Alexandrbig1

Priority: High
Difficulty: Advanced


Overview:
We need to add a Highly Recommended section on each individual product page.
This section should dynamically suggest other products based on category and/or goals of the currently viewed product.

The goal is to provide users with personalized recommendations that feel relevant and increase chances of cross-selling.


Requirements:

  1. Dynamic Filtering

    • Fetch all products from the backend.
    • From the list, filter products that:
      • Belong to the same category as the current product OR
      • Share at least one goal (e.g., "Build Muscle").
    • Exclude the currently viewed product.
  2. UI Layout

    • Section title: “Highly Recommended”.
    • Display products in a slider or pagination layout (responsive, swipeable on mobile).
    • Each recommended product card should include:
      • Product image
      • Product name
      • Price
      • rating (stars)
      • reviewsCount
      • Flavors
      • Flavors dropbox
      • CTA button: "View Product"
      • Wishlist button (Add button to wishlist)
  3. Data Fields Required (from backend)

    • name
    • price
    • category
    • goals
    • image
    • flavors
    • rating (new field, float, e.g., 4.7)
    • reviewsCount (new field, integer, e.g., 124)
  4. Navigation

    • Clicking on a recommended product should navigate to that product’s detail page (/products/:id).

Technical Notes:

  • This is a dynamic task: data must come from backend API, not hardcoded.
  • Must handle edge cases:
    • If no recommended products exist → show placeholder message: “No recommendations available for this product.”
    • Ensure slider works across all screen sizes (responsive).

Assets:

Image


Acceptance Criteria:

  • Highly Recommended section appears below product description.
  • Shows filtered products dynamically (by category/goals).
  • Slider works smoothly on desktop & mobile.
  • Each card displays image, name, price, rating, flavors, flavors dropbox, reviewsCount, wishlist button, and CTA.
  • Navigation to product detail page works correctly.
  • Graceful fallback when no recommendations exist.

⚠️ Notes for Contributors:

  • Note: Fetch product data from https://corexshoptest.onrender.com/api/products/:id

Metadata

Metadata

Assignees

Labels

frontendTasks related to the frontend (React, Vite, TailwindCSS, UI components, pages)hacktoberfestSpecial issue for Hacktoberfesthacktoberfest-2025Special issue for Hacktoberfest 2025priority: highNeeds attention ASAP

Projects

Status

Done

Relationships

None yet

Development

No branches or pull requests

Issue actions