Создаем корзину покупателя на чистом 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

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

Страница 1 из 7  
Гость 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
@Гость, БОЛЬШОЕ СПАСИБО Вам за примеры кода +-, у меня работает и очень помогло!
Гость 18.10.2019 22:51
Написал расширение для одной CMS на файлах с использованием этого скрипта:
https://my-engine.ru/extensions/2onwffQaYp2QA81RgWbT2ygqc8PgqfiI
Valery 05.05.2020 16:57
Спасибо за ответ.
Попробовал оба варианта, к сожалению они не работают.
Если честно, я уже неделю ищу где ошибка :)
Версия PHP 5.4.45
В Вашей папки с файлами я только внёс на 17 строке в handler.php свой e-mail, переименовал самую главную папку и больше нечего. Такое впечатление что чего-то не хватает для связи между файлами jqcart.min.js и handler.php. Нажимая на кнопку отправить, вижу браузер пытается отправить, так как он проверяет текст описания на грамотность языка. Но нет какой-либо реакции по отправки.
А так-же что интересно, когда заполненный заказ я отправляю на печать, то под модальном окном выбора принтера для печати теряются данные заказчика и не распечатываются (сам заказ распечатывается нормально). А в браузере данные заказчика остаются.
На этом же хостинге (папкой выше) у меня стоит php обработчик формы и нормально работает.
Я зарегистрировался и оставил свой e-mail на Вашей странице (если захотите контактировать на прямую :)
Заранее спасибо!
Valery 05.05.2020 17:07
P.S. Сейчас заметил, что Вы почистили историю обсуждения :) Мой вопрос был к тому что форма не отправляется
greenmar 20.05.2020 23:12
Понимаю что тема давнешняя, но для меня оказалась актуальна и по сей день. И все получилось, но вот одного маленького момента не хватает - изменения количества в корзине, чтобы можно было цифрами набрать нужное количество товара в таблице. Было бы идеально. В остальном респект и уважение проверенное годами!
Гость 30.05.2020 21:37
Очень нужна помощь. Задача: Есть вывод товаров (9шт) по 3 товара в 3 категориях через радиокнопки. Можно выбрать по 1 из 3 разновидностей. Реализация на rails через метод each. Как написать скрипт для добавления массива из 3 товаров одной кнопкой? Сложность в том, что если добавлять кнопку в цикл .each, она выводится на каждый товар. Если добавлять после, то кнопка не получает id товара
Гость 15.11.2020 09:19
Спасибо!
ioioioio 16.12.2020 16:47
Прочитал вашу тему в блоге

https://zip500.blogspot.com/2020/12/httpavia3rufscomfscomfscom.html#


Это хорошо, что вы движек CMS написали, но я за то чтобы каждый имел выбор в программировании.
Разработка на js магазина с html версткой очень быстрая и требует экономии памяти на свем
Вот я и предлагаю на ваше обсуждение самый простой магазин в 100 строк
Есть Сгенерированный каталог, и для сео html каталог
Корзина с добавлением, редактированием, удалением товара
Отправка заказа на гугл док или на почту

<meta charset="utf-8">
<a onclick="parent.add(`http://avia3.ru/images/logo.png`,`aaa21`,21,1,`ttt2`)" title="в корзину" href="#">Топовый html 10 товар</a><br>
    <!-- Начало формирования товарного каталога -->
