Hamburger navigation not opening on mobile devices for product template only

Technical Q&A
1

Hello! here goes my first question on the forum, hopefully someone can help / point me in the right direction. :slightly_smiling_face:

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.

  • 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 :disappointed_face:

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. (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. (theme.js?v=15882746809637664964:5650)

Cheers!

Leigh

2

Hi @LeighHanney , take a look at this thread: https://community.shopify.com/c/Shopify-Design/Javascript-Error-Breaking-Multiple-Product-Page-Functionalities/m-p/372921/highlight/true#M97055

3

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

4

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.