Shopify Dawn主题商品推荐区添加加入购物车按钮及异常修复

问题根源 #

你的代码存在变量混用错误：
商品卡片模板中，推荐商品的循环对象是product_card_product（你代码里的图片、跳转链接都正确使用了该变量），但加购表单中你调用的是全局product变量。在商品详情页场景下，全局product固定指向当前正在浏览的详情页商品，因此所有推荐卡片的加购ID都会和详情页商品ID一致，导致加购错误。

修复方案 #

将加购表单中所有的product变量替换为当前卡片对应的商品对象product_card_product即可，修正后的完整代码如下：

{% for image in product_card_product.images limit:1 %}
   <a href="{{ product_card_product.url | default: '#' }}">
     <img src="{{ product_card_product.featured_media | img_url: '533x' }}" />
   </a>
{% endfor %}    
<form method="post" action="/cart/add" style="text-align: center">
     <input type="hidden" name="id" value="{{ product_card_product.variants.first.id }}" />
       <button type="submit" class="addCart" {% unless product_card_product.available %} disabled="disabled" {% endunless %}>
       {% unless product_card_product.available %}
           {{ "products.product.sold_out" | t }}
       {% else %}
           {{ "products.product.add_to_cart" | t }}
       {% endunless %}
       </button>
    </form>

额外注意事项 #

• 如果你外层推荐商品循环定义的变量名不是product_card_product，请对应替换为你实际使用的变量名（部分模板可能命名为recommended_product、card_product等，以你外层循环的for xxx in 推荐商品集合定义的变量为准）
• 当前代码默认加购商品的第一个规格，如果你的站点商品存在多个规格，建议在卡片内增加规格选择器，或调整按钮逻辑先跳转至商品详情页让用户选择规格后再加购，避免加购的规格不符合用户预期
• 修复完成后可以在按钮旁临时输出{{ product_card_product.variants.first.id }}验证，不同推荐卡片的ID应当互不相同，且和当前详情页商品ID不同

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