<script>
  document.write('<a href="javascript:cat(`cat1`)">Каталог 1</a> <a href="javascript:cat(`cat2`)">Каталог 2</a> <a href="javascript:cat(`cat3`)">Каталог 3</a> <span id=corz></span><div id=a1></div><div id=a2></div>');
  function cat(cat)
  {
    if(cat=='cat1')                
      a=one(`https://1.bp.blogspot.com/-NCZ_6psI5vY/X5LKpXgnziI/AAAAAAAACG4/JyqWLj8A-SMKX28os5zjUO8RcR9M2WoXwCLcBGAsYHQ/w131-h131/892_oooo.plus.png`,`aaa11`,11,1,`ttt1`)+
      one(`http://avia3.ru/images/logo.png`,`aaa21`,21,1,`ttt2`)+
      one(`http://avia3.ru/images/logo.png`,`ddd33`,33,1,`ttt22`)+
      one(`http://avia3.ru/images/logo.png`,`aaa31`,31,1,`ttt3`)+
      one(`https://1.bp.blogspot.com/-QHhsZ7zs5TQ/X6QMm5ArZKI/AAAAAAAACMw/_7mhNW6T7mYQIJo2QfJHTPfFdcCQsPmtQCLcBGAsYHQ/w72-h72-p-k-no-nu/%25D0%25BD%25D0%25B0%25D0%25BF%25D0%25B0%25D0%25B4%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5-8390366.jpg`,`aaa41`,41,1,`ttt4`);
    if(cat=='cat2')
      a=one(`http://avia3.ru/images/logo.png`,`bbb12`,12,1,`ttt5`)+
      one(`http://avia3.ru/images/logo.png`,`bbb22`,22,1,`ttt6`)+
      one(`https://1.bp.blogspot.com/-QHhsZ7zs5TQ/X6QMm5ArZKI/AAAAAAAACMw/_7mhNW6T7mYQIJo2QfJHTPfFdcCQsPmtQCLcBGAsYHQ/w72-h72-p-k-no-nu/%25D0%25BD%25D0%25B0%25D0%25BF%25D0%25B0%25D0%25B4%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5-8390366.jpg`,`bbb32`,32,1,`ttt7`)+
      one(`http://avia3.ru/images/logo.png`,`bbb42`,42,1,`ttt8`);
    if(cat=='cat3')
      a=one(`http://avia3.ru/images/logo.png`,`ddd13`,13,1,`ttt9`)+
      one(`https://1.bp.blogspot.com/-QHhsZ7zs5TQ/X6QMm5ArZKI/AAAAAAAACMw/_7mhNW6T7mYQIJo2QfJHTPfFdcCQsPmtQCLcBGAsYHQ/w72-h72-p-k-no-nu/%25D0%25BD%25D0%25B0%25D0%25BF%25D0%25B0%25D0%25B4%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B5-8390366.jpg`,`ddd23`,23,1,`ttt11`)+
      one(`http://avia3.ru/images/logo.png`,`ddd43`,43,1,`ttt33`);
    $('#a1')[0].innerHTML=a;
  }
</script>
    <!-- Конец формирования товарного каталога -->
<script>
  var mass=new Array();
  var num=0;
  var total_2=0;
  
  function add(img,d,c,q,des)   
  {
    var blok=0;
    for(i=1;i<=num;++i)
    {
      if(mass[i].d==d)    	{      	mass[i].q=mass[i].q+1;   	blok=i;    	}
    }
    if(blok==0) mass[++num]=new mas(img,d,c,q,des);
    dis();
  }
  
  function cart(img,d,c,q,des)  {    $('#a2')[0].innerHTML='<img src="'+img+'" height=100><br>Название: '+d+'<br>Цена: <b>'+c+'руб</b><br>Описание: <i>'+des+'</i><br><b>[ <a onclick="parent.add(`'+img+'`,`'+d+'`,'+c+','+q+',`'+des+'`)" title="в корзину">в корзину</a> ]</b>'; }
  function mas(img,d,c,q,des)   {    this.img=img;    this.d=d;    this.c=c;    this.q=q;  this.des=des;   }
  function one(img,d,c,q,des)   {    return '<a onclick="parent.add(`'+img+'`,`'+d+'`,'+c+','+q+',`'+des+'`)" title="в корзину"><img src="'+img+'" height=20> '+d+' цена '+c+'руб</a> [ <a onclick="parent.cart(`'+img+'`,`'+d+'`,'+c+','+q+',`'+des+'`)" title="карточука товара" href="#">просмотр</a> ]<br>';  }
  function tt()  {    for(i=1;i<=num;++i)    {     mass[i].q=$('#name'+i).val();    }    dis();  }
  function tt2()
  {
    a='<form action=http://ya.ru>';
    for(i=1;i<=num;++i)
    {
    a=a+'<input type=hidden name="name'+i+'" value="'+mass[i].d+'-'+mass[i].c+'X'+mass[i].q+'~'+mass[i].c*mass[i].q+'">';  
    }
    a=a+'<input type=hidden name="total" value="'+total_2+'"><input placeholder="Имя" name="name"><br><input placeholder="E-mail" name="mail"><br><input placeholder="Телефон" name="tel"><br><input type=submit></form>';
	$('#a1')[0].innerHTML=a;
    $('#a2')[0].innerHTML='';
  }
  
  function null_f(ddd)
  {
    var sss={};
    var iii=-1;
    if(ddd==0)
    {
    $.each(mass,function(i,v){
       if(i!=0)
      {
            if(mass[i].q!=0) sss[++iii]=v; else num=num-1;
      }
      else
      {
        sss[++iii]=v;
      }
    });
    mass=sss;  
    }
    else
    {
    $.each(mass,function(i,v){
       if(i!=0)
      {
            if(i!=ddd) sss[++iii]=v; else num=num-1;
      }
      else
      {
        sss[++iii]=v;
      }
    }); 
      mass=sss;
      dis();
    }
  }
  
  function dis()
  {
    var aa='<b>КОРЗИНА</b><table border=1>';
    var total=0;
    null_f(0);
    for(i=1;i<=num;++i)
    {
      scrip=' onclick="parent.cart(`'+mass[i].img+'`,`'+mass[i].d+'`,'+mass[i].c+','+mass[i].q+',`'+mass[i].des+'`)" title="карточка товара" href="#"';
      aa=aa+'<tr><td><img src="'+mass[i].img+'" height=20></td><td><a href="javascript:add(`'+mass[i].img+'`,`'+mass[i].d+'`,'+mass[i].c+','+mass[i].q+')">'+mass[i].d+'</a></td><td>'+mass[i].c+'руб</td><td><input id="name'+i+'" value="'+mass[i].q+'" size=2></td><td>      <a '+scrip+'>просмотр</a>      </td><td><a href="javascript:null_f('+i+')" title="удалить">Х</a></td></tr>';
      total=total+mass[i].c*mass[i].q;
    }
    total_2=total;
    aa=aa+'<tr><td colspan="3">Итого:</td><td colspan="3">'+total+'руб</td></tr></table><input type=button value="Пересчет" onclick="tt()"><input type=button value="Оформить" onclick="tt2()">';
    $('#a2')[0].innerHTML=aa;
    $('#corz')[0].innerHTML='[ <a href="javascript:dis()">корзина '+num+' тов</a> ]';
  }
