Shopify：收藏页面上的添加到购物车按钮仅添加页面上的最后一个产品

Question

我希望在我的收藏页面（例如 - example.com/collections/collection-name）上的每个产品旁边都有“添加到购物车”按钮。因此，如果我在页面上有 20 种产品，我希望在它们各自的产品旁边有 20 个添加到购物车按钮。

我用以下内容编辑了 product-card.liquid：

      <select name="product-form-{{ product.variants.first.id }}" id="product-form-{{ product.variants.first.id }}" class="product-form__variants">
        {% for variant in product.variants %}
          <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
            {% if variant.available %}
              {{ variant.title }} - {{ variant.price | money_with_currency }}
            {% else %}
              {{ variant.title }} - {{ 'products.product.sold_out' | t }}
            {% endif %}
          </option>
        {% endfor %}
      </select>
      <div class="product-form__item product-form__item--quantity">
        <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
        <input type="number" id="Quantity-{{ product.variants.first.id }}" name="quantity" value="1" min="1" class="product-form__input">
      </div>
      <div class="product-form__item product-form__item--submit">
        <button name="add" class="btn btn--full product-form__cart-submit">
          <span id="AddToCartText-{{ product.variants.first.id }}">{{ 'products.product.add_to_cart' | t }}</span>
        </button>
      </div>
    </form>

问题是当我在页面上的第一个产品上单击添加到购物车时，页面上的最后一个产品被添加到购物车中。

是否存在用于“添加到购物车”的现有 onclick 事件，该事件会在页面上找到最后一个产品 ID 并将其添加到购物车？我正在使用 Venture 主题。

我错过了什么？

Answer 1

表单在哪里打开？ 它应该在第一次选择之前出现。