Решено внедрить промежуточный этап заказа — корзинку. Делать ее будем, естественно, на скриптах, чтобы не привязываться к 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() по умолчанию вызывается сам.
Комментарии (22)
Evgeny42
31.03.2015 00:48+1А что дробные числа не работают?
Вообще конечно скрипту не место на хабре, как минимум потому что код очень плохой.
seokirill Автор
31.03.2015 00:53Что именно тебя расстроило в коде? Исправлю.
Evgeny42
31.03.2015 01:17+2Ну как сказать, это типичный код на jQuery, но не на JS. Сплошные селекторы, шаблоны в коде, отсутвие нормальной кастомизации и вообще вещь специфичная. Как костыль на среденький сайт ради легких денег может и сойдет. А как вещь которую можно использовать в своем проекте, или тем более показывать на хабре нет. По крайней мере я бы постыдился.
seokirill Автор
31.03.2015 01:31А что плохого в том, что код на JQuery?
Кастомизации особой не требует скрипт. 66 человек добавили в избранное, глядишь, пригодится им.Evgeny42
31.03.2015 01:33Ну я же говорю в качестве костыля, для сайта, на который тебе особо все равно, можно использовать. Для нормальных проектов — никогда.
seokirill Автор
31.03.2015 01:45Так уточни, что отделяет его от годности для нормального проекта. В следующий раз сделаю лучше.
Evgeny42
31.03.2015 10:15+2Отдаляет грамотная архитектура, ненужная совсем зависимость от jQuery. jQuery-лапша. Отсутствие гибкости. Шаблоны в коде. Нет поддержки дробных чисел, что странно. Сам скрипт не имеет никакого состояния, а итоговая сумма считается опять же jQuery селекторами. Ну не пишут так нормальный код и все.
antirek
02.04.2015 10:29Все, что написано в статье можно было бы умесить в readme.md проекта на гитхабе, это ж вроде документации.
Также демо-пример можно разместить на github.io, просто создав ветку gh-pages в вашем текущем репозитории.
Rastishka
Очень не хватает демки. =/
seokirill Автор
Не стал давать ссылку, чтоб не сочли за рекламу:
Вот пример
Добавлять непосредственно на странице товара.
Чтобы в каталоге тоже была видна корзинка — пожелание заказчика.
Заказ формируется путем отправки письма на почту через обычный php mail()
t0H
В примере ооочень не хватает нотификации, что что-то добавлено…
Тыкаешь тыкаешь в кнопку купить… а ощущение что ничего не происходит.
seokirill Автор
Согласен, просто я собирал эту библиотечку из кучи костылей, этакого чудища Франкенштейна. Утерялся этот момент. Сегодня восстановлю эту функцию.
seokirill Автор
Восстановил. Теперь мигает.
stifff
В опере ведёт себя ужасно. Прыгающий скролл, например. Вместе с корзиной…
seokirill Автор
Которая версия?
stifff
12.15 )
seokirill Автор
изучу этот вопрос =(
seokirill Автор
того все колотил, даже в ИЕ проверил, работает везде одинаково, не могу отловить =(