</script> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'></script>
Гость 08.05.2021 16:42

Гость 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];
}


Пример полноценной корзины
это на саму страницу корзины
var d = document,
cartCont = d.getElementById('cart_content'); // блок вывода данных корзины
var summ= d.getElementById('summ');
var sum=0, umn = 1;
// Функция кроссбраузерной установка обработчика событий
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 openCart(e){
  var cartData = getCartData(), // вытаскиваем все данные корзины
      totalItems = '';
       console.log(cartData);
  // если что-то в корзине уже есть, начинаем формировать данные для вывода
  if(cartData !== null){
    totalItems = '<table class="shopping_list"><tr><th>Del</th><th>Изображение</th><th>Наименование</th><th>Цена</th><th>Кол-во</th></tr>';
    for(var items in cartData){
                it = '<div class="quantity"><input type="text" class="ids" value="'+items+'"style="display:none"><button class="minus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/minus.svg" alt=""></button><input type="text" class="kv" name="name" value="'+Number(cartData[items][6])+'"><button class="plus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/plus.svg" alt=""></button></div>'
    for(var i = 0; i < cartData[items].length; i++){
       cartData[items][5] = Number(cartData[items][6])*Number(cartData[items][3]);
       delete cartData[items][4];
       cartData[items][4] = it;
      }
      totalItems += '<tr>';
      for(var i = 0; i < cartData[items].length-1; i++){
        totalItems += '<td>' + cartData[items][i] + '</td>';
      }
      totalItems += '</tr>';
    }
    totalItems += '</table>';
for(var items in cartData){
 sum += Number(cartData[items][5]);
}
 cartCont.innerHTML = totalItems;
 summ.innerHTML = sum;
 console.log(sum);
  } else {
    // если в корзине пусто, то сигнализируем об этом
    cartCont.innerHTML = 'В корзине пусто!';
  }
  return false;
}
//фунеция открытия корзины
addEvent(d.getElementById('checkout'), 'click', openCart);
//открыть корзину
d.getElementById('checkout').click();
/* Очистить корзину */
addEvent(d.getElementById('clear_cart'), 'click', function(e){
  localStorage.removeItem('cart');
  cartCont.innerHTML = 'Корзина очишена.';
});
$('.del').on('click', function(e) {
    		e.preventDefault();
    		var $this = $(this);
    		var $input = $this.closest('div').find('.ids');
    		var ids = parseInt($input.val());
    		// Получаем данные из LocalStorage
            function getCartData(){
               return JSON.parse(localStorage.getItem('cart'));
            }
            // Записываем данные в LocalStorage
            function setCartData(o){
             localStorage.setItem('cart', JSON.stringify(o));
             return false;
            }
            var cartData = getCartData(); // достали
            delete cartData[ids]; // удалили
            setCartData(cartData); // сохранили в локальном хранилище
             window.location.reload();
    	});
      $('.minus-btn').on('click', function(e) {
            var cartData = getCartData();
    		e.preventDefault();
    		var $this = $(this);
    		var $input = $this.closest('div').find('.kv');
    		var value = parseInt($input.val());
    		var $inputid = $this.closest('div').find('.ids');
    		var ids = parseInt($inputid.val());
    		if (value > 1) {
    			value = value - 1;
    		} else {
    			value = 0;
    		}
            it = '<div class="quantity"><input type="text" class="ids" value="'+ids+'"style="display:none"><button class="minus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/minus.svg" alt=""></button><input type="text" class="kv" name="name" value="'+value+'"><button class="plus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/plus.svg" alt=""></button></div>'
            $input.val(value);
            umn = value;
            delete cartData[ids][6];
            cartData[ids][6] = value;
            setCartData(cartData);
            window.location.reload();
    	});
    	$('.plus-btn').on('click', function(e) {
    	    var cartData = getCartData();
    		e.preventDefault();
    		var $this = $(this);
    		var $input = $this.closest('div').find('.kv');
    		var value = parseInt($input.val());
            var $inputid = $this.closest('div').find('.ids');
    		var ids = parseInt($inputid.val());
    		if (value < 100) {
      		value = value + 1;
    		} else {
    			value =100;
    		}
    		it = '<div class="quantity"><input type="text" class="ids" value="'+ids+'"style="display:none"><button class="minus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/minus.svg" alt=""></button><input type="text" class="kv" name="name" value="'+value+'"><button class="plus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/plus.svg" alt=""></button></div>'
            console.log(ids);
    		$input.val(value);
    		umn = value;
            delete cartData[ids][6];
            cartData[ids][6] = value;
            setCartData(cartData);
            window.location.reload();
    	});
