移除Shopify数量选择器中的前导零问题求助

问题描述 #

我的Shopify产品页数量选择器，输入小于10的数字时会显示前导零（比如输入5显示成05），想去掉这个前导零。自己写了一段JavaScript脚本，控制台输出的过滤结果是对的，但就是没法更新输入框里的内容。之前的代码如下：

<div {% if block != blank %}{{ block.shopify_attributes }}{% endif %} class="product-form__controls-group{% unless show_quantity_input %} hidden{% endunless %}">
  <div class="product-form__controls-label-wraper type-heading-3">
    <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
  </div>
  <div class="product-form__item product-form__quantity">
    <script type="text/javascript">
      function leading0(x, id){
          console.log(x, x.replace(/^0+/, ''), id);
          x = x.replace(/^0+/, '')
          document.getElementById(id).innerHTML = '{{ x }}';
      }
    </script>
    <button
      type="button"
      class="product-form__quantity-button product-form__quantity-add-item "
      aria-label="{{ 'general.accessibility.quantity_subtract' | t }}"
      
    >
      {% render 'icon-plus', non_focusable: true %}
    </button>
    <input
      type="number" id="Quantity-{{ section.id }}"
      {% if form_id != blank %}form="{{ form_id }}"{% endif %}
      name="quantity" value="1" min="1" pattern="[0-9]"
      class="product-form__input product-form__input--quantity" data-quantity-input
      aria-label="{{ 'general.accessibility.quantity' | t }}"
      onchange="leading0(this.value, this.id);"
    >
    <button
      type="button"
      class="product-form__quantity-button product-form__quantity-subtract-item"
      aria-label="{{ 'general.accessibility.quantity_add' | t }}"
    >
      {% render 'icon-minus', non_focusable: true %}
    </button>
  </div>
</div>

问题原因 #

1. Liquid语法混淆JS变量：代码里document.getElementById(id).innerHTML = '{{ x }}';用了Liquid的{{ x }}，这会在Shopify渲染页面时被解析，而不是运行时使用JavaScript的x变量，导致赋值无效。
2. 错误操作输入框属性：number类型的输入框，内容存在value属性里，不是innerHTML，所以修改innerHTML不会改变输入框显示的内容。

修复方案 #

修改JavaScript函数，直接操作输入框的value属性，同时处理全零的情况（确保输入值不小于1，符合输入框的min="1"设置），并且把事件改成input，这样用户输入时实时生效，而不是只有失去焦点时触发。

修改后的完整代码：

<div {% if block != blank %}{{ block.shopify_attributes }}{% endif %} class="product-form__controls-group{% unless show_quantity_input %} hidden{% endunless %}">
  <div class="product-form__controls-label-wraper type-heading-3">
    <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
  </div>
  <div class="product-form__item product-form__quantity">
    <script type="text/javascript">
      function removeLeadingZero(inputElement) {
          let value = inputElement.value.replace(/^0+/, '');
          // 如果过滤后为空（比如输入全零），设置为最小值1
          inputElement.value = value || '1';
      }
    </script>
    <button
      type="button"
      class="product-form__quantity-button product-form__quantity-add-item "
      aria-label="{{ 'general.accessibility.quantity_subtract' | t }}"
      
    >
      {% render 'icon-plus', non_focusable: true %}
    </button>
    <input
      type="number" id="Quantity-{{ section.id }}"
      {% if form_id != blank %}form="{{ form_id }}"{% endif %}
      name="quantity" value="1" min="1" pattern="[0-9]*"
      class="product-form__input product-form__input--quantity" data-quantity-input
      aria-label="{{ 'general.accessibility.quantity' | t }}"
      oninput="removeLeadingZero(this);"
      onchange="removeLeadingZero(this);"
    >
    <button
      type="button"
      class="product-form__quantity-button product-form__quantity-subtract-item"
      aria-label="{{ 'general.accessibility.quantity_add' | t }}"
    >
      {% render 'icon-minus', non_focusable: true %}
    </button>
  </div>
</div>

关键修改点 #

• 把函数参数改成直接传入输入框元素，不用再通过ID查找，更高效。
• 替换innerHTML为value属性赋值，直接修改输入框内容。
• 添加oninput事件，用户输入时实时处理前导零。
• 处理过滤后为空的情况，确保输入值不小于1，符合输入框的最小限制。
• 把pattern="[0-9]"改成pattern="[0-9]*"，允许输入多个数字（原来的限制只能输入单个数字，不符合数量选择的需求）。

内容的提问来源于stack exchange，提问作者yuz