Корзинка для каталога товаров (minibasket.js)
Недавно очередной раз встала задача улучшить юзабилити каталога товаров. Полный функционал интернет-магазина заказчику был не нужен, а вот возможность для пользователей складывать товары в корзину оказалась крайне нужной. Еще бы, заказчик продает запчасти для авто и пользователю крайне неудобно по телефону перечислять весь список, пусть даже по артикулам.Решено внедрить промежуточный этап заказа — корзинку. Делать ее будем, естественно, на скриптах, чтобы не привязываться к cms (глядищь где еще пригодится).
На выходе получилась библиотечка, позволяющая прикрутить такую корзинку к любому сайту.Сразу ссылка на репозиторий.
Вообще корзинка работает сразу, как вы ее подключаете, единственное, что вам нужно — это уточнить селекторы: Верстка у всех разная, поэтому необходимо указать, какая кнопка инициирует добавление в корзинку, где содержится цена, где название и количество:
$(function (){ var minibasket = { selector: { item: '.mb-item', articul: '.art', price: '.mb-price .value', name: '.mb-name', count: '.mb-num', toBasketButton: '#tobasket span' }, … Сразу оговорюсь, что все селекторы (кроме item) должны быть вложены в блок с этим самым селектором item, ведь на странице может быть несколько товаров (например, мы имеем дело с прайсом).Также можно переопределить сообщения:
…
msg: {
success: «Ваш заказ принят.
Мы свяжемся с вами в ближайшее время!»,
invalidTel: 'Некорректный номер телефона',
re: 'Отправить повторно?',
wrongOrder: 'Вы не выбрали ни одного товара или не ввели номер телефона.',
empty: 'Пока пусто :('
},
…
Для большей кастомизации можно дописать свой собственный скрипт, который будет инициировать добавление в корзинку (метод add ()):
add: function (articul, price, name, num){
…
Если такой товар уже в корзинке, то увеличивается количество и цена. Дубль с таким же названием не создается.
Соответственно метод remove () удаляет товар из корзинки. В качестве параметра принимается DOM элемент товара в корзинке:
remove: function (obj){ obj.fadeOut ('slow', function (){ obj.remove (); minibasket.calc (); if (! minibasket.items.html ()) minibasket.items.html (minibasket.msg.empty); localStorage['accept'] = ''; minibasket.save (); }); },
Очищаем корзинку с помощью метода clear ():
clear: function (){ this.items.html (this.msg.empty); this.calc (); this.save (); }, Ну и на всякий случай есть метод save (), которым вы можете воспользоваться, если вам надо сохранить изменения, которые вы внесли в содержимое корзинки сторонними скриптами: var save = { tel: minibasket.tel.val (), items: minibasket.items.html () } localStorage['minibasket'] = JSON.stringify (save);
Метод init () по умолчанию вызывается сам.