// Получаем данные из LocalStorage
function getCartDataU(){
  return JSON.parse(localStorage.getItem('user'));
}
// Записываем данные в LocalStorage
function setCartDataU(o){
  localStorage.setItem('user', JSON.stringify(o));
  return false;
}
$( ".bu" ).click(function(){
      var cartData = getCartData() || {}; // получаем данные корзины или создаём новый объект, если данных еще нет
      var cartDataU = getCartDataU() || {};
      cartDataU[1] += sum;
       for(var items in cartData){
       cartDataU[1]+=cartData[items][2];
       }
      console.log(cartDataU);
 return false;
});



Страница с каталогом
var d = document,
itemBox = d.querySelectorAll('.item_box'); // блок каждого товара
// Функция кроссбраузерной установка обработчика событий
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;
}
// Добавляем товар в корзину
var pr = 1;
function addToCart(e){
  this.disabled = true; // блокируем кнопку на время операции с корзиной
  var cartData = getCartData() || {}, // получаем данные корзины или создаём новый объект, если данных еще нет
      parentBox = this.parentNode, // родительский элемент кнопки "Добавить в корзину"
      itemId = this.getAttribute('data-id'), // ID товара
      del = '<div><button class="del" type="button" name="button">x</button><input type="text" class="ids" value="'+itemId+'"style="display:none"><input type="text" name="titles" value="'+itemTitle+'"style="display:none"><input type="text" name="prices" value="'+itemPrice+'"style="display:none"></div>',
      itemTitle = parentBox.querySelector('.item_title').innerHTML, // название товара
      itemPrice = parentBox.querySelector('.item_price').innerHTML; // стоимость товара
      itemImg = parentBox.querySelector('.item_img').innerHTML;
      console.log('img'+itemImg);
      var img = '<div style="width:100%"><img class="imgp" style = "widht:50px" src="'+itemImg+'"  alt="Card image cap"></div>';
  if(cartData.hasOwnProperty(itemId)){ // если такой товар уже в корзине, то добавляем +1 к его количеству
     cartData[itemId][6] +=1;
     pr = Number(cartData[itemId][6]);
     delete cartData[itemId][4];
     it = '<div class="quantity"><input type="text" class="ids" value="'+itemId+'"style="display:none"><button class="minus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/minus.svg" alt=""></button><input type="text" class="kv" name="name" value="'+pr+'"><button class="plus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/plus.svg" alt=""></button></div>'
     cartData[itemId][4]=it;
     console.log(pr);
  } else { // если товара в корзине еще нет, то добавляем в объект
    it = '<div class="quantity"><input type="text" class="ids" value="'+itemId+'"style="display:none"><button class="minus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/minus.svg" alt=""></button><input type="text" class="kv" name="name" value="1"><button class="plus-btn" type="button" name="button"><img src="https://designmodo.com/demo/shopping-cart/plus.svg" alt=""></button></div>'
    cartData[itemId] = [del,img,itemTitle,itemPrice,it,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);
}
Страница 1 из 7  
Ваш комментарий:
X