[Ira Theme] Do you know how I can add a small JS code to a product page?

Store Design
1

Hi all,

I’ve added an accordion via HTML editor to the product page, but all of them are left open on default on page load. No matter how many times I’ve double checked the class and div names in the JS script I’ve added, I don’t know if I did the code wrong or if the path to the file is lost.

Screen Shot 2021-10-17 at 11.57.17 PM.png
Screen Shot 2021-10-17 at 11.57.17 PM.png1146×1010 125 KB

← accordions open on default on first page load.

The original style tag in the product details HTML editor:

I have the JS code here:

$(document).ready(function() {
  $(".accordion").accordion({
    collapsible:true,
    active:false
  });
});

this was under the file name “java-custom.js.liquid” and this snippet was linked before the tag in theme.liquid, the main HTML page:

I’ve tried the version without the script tag but it doesn’t seem to work.

Store URL: https://www.mxt2510.com

Store Password: 4ufa83hplych

Thanks, and let me know if you have questions.

1 Like
2

@Melody12

yes please try this way

{% if template contains 'product' %}
  
$(document).ready(function() {
  $(".accordion").accordion({
    collapsible:true,
    active:false
  });
});
{% endif %}
3

Sorry, I just tried yours and it doesn’t work for me - accordions are still open. I went ahead and moved the JS to another file named ‘product-accordion.js.liquid’ and made a new script tag in ‘theme.liquid’. There was already another JS code in ‘java-custom.js’ that may be causing the conflict, but it turns out it isn’t the cause of the issue.

{%- if template contains 'product' -%}        	
  
  
  
  {%- endif -%}

JS code for your reference:

jQuery(document).ready(function() {
  jQuery(".accordion").accordion({
    collapsible:true,
    active:false
  });
});
1 Like
4

@Melody12

oh sorry

let me know what’s error code?

5

I just checked the Console and nothing showed up that would point to the accordion. After a bit of troubleshooting, it may be because of how the HTML tags are originally set up. This is one segment of a whole div under the class “accordion.” There are three more of these.


Features 

 

- 100% organic cotton fleece

- elastic waistband

 

I have experimented with three different JS codes and I don’t know which one is best for this set up. And yes, I have used one each not all at once.

jQuery(document).ready(function() {
  jQuery(".accordion__group").accordion({
    collapsible:true,
    active:false,
  });
});

jQuery(document).ready(function(){
  jQuery(".accordion__label").click(function(){
    jQuery(".accordion__text").collapse('toggle');
  });
});

var coll = document.getElementsByClassName("accordion_label");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

The style tag for your reference:
1 Like
6

@Melody12

oh may be something is wrong code your theme