将多个产品添加到产品卡Bigcommerce模具上的购物车

Question

I'm trying to recreate the functionality here - http://www.babycelebrations.co.uk/

Where customers can choose the quantity of the product and add to cart before they get to the product/cart page.

This was possible in blueprint, but in stencil, obivously the variables work differently, would anyone be able to point me in the right direction of how to edit this code to suit 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>

I believe it is controlled by that code and this html -

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

Any help would be much appreciated, thanks

Answer 1

You can use Stencil utils api to facilitate this where you can add items to the cart or update the quantity of an item in the cart.

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

The above will allow the code below to listen for a triggered event:

[...]
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