Которая преследовала цель всего лишь показать абстрактный пример реализации корзины покупателя, то не думал, что она породит такое количество вопросов и просьб, посыпавшихся и в самом блоге, и на мою почту, и т.д. Собственно, поэтому и решил написать этот плагинчик "jqCart ", но хочу сразу подчеркнуть несколько моментов:
Итак, для работы плагина требуется библиотека jQuery >= 1.8, которая должна быть подключена до подключения самого плагина. Работать должно во всех современных браузера и, по идее, даже в IE8. Проблема для старых "осликов", может заключаться только в применяемых CSS-свойствах и версии jQuery (напомню, что jQuery 2.x - не поддерживает Internet Explorer 6, 7, и 8 ). Данные передаются на сервер с помощью Ajax и поэтому, я крайне рекомендую использовать кодировку для файлов UTF-8 без BOM !
Подключение:
Использование:
$(function() { "use strict"; // инициализация плагина $.jqCart({ buttons: ".add_item", // селектор кнопок, аля "Добавить в корзину" handler: "/php/handler.php", // путь к обработчику visibleLabel: false, // показывать/скрывать ярлык при пустой корзине (по умолчанию: false) openByAdding: false, // автоматически открывать корзину при добавлении товара (по умолчанию: false) currency: "€", // валюта: строковое значение, мнемоники (по умолчанию "$") cartLabel: ".label-place" /* селектор элемента, где будет размещен ярлык, он же - "кнопка" для открытия корзины */ }); // дополнительные методы $.jqCart("openCart"); // открыть корзину $.jqCart("clearCart"); // очистить корзину });
В кнопках ("Добавить в корзину" ), должены быть прописаны следующие data-атрибуты:
Все значения вышеуказанных data-атрибутов, принимают участие при формировании окна корзины. Можно добавлять дополнительные data-атрибуты, значения которых будут отправлены с остальными данными в обработчик. Ключи в полученном массиве на сервере, будут соответствовать имени атрибута после "data-", т.е. значение атрибута "data-somevalue", будет в массиве под ключем "somevalue" Тег для кнопки и её расположение на странице - значения не имеет.
Добавить в корзину
В архиве найдете пример обработчика (handler.php ) с подготовкой и отправкой письма на почту. В конце обработчика, обязательно должен быть ответ клиенту в формате JSON.
шт.
Оформить заказ
< div class = "smalcart" > < strong > Товароввкорзине: < / strong > шт. < br / > < a href = "" > Оформитьзаказ< / a > < / div > |
В данном случае используется содержимое массива $smal_cart. Он станет доступен в основном шаблоне интернет-магазина несколько позже. Для этого потребуется провести еще ряд определенных действий.
2. Чтобы корзина обладала простым и гармоничным видом, добавьте в файл style.css следующие стили:
#header .smalcart { float: right; height: 55px; padding: 10px; padding-left: 15px; margin: 10px; border: 1px solid gray; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #E6DEEA; }
#header .smalcart { float : right ; height : 55px ; padding : 10px ; padding - left : 15px ; margin : 10px ; border : 1px solid gray ; border - radius : 10px ; Moz - border - radius : 10px ; Webkit - border - radius : 10px ; background : #E6DEEA; |
После этого уже можете взглянуть на визуальные изменения во внешнем виде интернет-магазина.
3. Теперь нам с вами нужно углубиться в системную структуру корзины. В связи с тем, что модуль корзины не является отдельной страницей, дополнительный контроллер под нее можно не создавать. Внешний вид уже отображен в шаблоне, поэтому разработку views не делаем. Ограничимся лишь проработкой параметра model.
Для этого зайдите в папку application, а затем в models. После этого создайте файл с названием cart.php. В него добавляете следующее содержание:
class Application_Models_Cart { function addToCard($id, $count=1) { $_SESSION[‘cart’][$id]=$_SESSION["cart"][$id]+$count;return true; } function delFromCart($id, $count=1){} function clearCart(){} }
class Application_Models_Cart function addToCard ($ id , $ count = 1 ) $ _SESSION [ ‘cart ’] [ $ id ] = $ _SESSION [ "cart" ] [ $ id ] + $ count ; return true ; function delFromCart ($ id , $ count = 1 ) { } function clearCart () { } |
Эта модель позволить обновлять данные, содержащиеся в содержимом модуля корзины. Пока что хватит лишь функции добавления товара, однако, на будущее необходимо разработать специальные интерфейсы, чтобы была возможность удалить определенный товар или же очистить корзину целиком.
Информация о товарах в корзине будет содержаться в массиве $_SESSION. Он представляет собой ассоциативный массив, в котором ключами являются ID продукции, а значением - количество товаров, добавленных в корзину. Стратегия минимализма позволит упростить процесс передачи информации в cookies.
Таким образом, мы получили готовую базу Application_Models_Cart. Теперь необходимо ее активировать.
4. Перед этим давайте еще внесем изменения в атрибут href для более правильной работы модуля:
