Корзина товаров на PHP+JS (JQuery)

Тимур Беретарь / 2021-02-23

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

Для начала разберем на словах, как это будет работать: у нас есть кнопка, в параметры которой мы передаем id товара. По нажатию этой кнопки, мы сохраним в массиве имеющийся id. Все это будет храниться в куках. Когда пользователь перейдет на страницу самой Корзины, мы обратимся к этом массиву, чтобы сформировать заказ и отобразим пользователю.

Нам понадобится библиотека JQuery и JQuery Cookies. Все достаточно просто, приступим.

Положим товар в корзину

Предположим, что кнопка «Купить» у вас выглядит примерно так:

<a href="#" data-productid="10" class="btn btn-buy">Купить</a>

Данный HTML код формируется на странице, где есть сам товар. В параметр data-productId  передаем id товара из базы данных. Передавать можно любые параметры, которые мы хотим учитывать в заказе, например, количество товаров, но в нашей заметке мы ограничимся только id.

Код обработчика нажатия кнопки на JS будет выглядеть так:

//если кука не существует, создаем пустой массив

if ($.cookie('mysite-orderlist') == null) {
    var orderList = Array();
} else {
    //иначе заполняем массив значениями из куки, предварительно преобразовав JSON строку в массив
    var orderList = JSON.parse($.cookie('mysite-orderlist'));
}

$('[data-productid]').click(function() {
    //кладем новый заказ, если его в массиве не существует
    let posElem = orderList.indexOf($(this).data('productid'));
    if (posElem === -1) {
        orderList.push($(this).data('productid'));
        //меняем текст на кнопке $(this).text('В корзине');
        } else {
            //если он существует, удаляем его из корзины
            orderList.splice(posElem, 1);
            $(this).text('Купить');
    }

    //сохраняем массив в куки, храним ее в браузере 7 дней
    $.cookie('mysite-orderlist', JSON.stringify(orderList) ,{ expires: 7 });
    return false;
});

Работа корзины будет выглядеть следующим образом: мы нажимаем на кнопку «Купить», товар кладется в корзину, текст на кнопке меняется на «В корзине». Если мы нажмем на кнопку «В корзине», то товар удалится из корзины и кнопка снова получит текст «Купить». Возможно, это не самая удачная реализая в плане дизайна, поэтому реализацию по части UX оставляю за вами.

В начале заметки мы формировали статический текст на кнопке «Купить». Нам его нужно немного преобразовать, так как при загрузке страницы, все кнопки должны получить соответствующий текст, в зависимости от того, лежит товар в корзине или нет.

Для этого в коде PHP проверяем, существует ли кука и если да, прочтем ее:

 

if (isset($_COOKIE['mysite-orderlist'])) {
        $orderListCookie = json_decode($_COOKIE['mysite-orderlist']);
    } else {
        $orderListCookie = [];
}

Там, где формируется кнопка:

<a href="#" class="btn btn-info" data-productid="<?= $orderId ?>">
    <?php
        if (in_array($orderId,$orderListCookie)) {
            echo "В корзине";
        } else {
            echo "Купить";
        }
    ?>
</a>

Пример немного грубоват, но суть отражает. Здесь мы проверяем, есть ли по текущей кнопке в массиве orderListCookie товар с orderID.

В принципе, основные алгоритмы готовы. Теперь мы имеем куку mysite-orderlist, в которой хранится список id товаров. Остается сделать страницу или блок, куда будет выводиться наша корзина, с возможностью отправки ее менеджеру.