При создании интернет-магазина одной из основных частей является корзина. Корзину лучше всего писать с использованием javascript, это позволяет пользователю контролировать и очищать ее без перегрузки страницы. Сейчас мы рассмотрим как сделать корзину с использованием jQuery. В этом нам помогут плагины к нему jQuery cookie и jGrowl.

Для начала пару слов о том, как и что будем делать. Т.к. нам надо сразу показывать количество товаров и полную сумму заказа, то изначально надо знать как количество определенного товара так и его цену.

Добавлять в корзину будем по ссылке, формат ссылки следующий:

<a id="good-2356-600" href="#" class="addCart">В корзину</a>

Вся суть заключается в class присвоенному ссылке и id. Мы будем отслеживать все клики по классу addCart, id состоит из следующих параметров: первый - good (значит что добавляем товар), второй - id товара в вашей базе, третий - цена товара за 1 шт, и четвертый - необязательный (в примере не указан) означает кол-во добавляемого товара. Количество можно например легко менять, если поставить рядом счетчик или выпадающий список. Но там уже потребуется дополнительный скрипт для изменения id, или же можно переписать основную функцию и количество отследить там. Но в примере все упрощено.

Отслеживать клик по ссылке мы будем так:

$('a.addCart').click(function() {
   data = $(this).attr('id').split('-');
   addCart(data[1], data[2], 1);
   return false;
  });

Как видно из примера мы отслеживаем id у ссылки и разбиваем его по символу "-" получая параметры.

Вот синтаксис функции добавления:

function addCart(p1, p2, p3){
if (!p3 || p3==0) {p3=1;}
msg.id = p1; // АйДи
msg.price = parseInt(p2); // Цена
msg.count = parseInt(p3); // Количество
var check = false;
var cnt = false;
var totalCountGoods = 0;
var totalprice = 0;
var goodsId = 0;
var basket = '';
$('#clearBasket').show();
$('#checkOut').show();
$('.hPb').show();
$('.hPe').hide();
basket = decodeURI($.cookie("basket"));
if (basket=='null') {basket = '';}
basketArray = basket.split(",");
for(var i=0; i<basketArray.length-1;i++) {
goodsId = basketArray[i].split(":");
if(goodsId[0]==msg.id) // ищем, не покупали ли мы этот товар ранее
{
check = true;
cnt = goodsId[1];
break;
}
}

if(!check) {
basket+= msg.id + ':' + msg.count + ':' + msg.price + ',';
} else {
$.jGrowl("Уже есть в корзине!");
}

if(!check) {
$.jGrowl("Добавлено!");
basketArray = basket.split(",");// Находим все товары
for(var i=0; i<basketArray.length-1;i++) {
goodsId = basketArray[i].split(":"); // Находим id товара, цену и количество
totalCountGoods+=parseInt(goodsId[1]);
totalprice+=parseInt(goodsId[1])*parseInt(goodsId[2]);
}

$('#totalGoods').text(totalCountGoods);
$('#totalPrice').text(totalprice);
$.cookie("totalPrice", totalprice, {path: "/"});
$.cookie("basket", basket, {path: "/"});
}
}

Теперь посмотрим HTML код корзины:

<div id="basket">
<table>
<tbody>
<tr class="hPb">
<td>Выбрано:</td>
<td><span id="totalGoods">0</span> товаров</td>
</tr>
<tr class="hPb">
<td>Сумма:</td>
<td><span id="totalPrice">0</span> руб.</td>
</tr>
<tr class="hPe">
<td colspan="2">Корзина пуста</td>
</tr>
<tr>
<td><a id="clearBasket" href="#">Очистить</a></td>
<td><a id="checkOut" href="/basket/">Оформить</a></td>
</tr>
</tbody>
</table>
</div>

// Прячем по умолчанию ссылки "Очистить" и "Оформить"
<style>
#clearBasket, #checkOut {
 display: none;
}
.hPb {
    display: none;
}
</style>

Теперь код, который вызывается при нажатии на ссылку "Очистить корзину"

		$('#clearBasket').click(function() {
			$.cookie("totalPrice", '', {path: "/"});
			$.cookie("basket", '', {path: "/"});
			$('#totalPrice').text('0');
			$('#totalGoods').text('0');
			$('.hPb').hide();
			$('.hPe').show();
			$(this).hide();
			$('#checkOut').hide();
			$.jGrowl("Корзина очищена!");		

			return false;
		});

Код не сложный, сперва покажется что там много лишнего, но такая навороченность оправдывается работой во всей браузерах, в том числе ie6.

Необходим еще один кусок кода. Ведь когда мы обновляем страницу или переходим на другую браузер не запоминает добавляли мы товары или нет в корзину, т.к. оно содержится в куки. Следующий код можно реализовать на PHP, но мы рассмотрим его на javascript.

Этот код лучше всего помещать в самом сверху всех наших функций:

$(document).ready(function(){
		msg = new Array();
		var basket = '';
		var totalprice = 0;
		var totalCountGoods = 0;
		if (!$.cookie("basket")) {$.cookie("basket", '', {path: "/"});}
		basket = decodeURI($.cookie("basket"));
		basketArray = basket.split(",");// Находим все товары
		for(var i=0; i<basketArray.length-1;i++) {
			goodsId = basketArray[i].split(":"); // Находим id товара, цену и количество
			totalCountGoods+=parseInt(goodsId[1]);
			totalprice+=parseInt(goodsId[1])*parseInt(goodsId[2]);
		}
		if (totalprice > 0) {
			$('#clearBasket').show();
			$('#checkOut').show();
			$('.hPb').show();
			$('.hPe').hide();
		}
		if (!totalprice) {totalprice = 0;}

		$('#totalPrice').text(totalprice);
		$('#totalGoods').text(totalCountGoods);
});

Вот собственно и все. Этого вполне достаточно для реализации корзины на jQuery. Оформление заказа так же легко пишется. Получаете строку из куки, разбиваете ее и по id уже узнаете и название товара и цену. Почему цену? Ведь цена у нас и так
имеется в куки. Это для безопасности, для того чтобы хитрые люди не вписывали в куки цену меньшую, чем она есть за товар.

Посмотреть пример в действии.

(Visited 7 645 times, 2 visits today)