If I use a custom section with JS code then it only works the first section

Technical Q&A
, ,
1

If I use a custom section with JS code then it only works the first section .if I used multiple times then JS it is not working. any solution ?? . I also put JS code in Theme and global.js liquid file but it is not working.

2

It really depends on what your trying to do an what section you are trying to add custom code for. Best practice if code is for a specific page such as item or blog etc, so that your shop is able to be updated without having to trace back to snipet etc.

But again hard to provide any specific advice without more information.

3

I’ve created video with text section and added java script for the forward video and backwards video. it’s working only first section if I’ve add some more video with section there are not working another sections.

here is Java script and liquid code

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  

    

     

          {% if section.settings.videourl != blank %}
            
              
              

        
        

         
        

      

                  {% endif %}

  

    

    
      

        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              ## 
                {{ block.settings.heading | escape }}
              
            {%- when 'caption' -%}
              

{{ block.settings.caption | escape }}

            {%- when 'text' -%}
              {{ block.settings.text }}

            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
4

  1. You should not use inline scripts, especially for sections that can be included several times on one page.

  2. Use web components (aka custom elements) and query selectors inside component using reference to context (this.querySelector(…)).

  3. You can use:
    querySelectorAll(‘.player__video’).forEach(player => {
    const notifications = player.querySelectorAll(‘.notification’);

…
})

Last variant the most fastest solution for you but not really recommended.