Hamburger navigation not opening on mobile devices for product template only

Solved
LeighHanney
New Member
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

 

0 Likes
g33kgirl
Shopify Partner
211 51 63

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.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
LeighHanney
New Member
3 1 0

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

0 Likes
LeighHanney
New Member
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.

0 Likes