Products: Drag and drop images to change the photo order

[shiki]

Discussed: p1604571364161700-slack-CGPNUU63E

---

Corresponding Android issue: https://github.com/woocommerce/woocommerce-android/issues/3139

[rezzap]

We had a user asking about making this the same on iOS as it is on Android in 3562340-zd-woothemes:

In the app in an iOS mobile, when we add product images, the last one which is selected, becomes the product’s primary image and not as a gallery image. In an android mobile, it is vice versa, which is the best and most helpful way. Is there any way the iOS version be changed to function similar to the android version?

[shiki]

I'm gonna add this as part of Add/Edit Products release 5 because this is already done on Android and we probably will not proceed with Milestone 6.

[wzieba]

We also had a user asking about this feature in app reviews:

This app has worked great for us modernising our trade business, and helping us generate a lot more revenue not much to fault really, however little things I’d like to add is being able to move pictures of a newly added product, as I have to take the pictures backwards when using the app to make sure they appear in the correct order, this feature works on other platforms just not IOS, also I would also recommend a search SKU feature to help develop the app further and speed up user interaction and make the app more efficient.

[Juanpe]

Hi @shiki 👋🏼

I'm going to work on this issue, but I have some questions. Please could you help me answer them? 🙂

1️⃣ Since merchants can tap an image to navigate to the preview screen, I think we should use another gesture, e.g., a long press, to drag the image. WDYT?

2️⃣ Should the text "Drag and drop the images to change the photo order" appear when there is only one image?

3️⃣ The changes should persist and synchronize with the backend when the merchant saves the changes by tapping the "Save" button, shouldn't they? This is the same behaviour we have when a photo is deleted.

https://user-images.githubusercontent.com/1409041/162388797-048c9a92-34ca-498f-8c98-76c8cf421019.mp4

Thanks! 🙂

[itsmeichigo]

Since @shiki will be AFK for a few days I'll jump in and help with answering the questions:

Since merchants can tap an image to navigate to the preview screen, I think we should use another gesture, e.g., a long press, to drag the image. WDYT?

This is correct - I think Apple supports dragging and dropping items in UICollectionViews natively - maybe we can use that?

Should the text "Drag and drop the images to change the photo order" appear when there is only one image?

It makes sense to only show this text when there are more than one image.

The changes should persist and synchronize with the backend when the merchant saves the changes by tapping the "Save" button, shouldn't they? This is the same behaviour we have when a photo is deleted.

Yes, we should keep the order after the changes are made.

[Juanpe]

Thanks, @itsmeichigo for the answers 👍🏼

This is correct - I think Apple supports dragging and dropping items in `UICollectionView's natively - maybe we can use that?

You're right. But to be sure that we're on the same page. There are two ways to "move" the items. One is using, like table views, the delegate methods that allow users to move cells, and the other one is using the protocols UICollectionViewDragDelegate and UICollectionViewDropDelegate, here there is a post by Apple explaining how to do it. Both ways could be valid for us, but I think the second one is more focused on dragging and dropping items between apps.

Since the first one is easier to implement, I'd say to use this one, but I don't have a strong preference, so I could use the other one as well 🙂

WDYT?

[itsmeichigo]

I'd say go with your guts 😄 We like simple solutions too, so please feel free to pick what seems best for you.