1

Делаю интернет-магазин на самописном движке, и хотел бы сделать добавление в корзину без перезагрузки страницы, в я javascript еще новичок. Где-то здесь был вопрос похожий, что-то взял оттуда.

Проблема в том, что при клике на кнопку "Добавить в корзину", добавление не отображается (хотя в сессию добавляется), пока не перезагрузить страницу, после перезагрузки страницы и кол-во товара, и цена нормально прибавляется.

Подскажите плиз, как нужно исправить, чтобы добавлялся товар при первом клике.

Вот код из js:

$('.buyitem').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var price = $(this).closest('.product-table').find('span').text();
    price = parseInt(price, 10);
    total_items = parseInt($("#bought").text(), 10) + 1;
    total_price = parseInt($("#sum").text(), 10) + price;
    $.get(url, {total_price: total_price, total_items: total_items}, function() {
        $('#bought').text(total_items); // Запись в нужные места на странице
        $('#sum').text(total_price);
    });
    return false;
});

Код из php:

<div class="product-table">
    <h2><a href="?view=product&amp;goods_id=<?=$product['goods_id']?>"><?=$product['name']?></a></h2>
    <div class="product-table-img-main">
        <div class="product-table-img">
            <a href="?view=product&amp;goods_id=<?=$product['goods_id']?>"><img src="<?=PRODUCT?><?=$product['img']?>" alt="" /></a>
        </div>
    </div>
    <p>Цена : <span id="price"><?=$product['price']?></span></p>
    <a class="buyitem" href="?view=addtocart&amp;goods_id=<?=$product['goods_id']?>"><img class="addtocard-index" src="img/addcard.jpg" alt="Добавить в корзину" /></a>
</div>

Код корзины в сайдбаре:

<div class="basket">
    <h2><span>Корзина</span></h2>
    <div>
        <p>
        <?php if(isset($_SESSION['total_quantity'])): ?>
    Товаров в корзине:<br />
    <span id="bought"><?=$_SESSION['total_quantity']?></span> на сумму <span id="sum"><?=$_SESSION['total_sum']?></span> руб.
    <a href="?view=cart"><img src="img/oformit.jpg" alt="" /></a>
    <?php else: ?>
        Корзина пуста
    <?php endif; ?>
    </p>
    </div>
</div>

Метод добавления в корзину:

public function addtocart($goods_id, $qty = 1) {
    if(isset($_SESSION['cart'][$goods_id])) {
        // Если в массиве cart уже есть добавляемый товар
        $_SESSION['cart'][$goods_id]['qty'] += $qty;
        return $_SESSION['cart'];
    } else {
        // Если товар кладется в корзину впервые
        $_SESSION['cart'][$goods_id]['qty'] = $qty;
        return $_SESSION['cart'];
    }
}

Метод подсчета кол-ва товаров:

public function total_quantity() {
    $_SESSION['total_quantity'] = 0;
    foreach($_SESSION['cart'] as $key => $value) {
        if(isset($value['price'])) {
            // Если получена цена товара из БД - суммируем кол-во
            $_SESSION['total_quantity'] += $value['qty'];
        } else {
            // Удаляем такой id из сессии
            unset($_SESSION['cart'][$key]);
        }
    }
}



Переписал код немного, заработало:

в Javascript файле:

var summ = $("#sum").text();
var col = $("#bought").text();
if(summ < 1 || col < 1) {
    $('.col').fadeOut();
    $('.sum').fadeOut();
    $('.oformit').fadeOut();
}
$(".buyitem").click(function() {
    var url = $(this).attr('href');
    var goods_id = $(this).attr('id');
    var price = $(".product-table .id_" + goods_id).text();
    summ = Number(summ) + Number(price);
    col++;
    $.ajax({
        url: url,
        type: 'POST',
        data: {col: col, summ: summ, goods_id: goods_id},
        success: function(res) {
            if(res){
                // Запись в нужные места на странице
                $('.empty_cart').fadeOut();
                $('.col').fadeIn();
                $('.sum').fadeIn();
                $('#bought').text(col);
                $('#sum').text(summ);
                $('.oformit').fadeIn();
            }
        },
        error: function() {
            alert('Ошибка добавления в корзину!');
        }
    });
    return false;
});

Код в сайдбаре:

<?php if(isset($_SESSION['total_quantity'])): ?>
<p class="col">Товаров: <span id="bought"><?=$_SESSION['total_quantity']?></span></p>
<p class="sum">На сумму: <span id="sum"><?=$_SESSION['total_sum']?></span> руб.</p>
<a href="?view=cart" class="oformit"><img src="<?=TEMPLATE?>img/oformit.jpg" alt="" /></a>
<?php else: ?>
<p class="empty_cart">Корзина пуста</p>
<p class="col">Товаров: <span id="bought"></span></p>
<p class="sum">На сумму: <span id="sum"></span> руб.</p>
<a href="?view=cart" class="oformit"><img src="<?=TEMPLATE?>img/oformit.jpg" alt="" /></a>
<?php endif; ?>
2
  • Покажите "Код из PHP" вместе с JS + #bought
    – Quiss
    3 мар 2015 в 14:01
  • Обновил, добавил данные
    – Rage
    3 мар 2015 в 14:40

1 ответ 1

0

Во-первых, дурацкая привычка использовать метод GET в аякс-запросах. Лучше используй $.post — там и объем передаваемых данных значительно больше и в корзину GET-запросами хулиганы с улицы ничего не накидают.

Во-вторых: где в коде ответ сервера? Когда принимаешь ответ, смотришь, true или false и на основании этого меняешь значение и атрибуты кнопки:

$.post(url, {
    total_price: total_price, 
    total_items: total_items
}, function(data) { // ожидаем ответа сервера (строка, число или объект)

    if(data===1) { // если пришло 1, записываем данные в элементы
        $('#bought').html(total_items); // Запись в нужные места на странице
        $('#sum').html(total_price);
    }
    else {
        alert('Something's wrong...');
    }

});

Сервер в ответ на POST-запрос должен отвечать:

if (ТОВАР_ЗАПИСАН_В_КОРЗИНУ) {
    echo 1;
}
else {
    echo 0;
}
5
  • Выдает сообщение 'Something's wrong...' Если изменить условие просто на if(data), то ошибку не выдает, но также первый товар не добавляется, а добавляется только после ручной перезагрузки, дальше всё добавляется. Странно почему-то при первом добавлении console.log(total_price) и console.log(total_items) выдает NaN.
    – Rage
    3 мар 2015 в 21:33
  • А в принимающем php-скрипте GET на POST поменял?
    – densmith
    6 мар 2015 в 19:43
  • Заметил такую штуку, что если в сайдбаре добавить вместо: Корзина пуста, Товаров в корзине:<br /> <span id="bought">0</span> на сумму <span id="sum">0</span> руб. <a href="?view=cart"><img src="img/oformit.jpg" alt="" /></a> то всё прекрасно работает, однако тогда изначально выводится сразу, что товаров 0 и сумма 0, а хотелось бы, чтобы работало, когда изначально: "Корзина пуста".
    – Rage
    7 мар 2015 в 2:07
  • Ну это уже обрабатывай условие if (count($_SESSION['cart'][$goods_id]) > 0)
    – densmith
    7 мар 2015 в 5:37
  • 1
    Переписал немного код, в сайдбаре в блоке else: добавил пустые элементы и через js, просто скрывал-показывал то что нужно. -------- Вроде получилось то что хотел, теперь работает вроде как надо.. добавил решение в вопросе. Спасибо за советы.
    – Rage
    7 мар 2015 в 15:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.