Создаем корзину покупателя на чистом JavaScript и Local Storage

Вариантов создания корзины с использованием jQuery, на просторах интернета достаточно, но так как не все хотят подключать громоздкие библиотеки, особенно для каких-то разовых задач, я хочу показать вариант реализации на чистом JS. К тому же, хранить выбранные пользователем товары, мы будем не в cookie, а Local Storage (локальное хранилище). Эта технология поддерживается практически во всех современных браузерах и даже в IE8.

Буквально два слова о Local Storage для тех, кто с этим способом хранения данных на стороне клиента не знаком. Объем хранимой информации в LS по сравнению с cookie значительно выше: около 5Мб(!) против 4Кб. К тому же, в LS данные хранятся в зашифрованном виде. Однако, как и в cookie, так и в LocalStorage, мы можем записывать только строковые данные. Если нужно добавить массив или объект, то его можно предварительно преобразовать в JSON-строку (JSON.stringify(obj)), а после получения данных из LS - производим обратное преобразование (JSON.parse(json_string)). Работать с Local Storage не просто, а очень просто. Вот его основные методы:

localStorage.setItem('key', 'value');
Обновляет или создает новую запись с ключом "key" и строковым значением "value"
var lsData = localStorage.getItem('key');
Возвращает данные связанные с ключом "key" или "null", если записи с таким ключом не обнаружено
localStorage.removeItem('key');
Удаляет данные со связанным ключом "key"
localStorage.clear();
Удаляет все записи из Local Storage

Переходим к делу и для примера, создадим такую HTML-структуру для вывода товара:

<div class="item_box">
  <h3 class="item_title">Samsung Galaxy S10</h3>
  <p>Цена: <span class="item_price">20</span>$</p>
  <button class="add_item" data-id="7">Добавить в корзину</button>
</div>
<div class="item_box">
  <h3 class="item_title">LG Optimus G E100500</h3>
  <p>Цена: <span class="item_price">100</span>$</p>
  <button class="add_item" data-id="2">Добавить в корзину</button>
</div>
  <div class="item_box">
  <h3 class="item_title">Nokia 2110</h3>
  <p>Цена: <span class="item_price">1000</span>$</p>
  <button class="add_item" data-id="5">Добавить в корзину</button>
</div>
<button id="checkout">Оформить заказ</button>
<button id="clear_cart">Очистить корзину</button>
<div id="cart_content"></div>

Все необходимые данные, такие как наименование или цена товара, мы можем брать прямо из элементов страницы. Остается важная составляющая - ID товара, которую можно выводить в каком-нибудь атрибуте. Для таких целей, я предпочитаю атрибут data-*, который я уже упоминал в других статьях. Его-то и добавим в кнопку "Добавить в корзину" каждого из товаров.
Теперь в дело вступает JavaScript. Ничего сверхъестественного тут нет и большую часть, я прокомментирую прямо в коде:

var d = document,
    itemBox = d.querySelectorAll('.item_box'), // блок каждого товара
    cartCont = d.getElementById('cart_content'); // блок вывода данных корзины
