Корзина товаров для сайта на LocalStorage и JavaScript

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

Демо

На первом шаге нам потребуется информация о товарах. Как правило это массив данных, который хранится, соответственно в БД. Но для примера я создам несколько товаров вручную, как будто я их получил из базы.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

$arrCart = [
        1 => [
            "id" => 174,
            'name' => 'Iphone 11 Pro', 
            "price" => 255,
            'color' => 'Серый', 
            'img' => './img/iphone11.png'
        ],
        2 => [
            "id" => 181, 
            'name' => 'Samsung Galaxy A52', 
            "price" => 235, 
            'color' => 'Белый', 
            'img' => './img/samsung_galaxy_a52.png'
        ],
        3 => [
            "id" => 166, 
            'name' => 'Iphone 13 Pro', 
            "price" => 365, 
            'color' => 'Серый', 
            'img' => './img/iphone_13_pro.png'
        ],
        4 => [
            "id" => 134, 
            'name' => 'Xiaomi Mi 9', 
            "price" => 210, 
            'color' => 'Черный', 
            'img' => './img/Xiaomi_Mi_9.png'
        ]
    ];

Подключаем скрипт корзины к странице. Выводим товары привычным способом в цикле:

1
2
3
4
5
6

foreach ($arrCart as $product) {
echo '<img src="'.$product['name'].'"/><br />'; // картинка
echo $product['name'].'<br />'; // Название
echo $product['color'].'<br />'; // Цвет
echo $product['price'].'<br />'; // Стоимость
}

Затем идет кнопка, которая добавляет товар в корзину, то есть в LocalStorage в формате JSON. Для этого использует PHP функцию json_encode.

1
2

<button type="button" onclick='cartLS.add(<?php echo json_encode($product, JSON_UNESCAPED_UNICODE); ?>)'>
 Добавить в корзину</button>

Параметр JSON_UNESCAPED_UNICODE нужен, чтобы обратить данные (кириллицу) в читаемую кодировку, то есть в UTF-8. И нажав на кнопку в локальном хранилище мы увидим такую картину:

Теперь напишем JavaScript функцию, которая будет формировать товары в корзине и выводить их на страницу.

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)

Разберем этот код построчно.

Если нужно посчитать общую суму каждого товара в отдельности (если их несколько), то пишем следующее:

1

item.price * item.quantity

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

1
2
3

var items = cartLS.list();
var tot = items.reduce((sum, item) => sum + item.quantity, 0);
console.log(tot);

Если вы все сделали правильно, то получиться у вас должно примерно так:

Как видите, корзина на JS и LocalStorage делается не так сложно, как может показаться на первый взгляд. Я рекомендую потратить немного времени, чтобы понять как это можно применить к реальному проекту. Я бы отметил один минус хранения данных на устройстве пользователя и наверное вы уже догадались какой. Когда пользователь добавил товар в корзину на одном устройстве, а решил оформить на другом, то у него ничего не выйдет, нужно будет добавлять их снова. А в остальном этот метод подходит для небольших проектов.

Надеюсь, что у вас все получилось. Если что — пишите в комментариях, а найти меня можно в телеге.

СКАЧАТЬ СКРИПТ