如何用Ajax渲染Liquid代码并输出为HTML？Shopify购物车开发问题

可以通过Ajax获取Shopify渲染后的Liquid HTML内容，你当前的问题是没正确处理section渲染接口的返回格式。

问题原因 #

当你调用/?sections=line-item-list接口时，Shopify返回的是JSON对象，而非直接的HTML字符串。结构大致如下：

{
  "sections": {
    "line-item-list": "<div>渲染后的订单项HTML</div>"
  }
}

你之前设置dataType: 'html'会导致jQuery尝试把JSON当成HTML解析，自然得不到正确结果。

修正代码 #

把Ajax请求的dataType改为json，并从返回的JSON中提取对应section的HTML内容：

<div class="add-line-item">Add Line Item</div>
<div class="line-items"></div>

<script>
  $(document).ready(function() {
    $('.add-line-item').on('click', function() {
      $.ajax({
        url: '/?sections=line-item-list',
        type: 'GET',
        dataType: 'json', // 改为json类型
        success: function(data) {
          // 提取line-item-list对应的HTML并插入
          if (data.sections && data.sections['line-item-list']) {
            $('.line-items').html(data.sections['line-item-list']);
          }
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.error("Error fetching line-item-list content:", errorThrown);
        }
      });
    });
  });
</script>

额外注意事项 #

• 确保line-item-list.liquid中metafield的访问路径正确：item.product.metafields.custom.some-metafield里的custom是命名空间，some-metafield是键名，必须和你在Shopify后台设置的metafield完全匹配（包括大小写和连字符）。
• 如果需要在添加商品到购物车后同步更新迷你购物车，建议在商品添加成功的回调里再触发这个section请求，这样能拿到最新的购物车订单项数据。

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