Liquid, JavaScript, themes, sales channels
Hello! here goes my first question on the forum, hopefully someone can help / point me in the right direction. 🙂
We have a site in developer mode at the moment, about to hand over to the client but in testing I discovered that the hamburger navigation on mobile (tested on mobile chrome, safari and devtools) is not loading - sliding out. Eg. this element:
- Only happening on product pages eg: product-template.
- Works on all other templates though (page, blog, collection, cart) - Just the product template for mobile viewport.
<button class="slideout__trigger-mobile-menu js-slideout-open" data-wau-slideout-target="mobile-navigation" data-slideout-direction="left" aria-label="Open navigation" tabindex="0" type="button" name="button">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
- It's a purchased theme and I have reached out to the developers there as well
- no mention of this as a bug or bug fix in the change log.
- No theme customisation (apart from minor edit to the collections list template (and the nav works there on mobile)
Site: https://allinadayapparel.com/ (devmode)
password: bocaub
Theme: via theme store - https://themes.shopify.com/themes/testament/styles/revelation v 7.4.4
Example page with issue:
https://allinadayapparel.com/collections/new-arrivals/products/ivory-silk-face-mask
Console is showing an uncaught error on that template only - thinking this is the root cause - no idea how to fix 😞
Testament Version 7.4.4 by Underground {bar: 1}
option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1 Uncaught TypeError: Cannot read property 'parentNode' of null
at Shopify.OptionSelectors.replaceSelector (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)
at new Shopify.OptionSelectors (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)
at Object.theme.ProductForm (theme.js?v=15882746809637664964:2866)
at new Product (theme.js?v=15882746809637664964:4063)
at Sections._createInstance (theme.js?v=15882746809637664964:2329)
at Sections.<anonymous> (theme.js?v=15882746809637664964:2407)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at Sections.register (theme.js?v=15882746809637664964:2406)
at HTMLDocument.<anonymous> (theme.js?v=15882746809637664964:5650)
Cheers!
Leigh
Solved! Go to the solution
This is an accepted solution.
Update! Problem solved, thanks to the amazing support from Tiffany at 'We are Underground' (theme developers).
If anyone comes across the same issue the change made that works in this instance was:
in theme.js.liquid, ADD:
if ( Product.variants.length == '1' ) return false;
on the line just above:
new Shopify.OptionSelectors(prodSelector, {
Naturally, there is no guarantee that this will work in your situation, but if you're using the same theme, the support was excellent from the devs.
Hi @LeighHanney, take a look at this thread: https://community.shopify.com/c/Shopify-Design/Javascript-Error-Breaking-Multiple-Product-Page-Funct...
Thanks! I'll have a read now. Appreciated.
This is an accepted solution.
Update! Problem solved, thanks to the amazing support from Tiffany at 'We are Underground' (theme developers).
If anyone comes across the same issue the change made that works in this instance was:
in theme.js.liquid, ADD:
if ( Product.variants.length == '1' ) return false;
on the line just above:
new Shopify.OptionSelectors(prodSelector, {
Naturally, there is no guarantee that this will work in your situation, but if you're using the same theme, the support was excellent from the devs.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024