Корзина покупателя на JavaScript и LocalStorage

Создание корзины на JavaScript и LocalStorage,

Корзина покупателя на JavaScript и LocalStorage

» » Сообщение:

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

Немного о LocalStorage для тех, кто с этим способом хранения данных на стороне клиента не знаком.
Объем хранимой информации в LocalStorage по сравнению с cookie значительно выше: около 5Мб(!) против 4Кб.
К тому же, в LocalStorage данные хранятся в зашифрованном виде.

Однако, как и в cookie, так и в LocalStorage, мы можем записывать только строковые данные.
Если нужно добавить массив или объект, то его можно предварительно преобразовать в JSON-строку (JSON.stringify(obj)), а после получения данных из LocalStorage - производим обратное преобразование (JSON.parse(json_string)).
Работать с LocalStorage не просто, а очень просто.
Вот его основные методы:

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

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

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.
Ничего сверхъестественного тут нет и большую часть, я прокомментирую прямо в коде:

script Код: Выделить всё Развернуть
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, то получили бы примерно следующее:

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, LocalStorage работает только на стороне клиента.
Кто-то может и записать это в минусы LS, но я не вижу проблемы, т.к. есть достаточно способов превратить минус в плюсы.
Легко и непринужденно, мы можем отправить данные Ajax-запросом, а это гораздо приятней посетителю, т.к. его не перебрасывает на другую страницу, экономит время и трафик, что немаловажно, если пользователь зашёл с мобильного устройства или скорость подключения не такая высокая.


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

Если вы используете jQuery, то есть плагин jquery.cookie.
Очень прост в использовании. И по сути, вам нужно будет только заменить функции getCartData() и setCartData().

script Код: Выделить всё Развернуть
$.cookie.json = true; // для автоматического преобразования в объект
function getCartData() {
    return $.cookie('cart');
}
function setCartData(o) {
    $.cookie('cart', o);
    return false;
}

Вариант на jQuery

script Код: Выделить всё Развернуть
$(function() {
  // блок вывода данных корзины
  var cartCont = $('#cart_content');
   $.cookie.json = true;
  // Получаем данные из LocalStorage
  function getCartData() {
         return $.cookie('cart');
   }
  // Записываем данные в LocalStorage
  function setCartData(o) {
         $.cookie('cart', o);
      return false;
   }
    // Функция добавления товара в корзину
  function addToCart() {
      var $that = $(this),
        cartData = getCartData() || {}, // получаем данные корзины или создаём новый объект, если данных еще нет
        parentBox = $that.parent(), // родительский элемент кнопки Добавить в корзину
        itemId = $that.data('id'), // ID товара
        itemTitle = $('.item_title', parentBox).text(), // название товара
        itemPrice = $('.item_price', parentBox).text(); // стоимость товара
    $that.prop('disabled', true); // блокируем кнопку на время операции с корзиной
    if (cartData.hasOwnProperty(itemId)) { // если такой товар уже в корзине, то добавляем +1 к его количеству
      cartData[itemId][2] += 1;
    } else { // если товара в корзине еще нет, то добавляем в объект
      cartData[itemId] = [itemTitle, itemPrice, 1];
    }
    // Обновляем данные в LocalStorage
    if (!setCartData(cartData)) {
      $that.prop('disabled', false); // разблокируем кнопку после обновления LS
      cartCont.text('Товар добавлен в корзину.');
      setTimeout(function() {
        cartCont.text('Продолжить покупки...');
      }, 1000);
      }
      return false;
   }
    // Открываем корзину со списком добавленных товаров
  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.html(totalItems);
      } else {
        // если в корзине пусто, то сигнализируем об этом
        cartCont.text('В корзине пусто!');
      }
      return false;
    }
    /* Добавляем товар в корзину */
  $('.add_item').on('click', addToCart);
  /* Открыть корзину */
  $('#checkout').on('click', openCart);
  /* Очистить корзину */
  $('#clear_cart').on('click', function(e) {
    //[anchor=http://likbezz.ru/viewtopic.php?t=1472|Корзина покупателя на JavaScript и LocalStorage]localStorage[/anchor].removeItem('cart');
      $.removeCookie('cart');
    cartCont.text('Корзина очишена.');
  });
});

© incode.pro

Вложения
Зарегистрируйтесь, чтобы скачать вложения.
cookie, localstorage, storage, json



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0648JavaScript. Логические операторы и ...
Сообщение от: Admin
0634Колонки одинаковой высоты - лучшее ...
Сообщение от: Admin
151431Re: Рейтинг материалов +/- (плюс/ми...
Сообщение от: kinouser
0847Javascript Math.random(), аналог PH...
Сообщение от: Admin
3900BBComplex - Классы для каскадных та...
Сообщение от: Admin