在产品卡 Bigcommerce Stencil 上将多个产品添加到购物车答案

【问题标题】：Adding multiple products to cart on product card Bigcommerce Stencil在产品卡 Bigcommerce Stencil 上将多个产品添加到购物车
【发布时间】：2017-01-31 10:19:58
【问题描述】：

我正在尝试在这里重新创建功能 - http://www.babycelebrations.co.uk/

客户可以在到达产品/购物车页面之前选择产品数量并添加到购物车。

这在蓝图中是可能的，但在模具中，显然变量的工作方式不同，谁能指出我如何编辑此代码以适应模具的正确方向？

<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>

我相信它是由那个代码和这个 html 控制的 -

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

任何帮助将不胜感激，谢谢

【问题讨论】：

标签： javascript bigcommerce product-quantity

【解决方案1】：

您可以使用 Stencil utils api 来实现这一点，您可以在其中将商品添加到购物车或更新购物车中商品的数量。

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

上面将允许下面的代码监听触发的事件：

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

https://stencil.bigcommerce.com/docs/stencil-utils-api-reference#Cart-API

【讨论】：

您好，非常感谢您的回复，我是 stencil 的新手，尤其是用这种方式编辑它，我已将此代码添加到我的 card.html 中它不起作用我确定它是我是如何使用它的，你能给我指出正确的方向吗？ <script> import utils from '@bigcommerce/stencil-utils'; addProductToCart() { utils.hooks.on('cart-item-add', (event) => { }); }</script> <form class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data" data-cart-item-add> <input type="text" name="qty" value="1" class="qty" />
@Alyss 你能解释一下在哪里添加模板工具 js 代码吗？我创建了一个 .js 文件并将该代码放入其中，然后使用脚本管理器添加了该 js，但它不起作用。你能指导我吗？