如何在 shopify 产品推荐部分显示的产品上添加添加到购物车按钮？答案

【问题标题】：How to add an add to cart button on products displayed on product recommendation section in shopify?如何在 shopify 产品推荐部分显示的产品上添加添加到购物车按钮？
【发布时间】：2021-11-25 07:30:39
【问题描述】：

我正在使用黎明主题，我尝试在 product-card.liquid 文件中添加按钮，这里是代码..

{% for image in 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.variants.first.id }}" />
       <button type="submit" class="addCart" {% unless product.available %} disabled="disabled" {% endunless %}>
       {% unless product.available %}
           {{ "products.product.sold_out" | t }}
       {% else %}
           {{ "products.product.add_to_cart" | t }}
       {% endunless %}
       </button>
    </form>

所以发生的情况是，这个特定部分在产品页面中，通过单击添加到购物车按钮，这会添加该特定产品页面的产品，该产品已经有一个专用按钮并且不添加推荐的产品.. 我尝试在添加到购物车旁边打印 product.variants.first.id 对象，并且此 id 对于所有推荐的产品都是相同的.. 我已经检查了所有的 for 循环，并且一切都已关闭且正确..

【问题讨论】：

标签： shopify product liquid shopify-template

【解决方案1】：

使用 product_card_product 作为对象而不是 product

  <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>

【讨论】：