// Функция кроссбраузерной установка обработчика событий
function addEvent(elem, type, handler){
  if(elem.addEventListener){
    elem.addEventListener(type, handler, false);
  } else {
    elem.attachEvent('on'+type, function(){ handler.call( elem ); });
  }
  return false;
}
// Получаем данные из LocalStorage
function getCartData(){
  return JSON.parse(localStorage.getItem('cart'));
}
// Записываем данные в LocalStorage
function setCartData(o){
  localStorage.setItem('cart', JSON.stringify(o));
  return false;
}
// Добавляем товар в корзину
function addToCart(e){
  this.disabled = true; // блокируем кнопку на время операции с корзиной
  var cartData = getCartData() || {}, // получаем данные корзины или создаём новый объект, если данных еще нет
      parentBox = this.parentNode, // родительский элемент кнопки "Добавить в корзину"
      itemId = this.getAttribute('data-id'), // ID товара
      itemTitle = parentBox.querySelector('.item_title').innerHTML, // название товара
      itemPrice = parentBox.querySelector('.item_price').innerHTML; // стоимость товара
  if(cartData.hasOwnProperty(itemId)){ // если такой товар уже в корзине, то добавляем +1 к его количеству
    cartData[itemId][2] += 1;
  } else { // если товара в корзине еще нет, то добавляем в объект
    cartData[itemId] = [itemTitle, itemPrice, 1];
  }
  if(!setCartData(cartData)){ // Обновляем данные в LocalStorage
    this.disabled = false; // разблокируем кнопку после обновления LS
  }
 return false;
}
// Устанавливаем обработчик события на каждую кнопку "Добавить в корзину"
for(var i = 0; i < itemBox.length; i++){
  addEvent(itemBox[i].querySelector('.add_item'), 'click', addToCart);
}
// Открываем корзину со списком добавленных товаров
function openCart(e){
  var cartData = getCartData(), // вытаскиваем все данные корзины
      totalItems = '';
  // если что-то в корзине уже есть, начинаем формировать данные для вывода
  if(cartData !== null){
    totalItems = '<table class="shopping_list"><tr><th>Наименование</th><th>Цена</th><th>Кол-во</th></tr>';
    for(var items in cartData){
      totalItems += '<tr>';
      for(var i = 0; i < cartData[items].length; i++){
        totalItems += '<td>' + cartData[items][i] + '</td>';
      }
      totalItems += '</tr>';
    }
    totalItems += '</table>';
    cartCont.innerHTML = totalItems;
  } else {
    // если в корзине пусто, то сигнализируем об этом
    cartCont.innerHTML = 'В корзине пусто!';
  }
  return false;
}
/* Открыть корзину */
addEvent(d.getElementById('checkout'), 'click', openCart);
/* Очистить корзину */
addEvent(d.getElementById('clear_cart'), 'click', function(e){
  localStorage.removeItem('cart');
  cartCont.innerHTML = 'Корзина очишена.';
});

Объект "cartData" собираем по следующей схеме: ключ к товару - его ID и данные в виде массиве [название_товара, цена_товара, количество_товара]. Если бы вы вывели такой объект средствами php, то получили бы примерно следующее:

stdClass Object (
  [2] => Array (
    [0] => LG Optimus G E100500
    [1] => 100
    [2] => 1
  )
  [7] => Array (
    [0] => Samsung Galaxy S10
    [1] => 20
    [2] => 2
  )
)

Это я показал, чтобы было понимание того, как потом можно работать с этими данными на стороне сервера. И плавно подошли к тому, как же эти данные отправить на сервер. В отличии от cookie, Local Storage работает только на стороне клиента. Кто-то может и записать это в минусы LS, но я не вижу проблемы, т.к. есть достаточно способов превратить минус в плюсы. Легко и непринужденно, мы можем отправить данные Ajax-запросом, а это гораздо приятней посетителю, т.к. его не перебрасывает на другую страницу, экономит время и трафик, что немаловажно, если пользователь зашёл с мобильного устройства или скорость подключения не такая высокая.


Как видите, нет ничего сложного и объем кода, без использования сторонних библиотек, получился совсем небольшим. Если кому-то нужно учитывать более старые версии Internet Explorer, то он может добавить cookie, как "fallback" к Local Storage. То есть, проверять в функциях "getCartData" и "setCartData" возможности браузера и, если он не поддерживает LS, то в качестве хранилища использовать Cookie, а остальной код останется без изменений.

Incode Pro logo

146 комментариев

