UI/UX: Add "Color Swatch Selection" on Product Cards

[pradeep0153]

Closes #7941.

Description

When viewing a grid of products on shop.html, users often want to know what other colors an item comes in without having to click through to the individual product page and wait for it to load. Adding small, interactive color swatches directly to the product cards allows users to preview color variations quickly and seamlessly directly from the catalog.

Implementation Details

• Additive Structure: The implementation is strictly additive and contained within the new features/color-swatch-selection directory to prevent any merge conflicts with the core template.
• HTML Injection: On shop.html, a select few product cards (.pro) are updated to serve as examples for multi-color items. Inside the product description area (near the price or title), a small container for color swatches (.color-swatches) is added.
• Swatch Styling: 3-4 small, circular div elements are created within that container, each styled with a different CSS background-color representing the available options (e.g., #ff0000, #0000ff, #000000).
• JavaScript Interaction:
  • A script listens for click (or mouseenter) events on these specific color swatches.
  • When a swatch is interacted with, the script dynamically updates the src attribute of that specific card's main product image to point to the image corresponding to the selected color.
  • It also adds an .active-swatch class (like a slightly thicker border or an inner shadow) to indicate which color is currently being previewed.
• Documentation: The README.md details how to pass dynamic image paths for different colors from a backend database to these swatches.

Impact

This highly requested e-commerce feature drastically improves the browsing experience. By exposing product variety upfront, it increases user engagement with the catalog and helps customers find exactly what they are looking for faster.

[github-actions]

Welcome to Cara! 🛍️

Thank you so much for opening this pull request. We really appreciate your contribution to this e-commerce platform!

Next Steps:

• Ensure your code follows the coding standard.
• A maintainer will review your changes shortly.