javascript not running on newly added section

[studio-umbrella]

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!

[studio-umbrella]

Just bumping this up in case someone missed it. 🙂 

[StoreTaskExperť]

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]

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

[studio-umbrella]

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.

[ed_codes]

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]

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...

[Dugani]

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]

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

[Dugani]

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]

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.

[zaack93]

Did anyone find a solution ?

[Dugani]

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]

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.

[Dugani]

you are correct seems like I missed this part. Hopefully they will change it so that inline scripts are executed directly