vuestorefront / vue-storefront-1

The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Newest updates: https://blog.vuestorefront.io. Always Open Source, MIT license.
https://www.vuestorefront.io
MIT License
19 stars 13 forks source link

[Bug]: Mutated value for config.products.omitVariantFields #496

Open didkan opened 3 years ago

didkan commented 3 years ago

Describe the Bug

In this commit: https://github.com/vuestorefront/vue-storefront-1/commit/55040a196be8a11ac0ce7d61afbaa762398f7599 a hardcoded array was moved into config. The problem is that the following push() will then mutate the original array config.products.omitVariantFields for every consecutive call, so that image is omitted even when it should not.

This means that configured products will not have the expected image property value in e.g. Product.vue page.

If we are going to use push()here we need to operate on a copy of the array and not the actual config array. Or we can also use array spread operator to return the correct result.

Solution 1: Make a copy of the config array.

const fieldsToOmit = config.products.omitVariantFields.slice()

Solution 2: Create return value via spread operator

const fieldsToOmit = [...config.products.omitVariantFields, !hasImage ? 'image': null]

Current behavior

If any previously loaded product variant does not have a base image in Magento, then image will be omitted form all consecutive product variants loaded/configured. When loading the product page with a configurable product, getCurrentProduct.image does not have the expected image (the image of the currently selected variant)

Expected behavior

When loading the product page with a configurable product, getCurrentProduct.image should have the value from the currently selected variant (simple product)

Steps to reproduce

No response

What version of Vue Storefront are you using?

1.12.3

What version of Node.js are you using?

14.17.6

What browser (and version) are you using?

Chrome 94.0.4606.81 (Official Build) (arm64)

What operating system (and version) are you using?

macOS Big Sur

Relevant log output

No response

Able to fix / change the documentation?

Code of Conduct