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

Melody12
Excursionist
16 1 6

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 <-- accordions open on default on first page load.

 

The original style tag in the product details HTML editor:

<style>

.accordion__group{
margin:0 !important;
}


.rte--product,.accordion__label{
--s-icon-size:20px;
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
margin: 0;
padding-left:10px;
padding-right:5px;
cursor:pointer;
font-size:1em;
height:40px;
border-radius:2px;
transition: 0.3s;
}

.rte--product,.accordion__label:hover{
opacity: 1;
background-color:#F9F9F9;
transition: 0.3s;
transition: 0.3s;

}

.rte--product,.accordion__label a{
opacity: 1;
}

.accordion__text{
margin:0 !important;
}
</style>

 

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 </body> tag in theme.liquid, the main HTML page:

 

  <script src="{{ 'java-custom.js' | asset_url | script_tag }}" defer="defer"></script>

 

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.

Replies 5 (5)
KetanKumar
Shopify Partner
24919 2495 9027

@Melody12 

yes please try this way

{% if template contains 'product' %}
  <script src="{{ 'java-custom.js' | asset_url | script_tag }}" defer="defer"></script>
$(document).ready(function() {
  $(".accordion").accordion({
    collapsible:true,
    active:false
  });
});
{% endif %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Melody12
Excursionist
16 1 6

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' -%}        	
  <script src="https://code.jquery.com/jquery-2.2.4.js" crossorigin="anonymous"></script>
  <script src="{{ 'java-custom.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-accordion.js' | asset_url }}" defer="defer"></script>
  {%- endif -%}

 JS code for your reference:

jQuery(document).ready(function() {
  jQuery(".accordion").accordion({
    collapsible:true,
    active:false
  });
});
KetanKumar
Shopify Partner
24919 2495 9027

@Melody12 

oh sorry 

let me know what's error code?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Melody12
Excursionist
16 1 6

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.

 

 

<div class="accordion">

<div class="accordion__group"><a class="accordion__label" href="#">Features </a>
<div class="accordion__text">&nbsp;
<ul>
<li>100% organic cotton fleece<br></li>
<li>elastic waistband</li>
</ul>
&nbsp;</div>
</div>

</div>

 

 

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:

 

<style><!--
.accordion__group{
margin:0 !important;
}


.rte--product,.accordion__label{
--s-icon-size:20px;
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
margin: 0;
padding-left:10px;
padding-right:5px;
cursor:pointer;
font-size:1em;
height:40px;
border-radius:2px;
transition: 0.3s;
}

.rte--product,.accordion__label:hover{
opacity: 1;
background-color:#F9F9F9;
transition: 0.3s;
transition: 0.3s;

}

.rte--product,.accordion__label a{
opacity: 1;
}

.accordion__text{
margin:0 !important;
}
</style>

 

KetanKumar
Shopify Partner
24919 2495 9027

@Melody12 

oh may be something is wrong code your theme 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing