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

    10 комментариев 5057

localStorage

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

Телеграм-канал serblog.ru

Демо

Корзина для сайта на JS

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

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 />'; // Стоимость
}

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

1
2
<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)

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

Добавление товара в корзину

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

1
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);

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

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

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

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

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

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

Любая сумма на развитие сайта

10 комментариев
  1. Привет! Добавьте пожалуйста возможность скачать не только файл js, но и весь пример целиком, с html файлами.

    • Александр Маврин:

      Нажмите правой кнопкой мыши на примере и выберите: «Сохранить как».

  2. Дмитрий:

    Алексей просил выложить на сайт копию сайта-примера, по которому Вы всё делали. Если это возможно — сделайте, пожалуйста. Спасибо

  3. Nanna:

    Добрый день, а есть ли возможность сделать все на чистом js, без php?

  4. Валерий:

    Здравствуйте, Александр! Подскажите пожалуйста, можно ли использовать скрипт корзины на сайте вордпресс? Интересует вот какой момент. У меня меню ресторана оформлено в виде записи. То есть для каждого ресторана подразумевается отдельная запись. Я смотрел плагины корзин, но там все строится на том, что каждое блюдо надо оформлять как отдельная запись. Мне это показалось не совсем удобным, и все блюда я оформил в виде одной записи. Вот и возник вопрос, можно ли использовать вашу корзину для моих отдельных записей? И как это сделать на вордпрессе?

    • Александр Маврин:

      Здравствуйте. Логичнее было бы отдельными записями сделать. Но если вы можете получить массив то вполне можно реализовать. Даже прописать товары вручную, но это не совсем удобно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *