Where can I add the event listener code in a FAQ page template?

Where can I add the event listener code in a FAQ page template?

daniel1491
New Member
10 0 0

Hi everyone!

Hope you're all doing well - wanted to ask a quick question regarding our shopify store. I've created a FAQ template on the pages section such that, I'm able to edit it through shopify itself (as you can see from the screenshot). 

FAQ 2.PNGFAQ 3.PNG'

The only thing that isn't working is the event listener to open the accordion. I followed this youtube video for tutorial: https://www.youtube.com/watch?v=DhvllxGMg4E. He adds the event listener under the script.js file but I can't seem to locate it and when I tried creating a new .js file under 'asset' but nothing is working. Does anyone know the potential solution to this?

Replies 4 (4)

Huptech-Web
Shopify Partner
1047 208 225

Hi @daniel1491 , Can you please provide your Javascript code for this section?

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
daniel1491
New Member
10 0 0

Hey there!

The event listener code is :

 

const questionHeaders = document.querySelectorAll(".faq-page-question-header");

questionHeaders.forEach((header) => {
header.addEventListener("click", () => {
header.parentElement.classList.toggle("active");
});
});

 

For all other codes that you may need:

https://github.com/Coding-with-Robby/faq-page/tree/main

Please check this 

Huptech-Web
Shopify Partner
1047 208 225

Hi @daniel1491 , I checked that the code is working. While I inspected your code I found that your preview URL is added in the script. Which is causing the error so please check your file and remove the URL from the code. Please review the below screenshot.

image_2024_04_03T07_06_43_636Z.png

 

 

 

If the above doesn't help please try removing your JS and adding the below code into your faq.liquid section file.

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  const questionHeaders = document.querySelectorAll(".faq-page-question-header");

  questionHeaders.forEach((header) => {
    header.addEventListener("click", () => {
      header.parentElement.classList.toggle("active");
    });
  });
});
</script>

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

sahilsharma9515
Shopify Partner
1266 165 245

Hi @daniel1491 You can edit the FAQ design from the theme itself, as themes usually have a page where you can edit the design of some predefined pages. If you have created this page with the help of code then you can only edit it through code files itself then you will not be able to edit it from the theme.

 

Usually you find the page here:

Online Store-> Theme-> Customize-> Homepage-> Pages-> FAQ.

 

sahilsharma9515_0-1712128717887.png

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

 

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️