The site has a whole bunch of accordions across multiple pages which all worked fine when built, but out of the blue a couple weeks ago every single one of them stopped working (no changes were made to any of the code files before it stopped working). The accordions require the calling of a .js file from assets, the fact that they have all stopped working at the same time im guessing that the issue must be around that somehow, or Shopify has updated the way it interprets code?
Any ideas?
Webiste is:
https://www.jurassicwatersports.co.uk/
(pages/test is a good page to look at as a example)
the accordions are based on the code from here:
https://www.envision.io/blogs/ecommerce-pulse/28832705-how-to-add-an-faq-accordion-to-your-shopify-store/
It’s not working because jQuery is not defined. The file that jQuery is loaded from is deferred (vendor.js), so it is running AFTER your inline js runs. Try moving your code for the accordions into the same ‘jquery_accordion.js’ file since that looks like it is already deferred as well.
Is there a way to make JQuery load sooner? I have so many sections containing accordions, I wouldn’t even want to think about moving that code into the .js file
So I’ve in deferred the Vendor.js file so that it now loads first and the the script dose now render the accordions properly. However, for some reason now, the accordions wont stay opened when clicked on?
Stand down…I’ve fixed it! As above the issue was the timing of when JQuery was loaded. This was a simple fix, simply edited the theme.liquid file
Original:
Amended:
Making the vendor.js file not deferred anymore isn’t ideal. It’s there to help with performance/page speed.