Корзина товаров кнопки + и - а также обновление цены

[munhgauzen]

Всем привет.

Вообщем натягиваю html шаблон на opencart и столкнулся с необходимостью во всплывающей корзине добавить + - а и обновить стоимость.

Решил взять решение из common,js (ajax обновление корзины) но оно почему то не работает.

В js я новичок потому и не знаю как на чистом js  это выполнить попроще.

Буду благодалрен подсказкам.

 

 

<div class="shop-counter">
<div class="custom-input-number">
<button type="button" class="cin-btn cin-decrement">
<img src="img/left_arr.png" alt=""></button>

<input type="number"  name="quantity[<?php echo $product['cart_id']; ?>]" class="cin-input input-field quant" value="<?php echo $product['quantity']; ?>" >

<button type="button" class="cin-btn cin-increment"><img src="img/right_arr.png" alt=""></button>
</div>
</div>

 

 

 

 

 

 

<script type="text/javascript" >
$(document).ready(function() {
$('.cin-decrement').click(function () {
var $input = $(this).parent().find('.quant');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change().edit();
    $.ajax({
            url: 'index.php?route=checkout/cart/edit',
            type: 'post',
            data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            complete: function() {
                $('#cart > button').button('reset');
            },
            success: function(json) {
                // Need to set timeout otherwise it wont update the total
                setTimeout(function () {
                    $('#cart > .shop-card-item > button').html('<div class="shop-icon"> <img src="/image/catalog/cart.svg"><div class="shop-number">' + json['total'] + '</div></div>');
                }, 100);

                if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                    location = 'index.php?route=checkout/cart';
                } else {
                    $('#cart .shop-card-list').load('index.php?route=common/cart/info ul li');
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
return false;
});

 

$('.cin-increment').click(function () {
var $input = $(this).parent().find('.quant');
$input.val(parseInt($input.val()) + 1);
$input.change().edit();

    $.ajax({
            url: 'index.php?route=checkout/cart/edit',
            type: 'post',
            data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            complete: function() {
                $('#cart > button').button('reset');
            },
            success: function(json) {
                // Need to set timeout otherwise it wont update the total
                setTimeout(function () {
                    $('#cart > .shop-card-item > button').html('<div class="shop-icon"> <img src="/image/catalog/cart.svg"><div class="shop-number">' + json['total'] + '</div></div>');
                }, 100);

                if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                    location = 'index.php?route=checkout/cart';
                } else {
                    $('#cart .shop-card-list').load('index.php?route=common/cart/info ul li');
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
return false;
});

 

});

Змінено 30 жовтня 2019 користувачем munhgauzen

[Gmp]

Если еще не решил, скинь ссылку на "я сделал, но оно не работает". Так будет проще.