Shopify 购物车页面 - 使用 jQuery 更改数量输入值

Question

我在购物车布局中有 + 和 - 按钮，它们使用 jQuery 更改数量输入的值。

它在页面和源代码中运行良好（数量值发生变化），但在页面刷新后它不起作用并且不会反映在结帐页面上。

手动更改数量（使用内置输入箭头或通过在字段中键入新数量）正常工作。

    $(".qty-button").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    var newVal;

    if ($button.text() === "+") {
        newVal = parseFloat(oldValue) + 1;
    } else {
        if (oldValue > 0) {
            newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }

    $button.parent().find("input").attr('value', newVal).trigger('change');

});

它更改了页面源中的值并反映在购物车页面上，但在功能方面没有任何作用，因为它在页面刷新或结帐时返回到原始值。

有什么想法吗？

Answer 1

不知道我需要启动 Shopify 购物车 API。

以防将来有人需要它，修复：

  <div class="cart-item-block qty-selector">
      <div class="qty-button increase" onclick="Shopify.addItem({{ item.variant.id }}, this.parentNode.querySelector('input[type=number]').value)">+</div>
      <input id="updates_{{ item.key }}" class="cart-qty-input" type="number"
             name="updates[]" value="{{ item.quantity }}" min="1" pattern="[0-9]*"
             >
      <div class="qty-button decrease" onclick="Shopify.removeItem({{ item.variant.id }}, this.parentNode.querySelector('input[type=number]').value)">-</div>
  </div>

<script>
    Shopify.addItem = async function(id,quantity){
        await $.ajax({
            method:'POST',
            url:'/cart/change.js',
            data:{ id:id, quantity:(++quantity) },
            dataType: 'json'
        })
    };
    
    Shopify.removeItem = async function(id,quantity){
        await $.ajax({
            method:'POST',
            url:'/cart/change.js',
            data:{ id:id, quantity:(--quantity) },
            dataType: 'json'
        })
    };
</script>

Shopify 购物车页面 - 使用 jQuery 更改数量输入值

Shopify cart page - Changing quantity input value with jQuery

liquid

shopify