Недавно очередной раз встала задача улучшить юзабилити каталога товаров. Полный функционал интернет-магазина заказчику был не нужен, а вот возможность для пользователей складывать товары в корзину оказалась крайне нужной. Еще бы, заказчик продает запчасти для авто и пользователю крайне неудобно по телефону перечислять весь список, пусть даже по артикулам.
Решено внедрить промежуточный этап заказа — корзинку. Делать ее будем, естественно, на скриптах, чтобы не привязываться к 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() по умолчанию вызывается сам.
ссылка на оригинал статьи http://habrahabr.ru/post/254357/
Добавить комментарий