@Heckfy325
Начинающий программист. Простите за глупые вопросы

Как сделать ajax корзину yii2?

Сделал корзину, товары добавляются и удаляются работает все как нужно, но нету ajax обновления корзины, нужно обновлять страницу чтобы товары обновлялись в корзине.
5e7b681881805389337966.png
Как сделать обновляемую корзину, без перезагрузки страницы. Товары добавляются в сессию, сайт на yii2.
  • Вопрос задан
  • 643 просмотра
Решения вопроса 1
Eridani
@Eridani
Мимо проходил
1) Вы добавили товар в корзину, плюсанули, минусанули кол-во, отправился аякс до обработчика с идентификатором данного товара.
dataType должен быть у аякса json (dataType: 'json',), т.к. нам нужен не HTML, а лишь данные, и передать нам нужно данные.
В data должен быть объект, во первых - экшн, какое действие мы отправляем в обработчик, чтобы он понимал, что нужно сделать - plus, minus, add, remove или что угодно, что вас заранее надо написать.
2) В обработчике достали по ИД товар из БД, засунули в сессию
3) Товар попал туда с полями суммы, колва, путь до изображения и т.п, все то, что понадобится в конечном счете.
4) json_encode'ом вы отправляете назад в аякс данные об этом товаре, т.е. все то, что у вас попало по этому товару в сессию, и отправляете саму корзину, в которой помимо товаров должны лежать ключи общего кол-ва товаров и суммы всей корзины. Можете дополнить любыми другими дополнительными данными, кол-во товара, путь до картинки и т.п.
die(json_encode(array('cart' => $_SESSION['cart'], 'action' => 'cart-add', 'item_id' => $item_id)));

5) В теле success у вас есть параметр ответа success: function(data
6) Все то, что было отправлено json_encode'ом теперь доступно в пункте 5, в объекте data
7) На основании пришедших данных и нужного экшена, путем JS'а добавляете новый итем товара \удаляете, плюсуете, минусуете, и все это доступно в объекте data.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
kimono
@kimono
Web developer
При обработке pjax контейнера во время перерендеринга регистрируйте javascript и обновляйте счетчик продуктов в корзине.
Счетчик количества товаров в корзине в хидере:
В корзине: <span id="basket-counter">5</span>
Файл с контейнером с формой добавления товара:
<?php Pjax::begin() ?>
<?php if (isset($basketCounter)) : ?>
<script>
$('#basket-counter').text('<?= $basketCounter ?>');
</script>
<?php endif; ?>
<!-- форма для добавления товара в корзину -->
<?php Pjax::end() ?>

Контроллер с обработкой pjax контейнера:
public function actionAddToBasket(){
    // логика добавления
    return $this->render('basket-form', [
        'basketCounter' => $basketCounter,
       'basketSum' => // ...
    ]);
}
Ответ написан
Комментировать
@Valera221
Делаю сайты
Делаешь отдельный файл в которым ты пишешь код для получения данных из базы данных или откуда-то.

// Нужно чтобы записать в нее последние данные из html
let last_data = "";
                  function show()
        {
            $.ajax({
                url: 'файл где код для получения',
                cache: false,
                success: function(html){
                  //html это данные которые ты получил с файла, это может быть полноценная корзина
                  if (last_data != html){
                  div = html;
                  last_data = html;
                }
                  //div это там где ты хочешь разместить данные из html
                }
            });
        }
        $(document).ready(function(){
            show();
            setInterval('show()',1000); 
            // Интервал нужен чтобы постоянно повторять эту операцию
            // Чтобы каждый раз не обновлять, ты можешь сделать дополнительную переменную, в которую помещаешь html, и если что-то измениться в html, то только тогда div обновиться еще раз 
        });
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы