Корзина

Работа с корзиной

Для работы корзины нужно подключить jquery.cookie.js путь к файлу /includes/js/jquery.cookie.js. Вы можете скопировать его в папку шаблона и после подключить так будет удобней. Сам шаблон корзины shipping_cart.tpl лежит почти там же путь /includes/shipping_cart.tpl его тоже лучше скопировать в папку с шаблоном сайта. В шаблоне внутри указан style который для удобства будет лучше перенести в общий файл со стилями но решать вам, обработка событий javascript находиться в самом низу файла. Страничку с корзиной удобней всего сделать через статическую страницу указав ей нужный шаблон например shipping_cart.tpl, хотя шаблон вы можете переименовать как хотите.

Обработчик добавления товара в корзину

		$('.add-to-cart').click(function(){
			var keyProduct = 'product_'+$(this).attr('data-product'),
				keyCount   = 'countProduct';
			$(this).text('');
			$(this).addClass('icon-check');
			if(!$.cookie(keyProduct)){
				$.cookie(keyProduct, 1, { path: '/' });
				if(!$.cookie(keyCount)){
					$.cookie(keyCount, 1, { path: '/' });
				}else {
					$.cookie(keyCount, (parseInt($.cookie(keyCount))+1), { path: '/' });
				}
				$('.shipping-cart__counter').html($.cookie(keyCount));
			}
		});
	

Элемент с классом add-to-cart

<a data-product="552" class="btn btn-blue add-to-cart">В корзину</a>

data-product - уникальный идентификатор товара (порядковый номер)

Разбираем обработчик по частям

Перемнные [keyProduct - идентификатор продукта, keyCount - количество товаров в корзине] их лучше не менять поскольку потом прийдеться переписывать настройки во всех местах.

$(this).text(''); 

$(this).addClass('icon-check');  

Данное действие заменяет слово [В корзину] и добавляет на элемент класс icon-check это создано чтобы пользователь мог видеть какой товар он добавил в корзину на текущей странице. К примеру на класс icon-check можно применить с помощью стиля картинку информирующею что товар уже добавлен в корзину.

$('.shipping-cart__counter').html($.cookie(keyCount));

Добавляет номерок количества товаров в корзине к элементу с классом shipping-cart__counter

Обязательно подключить инициализаторы кнопок

	$('.shipping__total-wrap .btn').click(function(){
            $('.shipping').hide();
            $('.shipping-form').show();
            return false;
        });
        $('#back.back').click(function(){
            $('.shipping').show();
            $('.shipping-form').hide();
            return false;
        });