Корзинка для каталога товаров (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() по умолчанию вызывается сам.
    Поделиться публикацией

    Похожие публикации

    Комментарии 22

      +1
      Очень не хватает демки. =/
        0
        Не стал давать ссылку, чтоб не сочли за рекламу:
        Вот пример
        Добавлять непосредственно на странице товара.
        Чтобы в каталоге тоже была видна корзинка — пожелание заказчика.

        Заказ формируется путем отправки письма на почту через обычный php mail()
          +4
          В примере ооочень не хватает нотификации, что что-то добавлено…
          Тыкаешь тыкаешь в кнопку купить… а ощущение что ничего не происходит.
            0
            Согласен, просто я собирал эту библиотечку из кучи костылей, этакого чудища Франкенштейна. Утерялся этот момент. Сегодня восстановлю эту функцию.
              0
              Восстановил. Теперь мигает.
              0
              В опере ведёт себя ужасно. Прыгающий скролл, например. Вместе с корзиной…
                0
                Которая версия?
                  0
                  12.15 )
                    0
                    изучу этот вопрос =(
                      0
                      того все колотил, даже в ИЕ проверил, работает везде одинаково, не могу отловить =(
              +1
              А что дробные числа не работают?
              Вообще конечно скрипту не место на хабре, как минимум потому что код очень плохой.
                0
                Что именно тебя расстроило в коде? Исправлю.
                  +2
                  Ну как сказать, это типичный код на jQuery, но не на JS. Сплошные селекторы, шаблоны в коде, отсутвие нормальной кастомизации и вообще вещь специфичная. Как костыль на среденький сайт ради легких денег может и сойдет. А как вещь которую можно использовать в своем проекте, или тем более показывать на хабре нет. По крайней мере я бы постыдился.
                    0
                    А что плохого в том, что код на JQuery?
                    Кастомизации особой не требует скрипт. 66 человек добавили в избранное, глядишь, пригодится им.
                      0
                      Ну я же говорю в качестве костыля, для сайта, на который тебе особо все равно, можно использовать. Для нормальных проектов — никогда.
                        0
                        Так уточни, что отделяет его от годности для нормального проекта. В следующий раз сделаю лучше.
                          +2
                          Отдаляет грамотная архитектура, ненужная совсем зависимость от jQuery. jQuery-лапша. Отсутствие гибкости. Шаблоны в коде. Нет поддержки дробных чисел, что странно. Сам скрипт не имеет никакого состояния, а итоговая сумма считается опять же jQuery селекторами. Ну не пишут так нормальный код и все.
                            0
                            О каких дробях речь? О количестве товара? Уверен, что нет, ведь половину шестерни нельзя купить. Оо
                              0
                              О цене, конечно же о цене.
                +1
                Имхо удобней было бы, сделать один селектор item, а у него определять свойства data-price, data-count data-name итд, чем плодить селекторы)
                  –1
                  Точно, затупил ппц. Благодарю!
                  0
                  Все, что написано в статье можно было бы умесить в readme.md проекта на гитхабе, это ж вроде документации.
                  Также демо-пример можно разместить на github.io, просто создав ветку gh-pages в вашем текущем репозитории.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое