Javascript is hiding variant selector on product pages

Javascript is hiding variant selector on product pages

StoneLeo
New Member
4 0 0

Using the classic theme we noticed that our variant options were not being displayed on the product pages.

 

 

<select name="id" id="productSelect" class="product-single__variants" style="display: none;">
  <option selected="selected" data-sku="" value="42581103607960">Camoflage - $19.99 USD</option>
  <option data-sku="" value="42581103640728">Black - $19.99 USD</option>
</select>

 

The display:none; is not being generated in the html, instead it is being added by this javascript file: https://cdn.shopify.com/shopifycloud/shopify/assets/themes_support/option_selection-9f517843f664ad32...

 

 

Shopify.OptionSelectors.prototype.replaceSelector = function (t) {
  var e = document.getElementById(t),
  o = e.parentNode;
  Shopify.each(this.buildSelectors(), function (t) {
    o.insertBefore(t, e)
  }),
  e.style.display = 'none',
  this.variantIdField = e
},

 

 

This seems to be a file that Shopify is loading and then it is rewriting all the option selectors in the page to be hidden. How can we stop this from happening?

Replies 3 (3)

Zqdo
Shopify Partner
803 32 63

Does it just happen on this theme?

 

Have you made any changes to the code in the past?

 

Third, is your theme updated?

banned
StoneLeo
New Member
4 0 0

Yes it works fine with other themes.

 

Yes but only minor changes like text in the footer.

 

There is no update and iirc the theme used to be the default theme provided by shopify? It's been so long I don't recall and it's not in the theme shop.

StoneLeo
New Member
4 0 0
option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at Shopify.Product.getVariantById (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:2264)
    at Shopify.OptionSelectors.selectVariant (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:4977)
    at Shopify.OptionSelectors.selectVariantFromDropdown (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:4740)
    at Shopify.OptionSelectors.initDropdown (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:3838)
    at new Shopify.OptionSelectors (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:3640)
    at HTMLDocument.<anonymous> (akz-g6-bt-earphones:1414:5)
    at j (jquery.min.js:2:27136)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:27949)
    at Function.ready (jquery.min.js:2:29783)
    at HTMLDocument.K (jquery.min.js:2:30128)

I noticed this error in the console that the javascript doesn't seem to be able to read the length of the variant object? I also found an older copy of the theme that doesn't have this problem but the code for product.liquid is identical.

 

Here's an example page https://smartwholesale.net/products/akz-g6-bt-earphones