Implementation of Multiple Images Feature for Products in apps.hosting.zaviago Environment

John-zaviago commented 9 months ago

Issue Description

The product listing in our current item setup includes a single image field. We need to enhance this feature to support multiple images, similar to the functionality found in platforms like Shopify or Wix.

Background

This multiple images feature was previously developed by Umer and needs to be integrated into our beta.zaviago environment. The implementation should allow users to view multiple product images, enhancing the visual representation of products in line with contemporary e-commerce platforms.

Expected Behavior

Post-implementation, users should be able to:

Upload multiple images for a single product.
View a carousel or gallery of product images as seen on Shopify or Wix.
Navigate through the images with ease.

Goal

The goal is to provide a more dynamic and visually rich product experience to match the design standards of leading e-commerce solutions.

Implementation Timeline

The feature is planned for roll-out on the beta.zaviago environment by the end of this week, preferably by Thursday or Friday.

Action Items

Retrieve the existing code for the multiple images feature developed by Umer.
Integrate the feature into the beta.zaviago environment.
Ensure the feature aligns with the user interface and experience standards of Shopify and Wix.
Conduct thorough testing to ensure functionality and performance.

Request

Please prioritize this issue and proceed with the planned implementation. Your timely completion of this task is critical for our upcoming UI/UX updates.

Thank you for your attention to this important enhancement.

John-zaviago commented 8 months ago

@umer2001 Inconsistency in File Removal Between Drag and Drop UI and Attached Files

Issue Description: There is a minor behavior issue with the drag and drop function. When a file is uploaded and subsequently deleted from the drag and drop UI, the files in the "Attached Files" function are not being removed, leading to an inconsistency. Even though the drag and drop section shows no files, the attached files function retains the previously uploaded files.

Steps to Reproduce:

Upload a file using the drag and drop functionality.
Delete the uploaded file from the drag and drop UI.
Check the "Attached Files" section.

Expected Behavior: Deletion of a file from the drag and drop UI should also remove it from the "Attached Files" section.

Actual Behavior: Files deleted from the drag and drop UI do not get removed from the "Attached Files" section.

Additional Information:

This inconsistency may lead to confusion for users.
Ensure synchronization between drag and drop UI and attached files.

chomchuen commented 8 months ago

What I have found.⤵️

All new images I've added were deleted even I pressed delete button only for img I want to remove. https://www.loom.com/share/24d0023e190a40d1ac3ffa0bbd9c7869?sid=d401205e-a869-42be-a14e-a4c99787ae79
Can't save an order of images. https://www.loom.com/share/4579702ba2e842ae863364b4dd0275e5?sid=6495ab71-05d3-438e-b5d6-c5682ca3b04a

umer2001 commented 8 months ago

@chomchuen , Good catch 👍🏻, I have fixed it ! you can test now...

chomchuen commented 8 months ago

@umer2001 Tested. both issue I've found was fixed.✅ and found new issue.🚨

🎥 : https://www.loom.com/share/90061b9af86a43eeb2301340635d7c52?sid=6114bef0-7999-4aec-96b8-2951c4ed156e

1. Before

2. Rearrange an order but didn't save

3. Attached new image --> "order of images has been changed back"

John-zaviago commented 8 months ago

@umer2001 if you are ready you can push it live to app.hosting 🚀🚀🚀

umer2001 commented 8 months ago

@chomchuen , the last issue is also fixed, now you can test on tmp.zaviago and close the issue 😃.

chomchuen commented 7 months ago

@umer2001 I tested on apps.hositng and it's working defiantly fine so far on storefront(buyer's side) and on website item doctype (seller's side).

but it possible to display images widget in full width like this?

umer2001 commented 7 months ago

@chomchuen done on tmp.zaviago.com

also if possible list down all issues as a list, so we can reduce back and forth and I can also fix all at the same time.

chomchuen commented 7 months ago

@umer2001 Tested and approved full width widget. ✅

I found new issue with the image preview. Some images don't display in the multi imgage widget. Clearing the cache doesn't resolve the issue. This happens on app.hosting as well. https://www.loom.com/share/4c8627aedcf04b4981f42211d23963f4?sid=66ca1cf1-e8dd-49c5-b680-5ff52bca3f10

theses are image file that have the problem. https://drive.google.com/drive/folders/1VGn2klZhu6ZZSr_QkXUcEVtd2wPjgvYY?usp=sharing

and of course I try to list down all the issue as much as possible and report them to you but sometime I just notice the issue later.🥲

umer2001 commented 7 months ago

@chomchuen , this is also fixed now on tmp.zaviago.com.

John-zaviago commented 7 months ago

please push the last part and then we can review and close it @umer2001

John-zaviago commented 7 months ago

@chomchuen

I've conducted a check and review of the drag-and-drop image function. I'd greatly appreciate your final review and opinion on this matter so that I can proceed with closing it.

In apps.hosting

chomchuen commented 7 months ago

Tested, issue resolved.✅

zaviagodev / frappe