Vue-storefront: No option to select confiugurable children product

[dmytrokravch]

Current behavior

I have confiugurable product with several simple products. Options of that products are two distinct sets. So one product completely excludes ability to reach other by selecting options. For example:
the first simple product have color - blue and size - S, the second color - red and size: M. In this case, I will not be able to click the second product, and buy it.

Expected behavior

I think in this case it would be useful to be able to enter the product page without pre-selected options

Steps to reproduce the issue

Create configurable product with two simple products in which options will be from two disjoint sets

Version of Vue Storefront

• [x ] Vue Storefront
• [ ] Vue Storefront Next

Can you handle fixing this bug by yourself?

• [ ] YES
• [ ] NO

Which Release Cycle state this refers to? Info for developer. (doesn't apply to Next)

Pick one option.

• [ ] This is a bug report for test version on https://test.storefrontcloud.io - In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• [ ] This is a bug report for current Release Candidate version on https://next.storefrontcloud.io - In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• [x ] This is a bug report for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version hotfix - In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

[gibkigonzo]

hey, why you are not able to select other option? it's not displayed on product page?

[dmytrokravch]

They are displayed, and disabled by isOptionAvailable function, because that options from distinct set

[gibkigonzo]

it may related with https://github.com/DivanteLtd/vue-storefront/issues/4831

[simonmaass]

@gibkigonzo kinda related but not directly... the issue that @dmytrokravch is talking about results from a different reason...

i believe the problem comes from this line in Product.vue:

async changeFilter (variant) {
      const selectedConfiguration = Object.assign({ attribute_code: variant.type }, variant)
      await filterChangedProduct(selectedConfiguration, this.$store, this.$router)
      this.getQuantity()
    },

filterChangedProduct always merges the current config: core\modules\catalog\events.ts in line 27

const currentProductConfiguration = store.getters['product/getCurrentProductConfiguration']
const changedConfig = Object.assign({}, currentProductConfiguration, { [filterOption.attribute_code]: filterOption })

therefore if the new selected option doesnt share the other configurable attribute it will never find a correct child....

what i did to "fix" this was change the changeFilter to this:

async changeFilter (variant) {
      const selectedConfiguration = Object.assign({ attribute_code: variant.type }, variant)
      // Remove all other configurations in order to chose possible variation with new selected
      if (variant.type === 'material') this.$store.commit('product/product/SET_CURRENT_CONFIGURATION', {})
      await filterChangedProduct(selectedConfiguration, this.$store, this.$router)
    }

maybe this will help...

[gibkigonzo]

nice @simonmaass So maybe we should pass some options as last argument to disable merging configuration 🤔 wdyt @Fifciu ?
await filterChangedProduct(selectedConfiguration, this.$store, this.$router, { merge: false })

[Fifciu]

Sounds cool for me @gibkibonzo