Javascript 在产品卡Bigcommerce模具上向购物车添加多个产品

我正在尝试在这里重新创建功能-

在这里，客户可以选择产品的数量并在进入产品/购物车页面之前添加到购物车

这在blueprint中是可能的，但在stencil中，显然变量的工作方式不同，有人能告诉我如何编辑代码以适应stencil吗

<script type="text/javascript">
        $(document).ready(function() {

        $('form.addToCart').submit(function(event) {

        var pid = $('input[name=product_id]', this).val();
        var q = $('input[name=qty]', this).val();

        fastCartAction('/cart.php?action=add&product_id='+ pid +'&qty='+ q);
        event.preventDefault();

        });

        if($('.side-menu').length == 0) {
            var bcURL = $(".Breadcrumb li:last").prev("li").find('a').attr("href");
            $(".Left").load(bcURL + ' #smp');
        }
        });
    </script>

$（文档）.ready（函数（）{
$（'form.addToCart'）。提交（函数（事件）{
var pid=$（'input[name=product_id]'，this.val（）；
var q=$（'input[name=qty]'，this.val（）；
fastCartAction（'/cart.php？action=add&product_id='+pid+'&qty='+q）；
event.preventDefault（）；
});
如果（$（'.side menu'）。长度==0）{
var bcURL=$（“.Breadcrumb li:last”）.prev（“li”）.find（'a'）.attr（“href”）；
$（“.Left”）.load（bcURL+'#smp'）；
}
});

我相信它是由代码和html控制的

<input type="text" name="qty" value="1" class="qty" />

---

非常感谢您的帮助。您可以使用Stencil utils api来实现这一点，您可以向购物车添加物品或更新购物车中物品的数量

<form class="form" method="post" action="{{product.cart_url}}"
enctype="multipart/form-data" data-cart-item-add>

---

您好，非常感谢您的回复，我对stencil是新手，尤其是用这种方式编辑它，我已将此代码添加到我的card.html中。它不起作用。我确定这是我使用它的方式，您能告诉我正确的方向吗<代码>从“@bigcommerce/stencil utils”导入utils；addProductToCart（）{utils.hooks.on（'cart-item-add'，（event）=>{}；}@Alyss您能解释一下在哪里添加模具utils js代码吗？我创建了一个.js文件并将代码放入其中，然后使用脚本管理器添加了js，但它不起作用。你能告诉我怎么走吗？

[...]
import utils from '@bigcommerce/stencil-utils';
[...]
addProductToCart() {
  utils.hooks.on('cart-item-add', (event) => {
    // insert code for adding or updating quantity
  });
}