Variant picker not working correctly in chrome

Online Store and Theme Development
1

We have a problem with variants selection not working on chrome.
We tried disabling all apps switching to standard product theme, etc

Chrome console logs this error:

product-form.js:129 Uncaught TypeError: Cannot read properties of null (reading ‘querySelector’) at get variantIdInput (product-form.js:129:26) at new (product-form.js:9:14)
get variantIdInput|@|product-form.js:129|
(anonymous)|@|product-form.js:9|

URL is for example: biohort - HochBeet - Pflanzbeet – elements4me
(only in chrome and sporadically)

It seems that the constructor is fired twice and the form is not yet ready.

2

@Stefan_Weber what theme do you use? Is it custom theme or one of the Shopify themes?

3

For reference he seems to be using Dawn.

Also I see no issues - variant selection works as expected for me, in Chrome.

Can it be some of your browser extensions? Variant selection (and the respective js error) is very much theme (or browser extensions) dependant. Not shop dependant.

4

Hi guys,

Yes, its dawn theme 15.2.0

the problem exists on Mac and Windows Chrome. No extensions installed.
The problem is sporadic.

It apears when reloading (try CTRL + R, or CTR + SHIFT + R) or selecting variants

In the meantime I’ve found a workaraound by reloading the page with JS when the error apears (-> the form is not loaded)
I’m not happy with this solution though.

So you might not see it reloading. But you can glimpse it in the console.

I think the problem originates from the add to cart button.
When we switch it off in the theme editor the problem disapears.

5

I took it out again because sometimes it created an endless loop…

6

I found the problem:

The (very famous) app “Variant Option Product Options” placed some code in main-product.liquid that changed the timing to load product-form.js

I changed the code back and got in contact with them:


<!-- this was put back by us from original theme code -->
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>


  <!-- this was commented out by us -->
  <!-- script>
        (function () { if ((!document.documentElement.innerHTML.match(/asyncLoad/) || (document.documentElement.innerHTML.includes && (document.documentElement.innerHTML.includes('\\/obscure' + '-escarpment-2240') || document.documentElement.innerHTML.includes('/assets/' + 'best_custom_product_options.js')))) && (!window.bcpo || !bcpo.disabled) && window.bcpo_data && bcpo_data.virtual_options && bcpo_data.virtual_options.length) { return; } var script = document.createElement('script'); script.defer = true; script.src = "{{ 'product-form.js' | asset_url }}"; document.head.appendChild(script); })();
    </script -->
1 Like