Shopify Dawn主题纯Liquid代码实现商品自动捆绑技术求助

一、实现包包加购时自动添加外套 #

纯Liquid可通过修改产品页面的加购表单，添加隐藏字段实现批量加购，无需JS：

1. 定位产品页面的加购表单
   打开Dawn主题的sections/main-product.liquid文件，找到包含action="/cart/add"的<form>标签（通常在product-form组件范围内）。

2. 添加捆绑逻辑
   在表单内部插入以下Liquid代码，替换对应产品的handle或ID：

{% comment %} 判断当前产品是否为目标包包 {% endcomment %}
{% if product.handle == "your-bag-handle" %}
  {% comment %} 获取外套产品的目标变体ID {% endcomment %}
  {% assign bundled_product = all_products["your-coat-handle"] %}
  {% if bundled_product %}
    <input type="hidden" name="id[]" value="{{ bundled_product.variants.first.id }}">
    <input type="hidden" name="quantity[]" value="1">
  {% endif %}
{% endif %}

• 把your-bag-handle替换为包包产品的handle（在Shopify后台产品URL末尾可见）
• 把your-coat-handle替换为外套产品的handle
• 若需指定外套特定变体，将variants.first.id改为目标变体ID（如bundled_product.variants[1].id）

3. 测试效果
   保存主题后，进入包包产品页面点击“加入购物车”，检查购物车是否同时包含包包和外套。

二、解决产品ID获取问题 #

在产品页面的Liquid模板中，直接通过以下变量获取ID：

• 当前产品ID：{{ product.id }}
• 当前选中的变体ID：{{ product.selected_or_first_available_variant.id }}
• 遍历所有变体ID：{% for variant in product.variants %}{{ variant.id }}{% endfor %}

三、查看ATC按钮后的流程 #

1. 浏览器开发者工具调试
   按F12打开开发者工具，切换到Network标签：

• 点击ATC按钮后，会触发POST请求到/cart/add
• 查看请求的Form Data，可看到提交的商品ID、数量等参数
• 查看响应内容，确认Shopify返回的加购结果

2. 查看主题内的Cart逻辑

• 打开sections/cart-template.liquid：查看购物车页面的渲染逻辑
• 打开snippets/cart-item.liquid：查看单个购物车商品的渲染逻辑
• 在购物车页面临时添加{{ cart | json }}，可输出完整购物车数据用于调试

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