javascript not running on newly added section

studio-umbrella
Shopify Partner
59 0 17

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 11 (11)

studio-umbrella
Shopify Partner
59 0 17

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
59 0 17

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
59 0 17

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
10 0 2

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
59 0 17

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
10 0 2

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
59 0 17

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 0

Did anyone find a solution ?