Корзина и заказы

Карточка товара

В карточку товара добавляем кнопку покупки с ссылкой наскрипт помещающий товар в корзину.

<a href="/catalog/add_to_cart.php" data-id="<?=$item['id'];?>" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>

Js для отправки POST запроса на добавление товара

Чтобы кнопка работала без перезагрузки, давайте добавим на неё js скрипт перехватывающий событие клика и отправляющий POST запрос по указанному адресу.

Обратите внимание, что класс features_items – это класс который у меня весит на обёртке вокруг всех товаров в категории. У вас этот класс может быть другим.

Саму функцию обработчик повесим на класс add-to-cart.

let productList = document.getElementsByClassName('features_items');
// добавление товара в корзину
if (productList[0]) {
    productList[0].addEventListener('click', addToBasket);
}

function addToBasket(event) {
    if (event.target.classList.contains('add-to-cart')) {
        event.preventDefault();
        serverRequest(
            '/catalog/add_to_cart.php', //event.target.href,
            'add',
            {id: event.target.dataset.id}
        ).then(
            request => {
                event.target.outerHTML = request;
            },
            error => console.log(error)
        );
    }
}

async function serverRequest(url, action, data = {}) {
    data['action'] = action;
    
    let response = await fetch(
        url, 
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
            },
            body: objectJoin(data, '=', '&')
        }
    );
    
    return await response.text();
}

function objectJoin(obj, delimitterKeyValue = '->', delimitterPair = ';') {
    let result = '';
    for (key in obj) {
        if (result != '') result += delimitterPair;
        result += '' + key + delimitterKeyValue + obj[key];
    }
    return result;
}

Скрипт добавления товара в корзину

По сути корзина – это массив в сессии $_SESSION[‘cart’]; где ключи – это ид добавленных товаров, значение – количество этого товара в корзине.

require_once('../setting.php');
if ($_POST['id']) {
    $_SESSION['cart'][$_POST['id']] = $_SESSION['cart'][$_POST['id']] ? $_SESSION['cart'][$_POST['id']] + 1: 1;
    
    echo '<p class="btn btn-default" style="margin-bottom: 25px;">Товар добавлен в корзину</p>';
}

Страница корзины

Выберем из БД те товары, id которых хранятся в сессии пользователя.

require_once('../setting.php');
require_once($setting['TEMPLATE_PATH'] . 'head.php');

$data = [];
if (isset($_SESSION['cart']) && !empty($_SESSION['cart'])) {
    $productIds = array_keys($_SESSION['cart']);
    $idsStr = implode(',', $productIds);
    $query = 'SELECT * FROM wshop_product 
        WHERE id IN ('.$idsStr.')';

    $result = $pdo -> prepare($query);
    $result->execute([]);
    $data = $result->fetchAll();
}

И просто выведем их на экран. Над суммарной стоимостью и скриптом её изменения при нажатии на кнопки “+” “-” предлагаю подумать читателю самостоятельно.

<?foreach($data as $key => $item) {?>
<tr>
    <td class="cart_product">
        <a href=""><img src="/images/<?=$item['image'];?>" alt="" height="100"></a>
    </td>
    <td class="cart_description">
        <h4><a href=""><?=$item['name'];?></a></h4>
    </td>
    <td class="cart_price">
        <p><?=$item['price'];?> р</p>
    </td>
    <td class="cart_quantity">
        <div class="cart_quantity_button">
            <a class="cart_quantity_up" href=""> + </a>
            <input class="cart_quantity_input" type="text" name="quantity" value="<?=$_SESSION['cart'][$item['id']];?>" autocomplete="off" size="2">
            <a class="cart_quantity_down" href=""> - </a>
        </div>
    </td>
    <td class="cart_total">
        <p class="cart_total_price">$59</p>
    </td>
    <td class="cart_delete">
        <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a>
    </td>
</tr>
<?}?>

Остаётся только завернуть этот вывод в разметку вашего шаблона. Вот и всё дело осталось за малым.

Создать заказ

Страница вывода заказов пользователя

Делается аналогично любой странице выводящей какой либо список.