- Корзина заказов
Модуль корзины интернет-магазина на jQueryиз песочницы
jQuery*, JavaScript*
При разработке интернет-магазинов мне часто приходилось посредством javascript (а конкретнее его фреймворком — jQuery) проделывать некоторые повторяющиеся от проекта к проекту вещи. Например, добавление товаров в корзину, обновление информации о количестве товаров и общей сумме на странице, удаление товаров из корзины по одному, изменение их количества и полная очистка всех товаров из корзины. И все это, разумеется, без перезагрузки страницы.
И я пришел к выводу, что нужно писать код так, что бы потом его с легкостью можно было использовать в следующих проектах.
Итак пишем модуль для работы с корзиной интернет-магазина с использованием jQuery.
Оговорюсь, что я опубликую только javascript-код, серверную часть трогать не буду, обозначу так же, какими данными будет обмениваться клиент с сервером.
Определяемся с методами:
(function($){
$.Cart = {
init :function(settings){
// инициализация модуля
},
add :function(context){
// добавление одного наименования товара в корзину в количестве 1шт.
},
get :function(){
// обновление информации о количестве товаров в корзине и общей сумме
},
count :function(context){
// изменение количества товаров одного и того же наименования в корзине
},
del :function(context){
// удаление одного наименования из корзины
},
clear :function(){
// полная очистка корзины
},
showMessage :function(message){
// показ сообщения при добавлении товара
}
}
})(jQuery);
Инициализация:
Что нам нужно сделать в инициализации?
Необходимо переданные в метод init настройки, должным образом обработать (совместить с параметрами по умолчанию) и применить их, а так же повесить на элементы заданные в настройках соответствующие обработчики событий.
Определяемся с параметрами по умолчанию.
var defaults = {
content :'.content',// селектор главного блока на странице корзины
count :'.prod span font',// в блоке .prod на странице количество товаров в корзине
summ :'.summ span font',// в блоке .prod общая сумма
add :'.tocart',// селектор элемента, при нажатии на который товар будет добавлен в корзину
addattr :'name',// атрибут элемента, содержащий ID товара
counta :'.carts .actions .count input',// поле содержащее количество товаров одного наименования в корзине
countattr :'name',// атрибут поля, содержащий ID товара
countvattr :'value',// атрибут поля, содержащий количество товаров
del :'.carts .actions .delete input',// селектор элемента, при нажатии на который 1 наименование товара будет удалено из корзины
delattr :'name',// атрибут элемента, содержащий ID товара
clear :'.cartclear',// селектор элемента, при нажатии на который корзина будет очищена
topcart :'.topcart',// селектор ссылки ведущей в корзину
urladd :'/cart/add/',// url добавления товара в корзину
urlget :'/cart/get/',// url информации о количестве товаров в корзине и общей сумме
urlcart :'/cart/',// url непосредственно самой корзины
urlcount :'/cart/count/',// url обновления количества товаров одного наименования
urlclear :'/cart/clear/',// url полной очистки корзины
urldel :'/cart/del/',// url удаления одного наименования товара из корзины
type_message :'flash',// тип сообщения при добавлении товара в корзину
time_message :3000,// время показа сообщения
interval : 10000 // интервал времени, через который будет обновляться блок с информацией о количестве товаров в корзине и общей сумме
};
Смешиваем параметры указанные при инициализации с параметрами по умолчанию и применяем их
$.extend(defaults, settings);
this.settings = defaults;
Делаем обновление блока с информацией о количестве товаров в корзине и общей сумме, вешаем обработчики событий на заданные элементы и возвращаем сущность объекта (может пригодится).
this.get(); // обновляем блок
setInterval(function(){
$.Cart.get(); // обновляем блок через заданный в параметрах интервал
},this.settings.interval);
$(this.settings.add).click(function(){
$.Cart.add(this);// добавляем товар в корзину при клике на элемент settings.add, в качестве параметра передаем сам элемент
});
$(this.settings.counta).live('blur',function(){
$.Cart.count(this);// при потере фокуса поля, содержащего количество товаров одного наименования в корзине, передаем информацию на сервер
});
$(this.settings.del).live('click',function(){
$.Cart.del(this);// удаляем наименование товара при нажатии на элемент "удалить"
});
$(this.settings.clear).live('click',function(){
$.Cart.clear(); // очищаем корзину
});
return this;
Добавление одного наименования товара в корзину в количестве 1шт.
Метод add, получает параметр context (элемент, на который произошел клик) и отправляет на сервер данные.
$.ajax({
url : $.Cart.settings.urladd, // куда отправляем данные
type :'post',// метод
dataType:'json',// тип данных, которые получаем
data : {id : $(context).attr($.Cart.settings.addattr)}, // данные, которые отправляем (id добавляемого товара)
success :function(data){// при получении ответа
if(data.count && data.summ || data.count===0&& data.summ===0) {// проверяем есть ли в нем количество и общая сумма для того, что бы сразу
$($.Cart.settings.count).html(data.count); // обновить количество товаров в блоке
$($.Cart.settings.summ).html(data.summ); // обновить общую сумму в блоке
if(data.count>0)// если товары есть в корзине, то
$($.Cart.settings.topcart).find('a').attr('href', $.Cart.settings.urlcart);// делаем ссылку на корзину активной
else // если корзина пуста
$($.Cart.settings.topcart).find('a').attr('href','javascript:void(0);');// делаем ссылку неактивной
$.Cart.showMessage('<p>'+data.message+'</p>'+$($.Cart.settings.topcart).html());// показываем сообщение
}
});
