在首次亮相的主题 shopify 的购物车页面中添加为数量下拉菜单

Question

嗨，我正在研究 Shopify Debut 主题。 我想在购物车页面中添加数量选择器作为下拉菜单。

但我不能这样做。 我在此代码的帮助下在我的产品页面上添加了下拉菜单

 <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

这应该适用于 Debut 主题，您需要做的是将<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>