Страница 1 из 6  
Гость 04.07.2017 17:47
выдает ошибку
for(var i = 0; i < itemBox.length; i++){
addEvent(itemBox.querySelector('.add_item'), 'click', addToCart); -
itemBox.querySelector это не функция и не работает совсем
Гость 16.09.2017 10:25
Здравствуйте! Почему может выдавать ошибку
Cannot read property 'addEventListener' of null

В строке 6
  if(elem.addEventListener){
Incode 16.09.2017 11:14
Почему может выдавать ошибку
Скорее всего, из-за того, что элемента, на который устанавливается обработчик события, нет. Можно добавить проверку в функцию
function addEvent(elem, type, handler) {
    if (!elem) {
        return false;
    }
    if (window.addEventListener) {
        elem.addEventListener(type, handler, false);
    } else {
        elem.attachEvent('on' + type, function() {
            handler.call(elem);
        });
    }
    return false;
}
Это решит следствие проблемы, но не причину. А чтобы исправить причину, нужно проверить все элементы, на которые устанавливается обработчик события, их селекторы, наличие в DOM и т.д. Возможно, что у вас где-нибудь банальная опечатка в названии ID или класса.
P.S. Кроме того, причиной может быть старый браузер, например, IE < 8, Safari < 3.2 и т.д.
Гость 18.09.2017 11:35
Подскажите как можно вывести изображение товара с помощью localstorage?
Для данного примера
Гость 18.09.2017 11:51
(к предыдущему комментарию) И посчитать общую сумму и количество всех товаров в корзине?
Гость 25.01.2018 09:38
Приветствую!
https://incode.pro/demo/icp_example16/cart_ext.html
Если не сильно затруднит, подскажите как сделать чтобы после удаления последнего элемента в списке появлялось сообщение - В корзине пусто, а не оставалась пустая таблица.

Сейчас если добавить товары, затем их удалить, обновить страницу и нажать кнопку - Оформить заказ, появляется пустая табличка. Исчезает только если нажать кнопу - Очистить корзину.

На сколько я понял, нужно вносить изменения в функцию удаления из корзины, но я не знаю какие.
Гость 25.01.2018 11:05
https://incode.pro/demo/icp_example16/cart_ext.html
Да, совсем забыл про IE. Добавьте в код такой полифилл для работы метода .matches():


(function (e) {
    e.matches || (e.matches = e.matchesSelector || function (selector) {
        var matches = document.querySelectorAll(selector),
            i = -1;
        while (matches[++i] && matches[i] !== this) {}
        return !!matches[i];
    });
})(Element.prototype);


А этот код в любое место можно копировать?
Копирую в самый конец. В IE 8, не удаляет элементы. В IE 11, Хром 49, Pale Moon 26 - удаляет и без этой функции.

Видимо в IE 8 не будет работать. IE 9-10, проверить возможности нет.
Гость 16.02.2018 15:54
Подскажите, а как можно сделать + -, что бы менять количество. Примерно также как в вашей корзине покупателя на jQuery.
Гость 08.03.2018 09:20
Доброго времени суток. Такой вопрос почему то корзина не работает если залить в отдельный файл. как вызвать её из отдельного файла? или только на странице товара?
Гость 15.03.2018 12:29
@Гость, Отвечаю сам себе. У меня работает, переменные правда переименованы, но разобраться можно. И классы для кнопок нужно прописать (plus_item, minus_item). Спасибо автору за скрипт.
Показать код

Округление еще сделал.
Показать код
Гость 19.03.2018 19:09
А можно всё тоже но сделать через radio batton? и плюс чтобы еще под меню были тоесть
товар
товар
товар->
товар
товар
товар
windcrack 23.05.2018 21:02
@Гость, Работает в ios тестил на планшете телефоне
Гость 19.06.2018 17:32
Здравствуйте,решил вывести общую стоимость и название товаров в корзине через тег select в форме и соответственно ,затем передать их в php обработчик(без ajax).С выводом общей суммы разобрался,с выводом имен товаров на половину.Собственно вся соль в том что ,при нажатии кнопки удаления,колличество имен товаров не меняется и остается прежним.Понимаю что условие для удаления имени товара надо писать в addEvent(d.body, 'click', function(e){}Собственно сам код:

for(var w = 0; w < cartData[items][0].length; w++){//цикл выводит названия добавленных товаров
totalTitle += cartData[items][0][w];
}
Ну а дальше просто вставляю totalTitle между тегами select в форме.В addEvent(d.body, 'click', function(e){
if(cartData.hasOwnProperty(itemId)) {
var totalName=d.getElementById('id');
totalName.textContent=+ totalName.textContent - cartData[itemId][0];
}
Но при нажатии кнопки удаления,имена товаров остаются прежними,что я сделал не так?
Гость 19.06.2018 17:32
Здравствуйте,решил вывести общую стоимость и название товаров в корзине через тег select в форме и соответственно ,затем передать их в php обработчик(без ajax).С выводом общей суммы разобрался,с выводом имен товаров на половину.Собственно вся соль в том что ,при нажатии кнопки удаления,колличество имен товаров не меняется и остается прежним.Понимаю что условие для удаления имени товара надо писать в addEvent(d.body, 'click', function(e){}Собственно сам код:

for(var w = 0; w < cartData[items][0].length; w++){//цикл выводит названия добавленных товаров
totalTitle += cartData[items][0][w];
}
Ну а дальше просто вставляю totalTitle между тегами select в форме.В addEvent(d.body, 'click', function(e){
if(cartData.hasOwnProperty(itemId)) {
var totalName=d.getElementById('id');
totalName.textContent=+ totalName.textContent - cartData[itemId][0];
}
Но при нажатии кнопки удаления,имена товаров остаются прежними,что я сделал не так?
Гость 21.09.2018 11:17
Как вывести итоговую сумму добавленных товаров в корзине?...
Гость 24.09.2018 13:04
код кодный но побольше функционала ему к примеру сумма покупки и количество наименований нету, пришлось допиливать
да и код можно было проще сделать
HEEG.HTML 07.01.2019 12:06
@Гость, Javascript Корзинка хранится в local storage или Кукисах, поэтому при переходе между страничками заказ не теряется. Можете попробовать тут http://novye-podarki.ru/6_7_0/index.html код js корзинки тут http://novye-podarki.ru/6_7_0/cart.js
На почту заказ можно отправлять гугл формой или внешним бесплатным почтовым сервисом.
Roman1993 17.01.2019 21:38
а как удалить отдельно взятый элемент из корзины?
Incode 17.01.2019 23:46
@Roman1993, ключами товаров в корзине, являются их ID. Поэтому достаем данные из корзины, удаляем и записываем обратно таким образом:
var itemId = 100500; // ID товара, который будем удалять
var cartData = getCartData(); // достали
delete cartData[itemId]; // удалили
setCartData(cartData); // сохранили в локальном хранилище
Roman1993 18.01.2019 09:25
@Incode, а если писать на чистом js, имея вот такую кашу

HTML
<div class="container">
<div class="tovar1">
<div class="image_wrapper"><img src="iphone_7.jpg" alt="" class="image"></div>
<div class="name">Apple iPhone 7 32Gb A1778 Black</div>
<!-- <div class="price">13999 грн</div> -->
<div class="buy">
<button class="main" title="13999" id="Apple iPhone 7 32Gb A1778 Black">купить</button>
</div>
</div>
<div class="tovar2">
<div class="image_wrapper"><img src="iphone_8.jpg" alt="" class="image"></div>
<div class="name">Apple iPhone 8 Plus 64Gb A1897 Space Gray</div>
<!-- <div class="price">21699 грн</div> -->
<div class="buy">
<button class="main" title="21699" id="Apple iPhone 8 Plus 64Gb A1897 Space Gray">купить</button>
</div>
</div>
<div class="tovar3">
<div class="image_wrapper"><img src="iphone_x.jpg" alt="" class="image"></div>
<div class="name">Apple iPhone X 64GB Space Gray (MQAC2)</div>
<!-- <div class="price">25499 грн</div> -->
<div class="buy">
<button class="main" title="25499" id="Apple iPhone X 64GB Space Gray (MQAC2)">купить</button>
</div>
</div>
</div>

<div class="basket"></div>
JavaScript
var main=document.getElementsByClassName("main");
for(i=0; i<main.length; i++){
console.log(main[i]);
main[i].onclick=function(){
document.getElementsByClassName("basket")[0].innerHTML=document.getElementsByClassName('basket')[0].innerHTML + "<div class='new'>" +this.title + ' ' + this.id+ "<span class='close'>&times</span>" + "</div>";
var close=document.getElementsByClassName("close")[0];
Roman1993 18.01.2019 09:28
Моя цель, чтобы по нажатию на крестик скрывался отдельный элемент, который был ранее добавлен в корзину
Incode 18.01.2019 12:45
@Roman1993, выше в комментариях я уже неоднократно показывал пример. Смотрите по ссылке. Откроете исходный код страницы, там увидите код JS.
Roman1993 18.01.2019 14:47
@Incode, в этом коде весьма неидеально работает удаление элементов, в любом случае Ваша позиция мне ясна
Гость 16.04.2019 21:44
INCODE, ВЫ лучший!!!
Это не лесть, а результат моего двухнедельного поиска в интернете.
БОЛЬШОЕ СПАСИБО!
Благодаря Вашему коду, я как чайник в js смог без проблем добавить кнопки на каждую отдельную html страницу с товаром и выводить результат корзины на отдельную страницу, на которую ещё планирую поставить форму запроса и выводить всё это в виде фрейма на страницах с товаром.
Но появился один вопрос:
Скажите пожалуйста, как сделать так чтобы таблица корзины всегда была открыта, а содержимое соответственно автоматически обновлялось без нажатия на кнопку «Оформить заказ»?
Заранее спасибо!
Гость 16.04.2019 21:47
@Гость, БОЛЬШОЕ СПАСИБО Вам за примеры кода +-, у меня работает и очень помогло!
Страница 1 из 6  
Ваш комментарий:
X