Liquid, JavaScript, themes, sales channels
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?
Does it just happen on this theme?
Have you made any changes to the code in the past?
Third, is your theme updated?
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.
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
User | RANK |
---|---|
38 | |
28 | |
13 | |
11 | |
8 |
Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...
By Jasonh Dec 8, 2023Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023