html - 如何为添加到购物车按钮添加输入字段？

Question

我正在尝试在 bigcartel 上建立一个电子商务网站。产品页面没有数量字段，我想添加一个。后端访问有限，但我可以修改 html 并添加 javascript。

没有太多麻烦，有没有办法添加链接到购物车按钮的数量字段？

以下是购物车按钮区域的代码：

 <div id="variations">
  {% if product.available? %}
    <p>
      <select id="cart_variation_id">
        <option>Select Option...</option>
        {% for variation in product.variations %}
          {% if variation.available? %}
            <option value="{{ variation.id }}">{{ variation.name }} - {{ variation.price | money }}</option>
          {% else %}
            <option disabled="disabled">{{ variation.name }} - {{ variation.price | money }} (Out of Stock)</option>
          {% endif %}
        {% endfor %}
      </select>

      <button class="btn" onclick="javascript:Store.cart.add(document.getElementById('cart_variation_id').options[document.getElementById('cart_variation_id').selectedIndex].value);return false;">Add to Cart</button>

Answer 1

您可以添加自己的按钮，该按钮链接到<input>名为数量的 html 字段，并使用 javascript 调用Store.cart.add...数量次数。您将不得不添加额外的 JS 以仅允许输入数字。

看起来目前它添加到购物车onclick="javascript:Store.cart.add(document.getElementById('cart_variation_id').options[document.getElementById('cart_variation_id').selectedIndex].value)

因此，如果您想添加数量功能，则“贫民窟”修复将是让 for 循环调用此方法数量多次，假设它会更新您的购物车数量。