Корзинка для каталога товаров (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: "Ваш заказ принят.<br>Мы свяжемся с вами в ближайшее время!",
			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() по умолчанию вызывается сам.

Автор: seokirill

Источник