Shopify metafield推荐商品加购按钮仅添加主商品问题如何解决

你当前的代码存在两个核心错误：

• 直接调用了全局变量current_variant，该变量默认绑定的是当前详情页的主商品变体，和你要加购的推荐商品没有关联
• 按钮绑定的是主商品的加购表单#add-to-cart-form，提交时只会传递主商品的参数，自然只会加购主商品

步骤1：为每个推荐商品生成独立加购表单 #

在你循环输出推荐商品的代码段中，为每个推荐商品单独拉取变体信息、生成专属加购表单，不要复用主商品的表单结构。假设你存储关联推荐商品的metafield路径为product.metafields.custom.related_products.value，参考代码如下：

{% for recommended_product in product.metafields.custom.related_products.value %}
  <div class="recommended-product-card">
    <!-- 此处保留你原有推荐商品的标题、图片、价格等展示代码 -->
    <div class="groups-btn">
      {% assign rec_variant = recommended_product.selected_or_first_available_variant %}
      {% if rec_variant.available %}
        <form action="/cart/add" method="post" class="recommended-add-to-cart-form">
          <input type="hidden" name="id" value="{{ rec_variant.id }}">
          <input type="hidden" name="quantity" value="1">
          <input type="submit" class="btn" value="加入购物车">
        </form>
      {% endif %}
    </div>
  </div>
{% endfor %}

步骤2：添加异步加购逻辑（可选，实现无刷新加购） #

如果需要用户点击后不跳转页面直接完成加购，将以下JS代码添加到商品模板的底部即可：

document.querySelectorAll('.recommended-add-to-cart-form').forEach(form => {
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    fetch('/cart/add.js', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(data => {
      // 此处可自定义加购成功后的逻辑，比如更新购物车角标、弹出成功提示
      alert('商品已成功加入购物车');
    })
    .catch(err => {
      alert('加购失败，请稍后重试');
    })
  })
})

注意事项 #

• 替换代码示例中的product.metafields.custom.related_products.value为你自己实际的推荐商品metafield路径
• 如果推荐商品需要支持选择变体，额外给每个推荐商品加变体选择器，切换选项时同步更新表单内name="id"的input值为对应变体ID即可
• 保留原有btn类名即可匹配主题现有按钮样式，无需额外调整样式

内容的提问来源于stack exchange，提问作者Davide Di Meo