Как реализовать изменение количества товаров в корзине?

Question

[Руслан Тиляев]

Делаю корзину пользователя, с возможностью изменения количества товара:

Как показана на картинке у каждого товара есть своё определенное количество. По идеи когда покупатель изменяет количество товара он нажимает на кнопку желтую кнопку в соответствующей строке с товаром для сохранения (это все происходит без обновления страницы). Проблема в том что мне приходят данные только первого товара (т.е. ID приходит правильно, но QTY приходит первого товара). Соответственно количество сохраняется не верно. Как я понял у все желтые кнопки отправляют данные 1 товара. Думаю что нужно как то привязать каждую кнопку к соответствующему товару, наверно...

вид:

<td class="cart-table__column cart-table__column--quantity" data-title="Quantity">
      <div class="input-number">
                 <input class="form-control input-number__input qty" type="number" min="1" value="<?=$item['qty']?>">
                 <div class="input-number__add"></div>
                <div class="input-number__sub"></div>
        </div>
</td>

Ajax

//update cart
    $('.update-cart').on('click', function (e) {
        e.preventDefault();
        var id = $(this).data('id'),
            qty = $('.qty').val();
        console.log(id, qty);
        $.ajax({
            url: '/cart/update.html',
            data: {id: id, qty: qty},
            type: 'GET',
            success: function(res){
                if(!res) alert('Ошибка!');
                showCart(res);
            },
            error: function(){
                alert('Error!');
            }
        });
    });

Контроллер:

public function actionUpdate($id){

        $qty = (int)Yii::$app->request->get('qty');
        debug($id);
        debug($qty);


//        return $this->render('cart-delete');
    }

debug():

Comments

[Алексей]

Вы ID берете с того элемента по которому произошёл клик, но количество пытаетесь в зять из селектора .qty которых у вас ровно столько сколько строк товара в корзине.
qty = $('.qty').val();

Следовательно Jquery находит первое вхождения селектора и отдает его Вам.
Вам нужно организовать поиск по строке на которой произошел клик или использовать data атрибут.

[Руслан Тиляев]

Алексей, Добавлял атрибут data-qty:

<div class="input-number">
                            <input class="form-control input-number__input qty" data-qty="<?= $item['qty']?>" type="number" min="1" value="<?=$item['qty']?>">
                            <div class="input-number__add"></div>
                            <div class="input-number__sub"></div>
                        </div>
<button data-id="<?= $item['product_id']?>" class="btn btn-primary update-cart">
                            ‎✔
                        </button>

//update cart
    $('.update-cart').on('click', function (e) {
        e.preventDefault();
        var id = $(this).data('id'),
            qty = $(this).data('qty');
        console.log(id, qty);
        $.ajax({
            url: '/cart/update.html',
            data: {id: id, qty: qty},
            type: 'GET',
            success: function(res){
                if(!res) alert('Ошибка!');
                showCart(res);
            },
            error: function(){
                alert('Error!');
            }
        });
    });

В таком случае qty не приходит

[Алексей]

Руслан Тиляев, Так и должно быть! Вы жмете на кнопку в которой есть data-id но нет data-qty при этом вы пытаетесь получить данные которых нет. Вставьте data-qty в свою кнопку по которой делаете клик и тогда все получиться.

[Руслан Тиляев]

Алексей, Количество не изменяется, приходит то же коли-во что и было в корзине.

Answer 1

[Антон]

Дайте каждому товару data-id, при событии смены кол-ва, берите данный ID товара и отправляйте в обработчик, в обработчике меняйте кол-во у товара с данным ID (в сессии), потом возвращайте ID измененного элемента и его измененное кол-во json_encode'ом, и в теле функции success аякса принимайте ID и кол-во и обращайтесь к блоку с этим ID товара, который вернулся из обработчика, дабы вставить новое кол-во и сумму

Answer 2

[Groshik_BY]

var id = $(this).data('id'),
qty = $('.qty').val();

Если я правильно понял, то элементы qty находятся в элементах update-cart и это значит, что нужно указать элемент qty более конкретно (не очень разбираюсь в jQuery, но наверное так)
qty =$(this).find( $(".qty") ).val();