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

时间:2017-01-31 10:19:59

标签: javascript bigcommerce product-quantity

我尝试在此处重新创建功能 - 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" />

非常感谢任何帮助,谢谢

1 个答案:

答案 0 :(得分:0)

您可以使用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