Добавление нескольких товаров в корзину на карточке товара Bigcommerce Stencil

Я пытаюсь воссоздать функциональность здесь - 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
person Lucy Brown    schedule 31.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать API-интерфейс Stencil utils, чтобы упростить это, где вы можете добавлять товары в корзину или обновлять количество товаров в корзине.

<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

person Alyss    schedule 31.01.2017
comment
Привет, большое спасибо за ответ, я новичок в трафарете, особенно в его редактировании таким образом, я добавил этот код в свой 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" /> - person Lucy Brown; 01.02.2017
comment
@Alyss, не могли бы вы объяснить, куда добавить этот код трафарета с использованием js? Я создал файл .js и поместил в него этот код, а затем добавил этот js с помощью Script Manager, он не работает. Не могли бы вы направить меня? - person Tahir Yasin; 07.05.2018