Добавление нескольких продуктов в корзину на карточке продукта BigCommerce Трафарет

Question

Я пытаюсь воссоздать функциональность здесь - 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" /> 

Любая помощь будет высоко ценится, благодаря

Answer 1

Вы можете использовать трафарет, 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