Multiple Variant Selection Attributes Bug (Saleor 3.0)

[iamjazzar]

What I'm trying to achieve

Defining Multiple Variant Selection Attributes

Steps to reproduce the problem

1. Go to dashboard > Configurations > Product Types > Create Product Type.
2. In the Variant Attributes and assign two attributes.
3. Go to Catalog > Products > Create Product.
4. In Organize Product section, select the Product Type you just created.
5. Finalize your product details (Don't forget to make it available for purchase.)
6. Go to storefront and select the product you just created.
7. Click on any variant attribute, notice that we have duplicate attributes.
8. Go ahead and select any value.
9. Click on the next attribute, and notice the other issue, all selections are disabled.

What I expected to happen

In storefront, for products with Multiple Variant Selection Attributes I should be able to select one unique value for each attribute I define in the dashboard.

This is a new behavior on the master branch that did not exist in earlier releases.

Screenshots

System information Operating system: MacOS Big Sur 11.3.1 Browser: Chrome Version 91.0.4472.77 (Official Build) (x86_64) and Safari Version 14.1 (16611.1.21.161.6)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gleniat]

I confirm this bug.

When two or more variant selection attributes are set in dashboard for a product, frontend shows duplicated and grayed out items in sidebar. User is unable to select proper combination and add it into the basket.

[yrobla]

I can confirm this bug as well

[emendo-web]

I can always confirm this bug.

Storefront version: 3.0.0-b.2 Dashboard version: 3.0.0-b.18 API version: 3.0.0-b.24

[drowolath]

I also can confirm this bug. And I suspect this to have always been the case even in 2.11 version of saleor-storefront.

At commit 677485436ca99ebf46d5d7ea2990e609c3b89c78, in file src/@next/hooks/useProductVariantsAttributes.tsx at line 25, the statement below is supposed to check if the variant attribute's value's already in the listing:

 const variantsAttributeValueExists = variantsAttributes[
   productVariantAttributeId
 ].values.includes(productVariantAttribute.values[0]!);

IMHO it shouldn't check for existing object, but for existing id. I'm not well versed in Typescript, but I'd write something like this:

var bar: string[];
bar = [];
const existingId = variantsAttributes[productVariantAttributeId].values.forEach(item => {bar.push(item.id)});
const variantsAttributeValueExists = bar.includes(productVariantAttribute.values[0]!.id!);

if (!variantsAttributeValueExists) {
  variantsAttributes[productVariantAttributeId].values.push(productVariantAttribute.values[0]!);
}

This, should display only unique variant's attribute's values. But it doesn't solve the problem of correct selection of said values: only the first value remains clickable

[drowolath]

Digging into the code, I suspect this portion in src/@next/components/organisms/ProductVariantPicker/ProductVariantAttributeSelect.tsx, at line 56, to be respomsible of disabling non relevant variant attributes values:

const attributeOptions = productVariantsAttribute.values
    .filter(value => value)
    .map(value => {
      const selectableAttribute =
        selectableProductVariantsAttributeValues[productVariantsAttributeId];
      const isOptionDisabled =
        selectableAttribute && !selectableAttribute.values.includes(value);

      return {
        disabled: isOptionDisabled,
        id: value.id,
        label: value.name!,
        value: value.value!,
      };
    });

Again checking for existing object seems to be not working; I'm thinking of something similar to my previous comment...still working on it.

But intuitively, I'd say that setting isOptionDisabled permanentlyto false would allow to select any combination we want, and only existing ones will actually be available to add to cart