Products select image and add images to be selected

[axentioialexandru95]

Task Overview

This task aims to improve the display of product images in the listing view to accommodate different sizes without cutting them off. Additionally, when a product is selected, the user should be able to choose images from the children's gallery tied to their account. The enhancements should ensure that the interface is visually appealing and responsive across different devices.

Checklist

• [x] Improve Image Display in Product Listings

  • [x] Research and implement a CSS strategy or JavaScript library that can adapt image sizes without cropping them in the listing view.

• [x] Integration with Personalized Galleries

  • [x] Modify the product selection process to allow authenticated users to select images from their children's gallery.
  • [x] Ensure that the UI provides an intuitive way to browse and select these images when adding a product to the cart.

• [x] Enhanced Presentation of Product Sets

  • [x] Design a more dynamic layout to display product sets, including clear placeholders for images not yet selected.
  • [x] Implement visual cues or guidelines to indicate where images will appear within the set.

• [x] Ensure Responsive Design

  • [x] Test and adjust the UI to ensure that all new elements are fully responsive and functional on various screen sizes.
  • [x] Conduct cross-browser compatibility testing to confirm that the changes perform well across different platforms and devices.

• [x] Add to Cart Integration

  • [x] Ensure that all selected images and product info are correctly passed to the shopping cart.
  • [x] Validate the functionality to confirm that items with selected images can be added to the cart and proceed to checkout seamlessly.

Please use the placeholder images for the sets.

[axentioialexandru95]

Some changes requested:

• [ ] Title under the image for customers
• [ ] We need a zoom button to be able to see the picture better - icon - title
• [ ] Remove required from file input since they're all required
• [ ] Populate the pictures for the file input with the correct images (if there is no image, don't)
• [ ] Delete pricing from title
• [ ] Add additional information and information within the product
• [ ] Click Outside
• [ ] Responsive shouldn't go on top
• [ ] Add click outside on find gallery modal