Question

您好，我正在研究Shopify首次亮相的主题。我想在购物车页面的下拉菜单中添加数量选择器。

但是我无法这样做。借助此代码，我已在我的产品页面上添加了下拉菜单

          <input id="quantity" type="number" name="quantity" value="1" class="tc item-quantity" />
<select name="quantity" id="quantity">
         {% for i in (1..4) %}
                  <option value="{{ i }}">{{ i }}</option>
          {% endfor %}         
</select>

这工作正常，但是我无法在购物车模板上这样做。这也是我的购物车模板的代码

<div class="cart__qty">
                  <label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
                  <input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number"
                    name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*"
                    data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop>

                </div>

请指导我如何也可以在购物车页面上使用此功能

Answer 1

这应该适用于首次亮相主题，您需要做的是将<input>更改为<select>。

<div class="cart__qty">
    <label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
    <select id="updates_{{ item.key }}" class="cart__qty-input" value="{{ item.quantity }}" data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop>
      {% for i in (1..4) %}
        <option value="{{ i }}" {% if forloop.index==item.quantity %}selected{% endif %}>{{ i }}</option>
      {% endfor %}
    </select>
</div>

编辑：还要记住，在cart-template.liquid内的Debut主题中，有两个地方需要更新代码。一种是移动版本，一种是台式机。

以下是移动设备的代码：

            <div class="cart__qty medium-up--hide">
              <label for="updates_{{ item.key }}" class="cart__qty-label" aria-label="{{ 'cart.label.quantity' | t }}" data-quantity-label-mobile>
                {{ 'cart.label.qty' | t }}
              </label>
              <select id="updates_{{ item.key }}" class="cart__qty-input" data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-mobile>
                {% for i in (1..4) %}
                    <option value="{{ i }}" {% if forloop.index==item.quantity %}selected{% endif %}>{{ i }}</option>
                {% endfor %}   
              </select>
            </div>

作为数量下降添加到首次亮相的主题shopify的购物车页面中

1 个答案: