Why are product variants not working in a second language on my store?

Technical Q&A
1

Hi all,

I am seeing a weird issue with the store after publishing a second language.

There is a product with variants that works 100% fine in English but is broken in French.

The store is using the Launch theme, but the issue is there on the Debut theme as well.

Product link on FR site: https://shop.uniart.ca/fr/products/automatic-hand-sanitizer-dispenser?variant=37771607998652

How to reproduce:

  1. open the page + console
  2. observe “Roues à roulettes:” has only 1 option available (second selector)
  3. change “Pare-chocs de sécurité:” to “Oui” (first selector)
  4. observe “ProductDetails.js:115 Uncaught TypeError: Cannot read property ‘id’ of null” error in the console, the product is disabled, price is missing.
  5. change the language to English (https://shop.uniart.ca/products/automatic-hand-sanitizer-dispenser?variant=37771607998652)
  6. verify the same product works fine with any option selected

The site was translated with the “Translation lab” app, but the issue persists without the app as well.

There were no modifications to the theme JS files, so this must be a product config/ platform issue.

It seems like I missing something very obvious in the product config, but cannot figure out what exactly. There are no separate settings for the FR site, except for language files.

Any ideas what is going on? What could possibly trigger such behavior?

Why would some variants be enabled in one language but disabled in another?

Full error log from the console:

ProductDetails.js:115 Uncaught TypeError: Cannot read property ‘id’ of null at ProductDetails.js:115 at VariantHelper.js:249 at Array.forEach () at VariantHelper._variantChange (VariantHelper.js:249) at HTMLSelectElement. (VariantHelper.js:74) at HTMLSelectElement.dispatch (jquery.js:5429) at HTMLSelectElement.elemData.handle (jquery.js:5233)

(anonymous) [email removed] ProductDetails.js:115
(anonymous) [email removed] VariantHelper.js:249
_variantChange [email removed] VariantHelper.js:249
(anonymous) [email removed] VariantHelper.js:74
dispatch [email removed] jquery.js:5429
elemData.handle [email removed] jquery.js:5233
2

This is not a platform issue, but an issue with how the site’s javascript finds the appropriate variant based on the selected options. It can’t find the variant. There must be a mis-match somewhere. Start console logging the options it’s working with in the “getVariantFromOptions” function.