使用Javascript/jquery输出更新Shopify数量选择器

Question

我目前正在创建一个地板网站，需要在产品页面上的计算器。这样做的想法是允许用户输入房间的长度和宽度，一旦他们完成了这些，计算器就会告诉用户他们将需要多少包选定的地板。

我现在需要这个输出的包数量来自动填充Shopify数量选择器。例如，如果用户输入房间的长度和宽度，计算器说他们需要18包选择地板，我需要数量选择器通过AJAX更新到18 ?

我当前的输入代码如下:

<div class="quantity-selector quantity-selector--product">
<button type="button" class="quantity-selector__button" data-action="decrease-picker-quantity" aria-label="{{ 'cart.items.decrease_quantity' | t }}" title="{{ 'cart.items.decrease_quantity' | t }}">{% render 'icon', icon: 'minus' %}</button>
<input id="updatingqty" name="quantity" aria-label="{{ 'product.form.quantity' | t }}" class="quantity-selector__value" inputmode="numeric" value="1" size="3">
<button type="button" class="quantity-selector__button" data-action="increase-picker-quantity" aria-label="{{ 'cart.items.increase_quantity' | t }}" title="{{ 'cart.items.increase_quantity' | t }}">{% render 'icon', icon: 'plus' %}</button>
</div>

谢谢大家，任何帮助都是非常感激的。

Answer 1

您需要使用Cart API更新行项数量

来源:Cart API参考

使用POST/{locale}/cart/update.js端点更新购物车的行项数量、备注或属性。您可以提交序列化的购物车表单，也可以提交对购物车的行项、注释或属性的单独更新。

更新行项数量

要更新行项数量，可以使用updates对象发出POST请求。更新对象必须包含键值对，其中值是所需的数量，键是以下其中之一:

行项的variant_id

行项的键

jQuery.post(window.Shopify.routes.root + 'cart/update.js', {
updates: {
794864053: 2,
794864233: 3
}
});

购物车可以有多个行项共享相同的variant_id。例如，当变体具有不同的行项属性时，或者自动折扣以不同的价格创建变体时。因此，建议使用行项键来确保您只更改预期的行项。

下面的POST请求产生相同的结果:

jQuery.post(window.Shopify.routes.root + 'cart/update.js',
"updates[794864053]=2&updates[794864233]=3"
);