如何在Shopify公共应用主题扩展中引入多个外部jQuery文件？

情况1：新增的是本地JS文件（和front_shop.js同目录） #

Shopify的Section Schema里，javascript字段支持数组格式，直接把原来的单个字符串改成包含所有需要引入的JS文件路径的数组即可。

修改后的schema代码如下：

{% schema %}
   {
    "name": "Lyfsize",
    "target": "section",
    "stylesheet": "front_shop.css",
    "javascript": ["front_shop.js", "your-second-js-file.js", "your-third-js-file.js"],
    "templates": ["product", "index"],
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Click here"
      },
      {
        "type": "color",
        "id": "text_color",
        "label": "Text Color for anchor tag",
        "default": "#000000"
      },
       {
        "type": "color",
        "id": "form_text_color",
        "label": "Text Color for Form Label",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "form_button_text_color",
        "label": "Text Color for Submit Button",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "form_button_background_color",
        "label": "Submit Button background color",
        "default": "#000000"
      },
       {
        "type": "checkbox",
       "id": "show_announcement",
       "label": "Show Form",
       "default": false
      }
    ]
  }
{% endschema %}

注意：把your-second-js-file.js和your-third-js-file.js替换成你实际的本地JS文件名，确保文件和front_shop.js放在同一目录下。

情况2：新增的是外部CDN的jQuery文件 #

如果要引入外部的JS文件（比如jQuery官方CDN或者其他第三方库），不能直接通过Schema的javascript字段配置，需要在你的Section对应的Liquid模板文件（比如lyfsize.liquid）里添加<script>标签来引入，示例如下：

<!-- 在Liquid模板的合适位置添加外部JS引入 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://your-external-js-url.com/second-file.js"></script>

<!-- 原有的Section内容 -->
<div class="lyfsize-section">
  <!-- 你的Section HTML代码 -->
</div>

注意：如果你的jQuery代码依赖外部库，要确保外部JS的引入顺序正确（比如先引入jQuery核心库，再引入依赖它的自定义JS）。

内容的提问来源于stack exchange，提问作者Vinod