
Привет. Здесь и сейчас я покажу, как добавить корзину на сайт и это будет полноценное решение, которое позволит превратить из обычного сайта или даже лендинга — интернет-магазин, в котором можно положить товар в корзину, перейти в нее, добавлять и удалять товары. Хранить данные в локальном хранилище в этом случае будет правильнее, чем использовать для этого базу данных. Думаю вы и так прекрасно это понимаете. Для создания корзины на JS нам потребуется совсем крошечный скрипт, который и сделает за нас практически всю работу. Останется только отрисовать саму корзину и карточку товаров. Лично я для удобства и экономии времени буду использовать библиотеку Bootstrap. Все методы скрипта будут описаны ниже, а скачать его можно будет в самом конце. А для того, чтобы вы окончательно поняли о чем идет речь, предлагаю посетить демо-страницу, на которой уже реализована корзина товаров на LocalStorage.

Демо

На первом шаге нам потребуется информация о товарах. Как правило это массив данных, который хранится, соответственно в БД. Но для примера я создам несколько товаров вручную, как будто я их получил из базы.
1
2
3
4
5
6
| foreach ($arrCart as $product) {
echo '<img src="'.$item['name'].'"/><br />'; // картинка
echo $item['name'].'<br />'; // Название
echo $item['color'].'<br />'; // Цвет
echo $item['price'].'<br />'; // Стоимость
} |
foreach ($arrCart as $product) {
echo '<img src="'.$item['name'].'"/><br />'; // картинка
echo $item['name'].'<br />'; // Название
echo $item['color'].'<br />'; // Цвет
echo $item['price'].'<br />'; // Стоимость
}
Подключаем скрипт корзины к странице. Выводим товары привычным способом в цикле:
1
2
| <button type="button" onclick='cartLS.add(<?php echo json_encode($item, JSON_UNESCAPED_UNICODE); ?>)'>
Добавить в корзину</button> |
<button type="button" onclick='cartLS.add(<?php echo json_encode($item, JSON_UNESCAPED_UNICODE); ?>)'>
Добавить в корзину</button>
Затем идет кнопка, которая добавляет товар в корзину, то есть в LocalStorage в формате JSON. Для этого использует PHP функцию json_encode.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| const $block_cart = document.querySelector(".cart");
const $total = document.querySelector(".total");
const $count = document.querySelector("#count");
$block_cart.innerHTML = items.map((item) => `
<img src="${item.img}"/>
<p>${item.name}</p>
<p>Цвет: ${item.color}</p>
<button type="button" onClick="cartLS.quantity(${item.id},-1)">-</button>
<div>${item.quantity}</div>
<button type="button" onClick="cartLS.quantity(${item.id},1)">+</button>
<h5>$${item.price}</h5>
<a href="#!" onClick="cartLS.remove(${item.id})">Удалить</a>`).join("")
$total.innerHTML = "$" + cartLS.total();
$count.innerHTML = cartLS.list().length;
renderCart(cartLS.list())
cartLS.onChange(renderCart) |
const $block_cart = document.querySelector(".cart");
const $total = document.querySelector(".total");
const $count = document.querySelector("#count");
$block_cart.innerHTML = items.map((item) => `
<img src="${item.img}"/>
<p>${item.name}</p>
<p>Цвет: ${item.color}</p>
<button type="button" onClick="cartLS.quantity(${item.id},-1)">-</button>
<div>${item.quantity}</div>
<button type="button" onClick="cartLS.quantity(${item.id},1)">+</button>
<h5>$${item.price}</h5>
<a href="#!" onClick="cartLS.remove(${item.id})">Удалить</a>`).join("")
$total.innerHTML = "$" + cartLS.total();
$count.innerHTML = cartLS.list().length;
renderCart(cartLS.list())
cartLS.onChange(renderCart)
Параметр JSON_UNESCAPED_UNICODE нужен, чтобы обратить данные (кириллицу) в читаемую кодировку, то есть в UTF-8. И нажав на кнопку в локальном хранилище мы увидим такую картину:

Теперь напишем JavaScript функцию, которая будет формировать товары в корзине и выводить их на страницу.
1
| item.price * item.quantity |
item.price * item.quantity
Разберем этот код построчно.
1 |
Определяем блок, в который поместим всю корзину товаров из JS |
2 |
Блок с общей сумой покупки |
3 |
Блок с количеством единиц товара |
4 |
Запуск функции формирования корзины |
5 |
Картинка |
6 |
Наименование товара |
7 |
Цвет |
8 |
Кнопка уменьшения количества каждого товара на единицу |
9 |
Количество каждого товара |
10 |
Кнопка увеличения количества каждого товара |
11 |
Стоимость товара |
12 |
Удаление товара |
13 |
Общая сумма всех товаров |
14 |
Количество единиц товаров |
15 |
Отрисовка корзины |
16 |
Отрисовка корзины при изменении (увеличение на единицу, удаление и т.д.) |
Если нужно посчитать общую суму каждого товара в отдельности (если их несколько), то пишем следующее:
1
2
3
| var items = cartLS.list();
var tot = items.reduce((sum, item) => sum + item.quantity, 0);
console.log(tot); |
var items = cartLS.list();
var tot = items.reduce((sum, item) => sum + item.quantity, 0);
console.log(tot);
То есть стоимость умножаем на количество. Так же не лишним будет узнать общее количество единиц товаров всех вместе взятых. В этом нам поможет это, фрагмент кода:
1
2
3
| var items = cartLS.list();
var tot = items.reduce((sum, item) => sum + item.quantity, 0);
console.log(tot); |
var items = cartLS.list();
var tot = items.reduce((sum, item) => sum + item.quantity, 0);
console.log(tot);
Если вы все сделали правильно, то получиться у вас должно примерно так:

Как видите, корзина на JS и LocalStorage делается не так сложно, как может показаться на первый взгляд. Я рекомендую потратить немного времени, чтобы понять как это можно применить к реальному проекту. Я бы отметил один минус хранения данных на устройстве пользователя и наверное вы уже догадались какой. Когда пользователь добавил товар в корзину на одном устройстве, а решил оформить на другом, то у него ничего не выйдет, нужно будет добавлять их снова. А в остальном этот метод подходит для небольших проектов.
Надеюсь, что у вас все получилось. Если что — пишите в комментариях, а найти меня можно в телеге.
СКАЧАТЬ СКРИПТ
Привет! Добавьте пожалуйста возможность скачать не только файл js, но и весь пример целиком, с html файлами.
Нажмите правой кнопкой мыши на примере и выберите: «Сохранить как».
Алексей просил выложить на сайт копию сайта-примера, по которому Вы всё делали. Если это возможно — сделайте, пожалуйста. Спасибо
Отправил в телеграм.