Shopify 部分在添加部分时不执行脚本js代码

Question

this might be a quick question but I cannot find the answer. Im trying to build a section with a <script> tag in it. The script works fine once the section is added and saved, but my problem is that this section js code is not executed when it is added on the customiser on first instance. This leads to the section looking ugly cause the scripts needs to run. For more context, this section has a slider script in the section which is not executed when the section is added in the customiser. Only after the section has been saved, then the slider starts working. Anyone has had this issue? Or how to solve it? I know I can extract the script to a js file and run it from there and take the data from the section html properties and use the event shopify:section:load . I would like to know if its possible keeping the code in the section, that way I only work the code from one file. Also {% javascript %} tag has the same issue.

To further the explanation, I have the next script tag inside a section

<script>console.log("this is not executed")</script>

If I add this section in the customiser, that script tag is not executed. So I get no message on the console log.

Answer 1

Use schema checkbox for enabling or disabling, the setting values from the user will be stored in settings_data.json

{% if section.settings.script_enabled %}
  <script>
    $(document).ready(function(){
      console.log('{{ section.settings.script_text }}');
    });
  </script>
{% endif %}



{% schema %}
  {
    "name": "section pages",
    "settings": [
      {
        "type": "checkbox",
        "id" : "script_enabled",
        "label" : "enable script",
        "default": true
      },
      {
        "type": "text",
        "id": "script_text",
        "label": "script text",
        "default": "hello from schema"
      }
    ]
  }
{% endschema %}