javascript not running on newly added section

studio-umbrella
Shopify Partner
60 0 18

Hi community!

 

I'm creating a section that has JS inside the section file (inside <script></script>).

When I just add the section via the Theme Editor, no JS runs until I save. It doesn't even run if I edit the section with various fields. It has to be saved in order for the JS to be executed.

 

I'm using the "shopify:section:load" event listener too, but that is only in use after I save. 

Could this be a bug within Shopify???

 

This is quite problematic because if a customer wants to add a section to see how it will look, but doesn't want to save because it would affect the live site, he can't! 

 

Any help would be great!

Need Shopify design and development? Need a Shopify section? We'd love to hear from you!
Replies 13 (13)

studio-umbrella
Shopify Partner
60 0 18

Just bumping this up in case someone missed it. 🙂 

Need Shopify design and development? Need a Shopify section? We'd love to hear from you!

StoreTaskExperť
Shopify Partner
1 0 1

You can wrap the function with this.

 

 

{% if request.design_mode %}
  document.addEventListener("shopify:section:load", function(event) {
  });
{% endif %}

 

 


Reference:

https://shopify.dev/themes/architecture/sections/integrate-sections-with-the-theme-editor

ed_codes
Shopify Partner
13 0 7

I'm having the same problem. Did you ever find a solution? 

studio-umbrella
Shopify Partner
60 0 18

I did! 

You need to wrap the JS with the {% raw %}{% endraw %} tags.

So it would be <script>{% raw %} ...JS code... {% endraw %}</script>

 

That worked for me.

Need Shopify design and development? Need a Shopify section? We'd love to hear from you!
ed_codes
Shopify Partner
13 0 7

Thanks for the reply! Unfortunately, this doesn't work for me. I thought the raw tags were just for outputting liquid brackets. I can't even output a console log. 

studio-umbrella
Shopify Partner
60 0 18

oh, then maybe try using {% javascript %}...{% endjavascript %} tags.

I don't remember how I got it to work, but I believe the previous option is working for me as well...

Need Shopify design and development? Need a Shopify section? We'd love to hear from you!
Dugani
Shopify Partner
11 0 3

Hey I'm still trying to find a solution for this. Looks like the one you provided is not working. Could you please check what you used? this would help me a lot!!!

studio-umbrella
Shopify Partner
60 0 18

Can you paste what you're adding here in the thread? It should work using either {% javascript %}...{% endjavascript %} or simply in the <script>...</script>

Need Shopify design and development? Need a Shopify section? We'd love to hear from you!
Dugani
Shopify Partner
11 0 3

thank you for your response. Again to make sure we are talking abou the same problem, the script is not run when you add a section for the first time only. after saving it runs it correctly.

{{ section.settings.hello_world }} 

<script>
console.log("hey from script")
</script>

{% javascript %}
console.log("hey from javascript")
{% endjavascript %}

{% schema %}
  {
  "name": "Code In Shopify Section",
  "settings": [
    {
      "type": "text",
      "id": "hello_world",
      "label": "Hello World",
      "default": "Hello World",
      "placeholder": "test",
      "info": "test"
    }
  ],
  "presets": [
    {
      "name": "Code In Shopify Section"
    }
  ]
}  
{% endschema %}

 

you can try adding this section in the theme customizer, on the first time when its added its not run.

studio-umbrella
Shopify Partner
60 0 18

oh, right. Thanks for the clarification.

I haven't found a way to go around that. It looks like Shopify takes the JS added in this way and appends it to a scripts file that it loads. So it only does that once the section is actually saved the first time. 

The only way around this is to add the JS to an already existing file that is being loaded separately.

Need Shopify design and development? Need a Shopify section? We'd love to hear from you!
zaack93
Shopify Partner
3 0 1

Did anyone find a solution ?

Dugani
Shopify Partner
11 0 3

No, I also dont get it why shopify doesnt do a quick fix here... if you have for example a section with blocks and you add a block then the JS suddenly runs, even without saving. I thought they are preventing some XSS attacks but thats not the case if the script runs after deleting or adding a block somewhere on the page without saving the page.

studio-umbrella
Shopify Partner
60 0 18

I think what you're describing is happening because the JS is already loaded on page load. From my experience, if you have inline scripts that have never been saved via the Theme Editor they won't run until saving.

In your example, the JS could have been saved on a different page with that same section/block and so it was already in the compiled file that Shopify creates.

Need Shopify design and development? Need a Shopify section? We'd love to hear from you!