如何在Liquid应用代理页面中发起数据库请求？

• 首先，{% javascript %}标签仅支持Online Store 2.0及以上版本的主题，你的目标主题不支持主题扩展（无app blocks），说明是老版本主题，自然无法识别该标签，这是核心问题。放弃使用该标签，改用原生<script>标签实现数据请求即可。
• 具体实现步骤：
  1. 在应用代理返回的Liquid文件中，先确保能正确继承主题的页眉页脚：

     {% section 'header' %}
     <div class="custom-collection-container">
       <!-- 预留位置，后续用JS填充数据 -->
     </div>
     {% section 'footer' %}
     

     注：部分老主题可能用{% include %}替代{% section %}，需根据主题实际的snippet名称调整。
  2. 添加原生<script>标签发起AJAX请求，从自建数据库拉取数据并渲染：

     <script>
       // 从Liquid上下文获取店铺标识，用于接口鉴权或业务逻辑
       const shopDomain = '{{ shop.domain }}';
       
       // 发起请求到自建数据库接口
       fetch('https://your-api-domain.com/collections', {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
           // 添加自定义头验证请求合法性，比如基于Shopify的HMAC校验
           'X-Shop-Domain': shopDomain
         }
       })
       .then(response => response.json())
       .then(data => {
         const container = document.querySelector('.custom-collection-container');
         // 动态生成分类列表DOM
         const list = document.createElement('ul');
         data.forEach(item => {
           const listItem = document.createElement('li');
           listItem.innerHTML = `<a href="${item.url}">${item.name}</a>`;
           list.appendChild(listItem);
         });
         container.appendChild(list);
       })
       .catch(error => console.error('加载分类数据失败:', error));
     </script>
     

• 关键注意事项：
  • 跨域处理：如果自建数据库接口域名与Shopify店铺域名不同，需在接口服务器配置CORS规则，允许Shopify店铺域名的请求。
  • 请求鉴权：通过应用代理请求中的hmac参数验证请求合法性，避免恶意第三方调用你的接口。
  • 样式适配：若渲染的分类列表与主题样式冲突，可添加自定义CSS类，继承主题现有样式规则。

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