Admin: Adding Variant Product Properties is confusing

[vfonic]

Steps to reproduce

I think Product Properties page requires some attention.

Go to /admin/products, choose a product with variants and click on "Product Properties".

First, if you click on "+ Add Product Properties" in top right corner, it will add new row to "Product Properties" table, which could be slightly confusing, especially since we're introducing new kind of way to interact with "adding multiple records on a single page": #1715

Second, and more important, editing of variant product properties is really unintuitive. You select Option Types values (I don't know this AR table name), not Variants, and then (even if there is no variant for selected Option Types), you click on "Filter results" (???) to open up a table for adding variant properties.
After the table is opened, there's no indication which variant/option-types the properties are being added to.

[mtomov]

I'm sure you will have a hard time finding someone to disagree with you : )

In general, on those matter, I'd advise to just pure steel the UX from Shopify : ) .. it's really pretty good , and you will save yourself lots of time coming up with one of your own.

[vfonic]

It would be good if someone who has already done that, to share back with the community. ;)

[f3lan]

Working on it 😸

[johnny243]

Looking forward to work on this if it's not done already.

[cesartalves]

@kennyadsl this seems mostly UI-related in regards to the Admin.

The two main issues described are:

First, if you click on "+ Add Product Properties" in top right corner, it will add new row to "Product Properties" table, which could be slightly confusing, especially since we're introducing new kind of way to interact with "adding multiple records on a single page": #1715

I can reproduce this, and I think the main issue is that you can click on Add Product Properties indefinitely and it will just keep adding them.
We should probably move that button to a + on the table to increase the UI clarity.

Also, when you save by clicking on Update, it redirects to the Product page. I would expect it to redirect to the current page I'm in if I want to assign more Product Properties to the Product. Better UX.

Second, and more important, editing of variant product properties is really unintuitive. You select Option Types values (I don't know this AR table name), not Variants, and then (even if there is no variant for selected Option Types), you click on "Filter results" (???) to open up a table for adding variant properties.
After the table is opened, there's no indication which variant/option-types the properties are being added to.

I think there's a misconception here in the "Option Types vs Product Properties". Perhaps the author did not understand their difference.

But one thing stands out - there's indeed a "Filter results" button, under a Variant Properties section, that does absolutely nothing:

Have we had Variant Properties at one point and removed them? If so, should probably remove that section from the UI! 🕵️

[kennyadsl]

Have we had Variant Properties at one point and removed them? If so, should probably remove that section from the UI!

We still have variant properties, see https://demo.solidus.io/admin/products/premium-cotton-t-shirt/product_properties. You are probably looking at a product without variants. On a side note, that part of the UI is terrible, it's very counterintuitive how to add new variant properties.

We should probably move that button to a + on the table to increase the UI clarity.

Seems like a good temporary solution. I'm a bit concerned that we might have that element ("Add Resource") in other pages in that same position, so for consistency maybe it's worth considering a broad UI revising (which BTW, is planned for the near future), so not sure if a patchy solution is worth at this point.

Also, when you save by clicking on Update, it redirects to the Product page. I would expect it to redirect to the current page I'm on if I want to assign more Product Properties to the Product. Better UX.

Seems like a low-hanging fruit to slightly improve the UX here. 👍