Solved

Hamburger navigation not opening on mobile devices for product template only

LeighHanney
Tourist
3 1 0

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

 

Accepted Solution (1)
LeighHanney
Tourist
3 1 0

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.

View solution in original post

Replies 3 (3)

g33kgirl
Shopify Partner
390 109 142

Hi @LeighHanney, take a look at this thread: https://community.shopify.com/c/Shopify-Design/Javascript-Error-Breaking-Multiple-Product-Page-Funct...

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
LeighHanney
Tourist
3 1 0

Thanks! I'll have a read now. Appreciated.

LeighHanney
Tourist
3 1 0

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.