javascript - 如何根据 Prestige 主题中的剩余库存为数量选择器添加限制

Question

我对功能的期望是，如果产品的可用数量为 2，那么数量选择器将最大为 2，并且不允许客户在单击添加到购物车之前选择 5+ 的数量。请帮助找出我应该在 Sections 中更改哪些文件以及我应该添加哪些附加代码。我是 3 天前被录用的，先生，我的工作岌岌可危，你能帮我找到解决这个问题的方法吗提前谢谢！

这是我的数量选择器的液体代码

 <div class="no-js ProductForm__Option">
        <div class="Select Select--primary">
          {%- render 'icon' with 'select-arrow' -%}

          <select id="product-select-{{ product.id }}" name="id" title="Variant">
            {%- for variant in product.variants -%}
              <option {% if variant == selected_variant %}selected="selected"{% endif %} {% unless variant.available %}disabled="disabled"{% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
            {%- endfor -%}
          </select>
        </div>
      </div>
    {%- else -%}
      <input type="hidden" name="id" data-sku="{{ selected_variant.sku }}" value="{{ selected_variant.id }}">
    {%- endunless -%}

    {%- if section.settings.show_quantity_selector -%}
      {%- if show_option_label -%}
        <span class="ProductForm__Label">{{ 'product.form.quantity' | t }}:</span>
      {%- endif -%}

      <div class="ProductForm__QuantitySelector">
        <div class="QuantitySelector QuantitySelector--large">
          {%- assign quantity_minus_one = line_item.quantity | minus: 1 -%}
          
          
          <span class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity">{% render 'icon' with 'minus' %}</span>
          <input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1" aria-label="{{ 'product.form.quantity' | t }}">
          <span class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity">{% render 'icon' with 'plus' %}</span>
        </div>
      </div>
    {%- else -%}
      <input type="hidden" name="quantity" value="1">
    {%- endif -%}

    {%- if section.settings.show_inventory_quantity -%}
      {%- assign hide_inventory_quantity_by_default = false -%}
      
      {%- if selected_variant.inventory_management == blank or selected_variant.inventory_quantity <= 0 -%}
        {%- assign hide_inventory_quantity_by_default = true -%}
      {%- endif -%}

      {%- if section.settings.inventory_quantity_threshold != 0 and selected_variant.inventory_quantity > section.settings.inventory_quantity_threshold -%}
        {%- assign hide_inventory_quantity_by_default = true -%}
      {%- endif -%}

      <p class="ProductForm__Inventory Text--subdued" {% if hide_inventory_quantity_by_default %}style="display: none"{% endif %}>
        {%- if section.settings.inventory_quantity_threshold == 0 -%}
          {{- 'product.form.inventory_quantity_count' | t: count: selected_variant.inventory_quantity -}}
        {%- else -%}
          {{- 'product.form.low_inventory_quantity_count' | t: count: selected_variant.inventory_quantity -}}
        {%- endif -%}
      </p>
    {%- endif -%}
  </div>

这是我用于数量块的 Javascript 代码

 /**
       * When using the quantity selector, this can be used to decrease the quantity (be ensuring it won't be lower than 1)
       */

    }, {
      key: '_decreaseQuantity',
      value: function _decreaseQuantity(event, target) {
        target.nextElementSibling.value = Math.max(parseInt(target.nextElementSibling.value) - 1, 1);
      }

      /**
       * When using the quantity selector, this can be used to increase the quantity
       */

    }, {
      key: '_increaseQuantity',
      value: function _increaseQuantity(event, target) {
        target.previousElementSibling.value = parseInt(target.previousElementSibling.value) + 1;
      }

      /**
       * Make sure the quantity does not go below when manually changed
       */

    }, {
      key: '_validateQuantity',
      value: function _validateQuantity(event, target) {
        target.value = Math.max(parseInt(target.value) || 1, 1);
      }
    }]);

    return ProductVariants;
  }();

标签： javascripthtmlcssshopifyliquid