Когда писал предыдущую статейку на эту тему, которая преследовала цель всего лишь показать абстрактный пример реализации корзины покупателя, то не думал, что она породит такое количество вопросов и просьб, посыпавшихся и в самом блоге, и на мою почту, и т.д. Собственно, поэтому и решил написать этот плагинчик "jqCart", но хочу сразу подчеркнуть несколько моментов:
- Хоть код и оформлен в виде плагина, но плагином его можно назвать с большой натяжкой. Да и вообще, в этом направлении, на мой взгляд, сделать плагин полностью универсальным - достаточно сложно;
- Писа́лся плагин на скорую руку, поэтому достаточно сыроват, хотя и вполне рабочий;
- На данный момент, код не документированный;
- Планирую ли я его дорабатывать? Да, но при достаточном количестве свободного времени;
Итак, для работы плагина требуется библиотека jQuery >= 1.8, которая должна быть подключена до подключения самого плагина. Работать должно во всех современных браузера и, по идее, даже в IE8. Проблема для старых "осликов", может заключаться только в применяемых CSS-свойствах и версии jQuery (напомню, что jQuery 2.x - не поддерживает Internet Explorer 6, 7, и 8). Данные передаются на сервер с помощью Ajax и поэтому, я крайне рекомендую использовать кодировку для файлов UTF-8 без BOM!
Подключение:
<link href="css/jqcart.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jqcart.min.js"></script>
Использование:
$(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-id - ID товара
- data-title - Наименование товара
- data-price - Цена товара
- data-img - URL фото товара (опционально)
Все значения вышеуказанных data-атрибутов, принимают участие при формировании окна корзины. Можно добавлять дополнительные data-атрибуты, значения которых будут отправлены с остальными данными в обработчик. Ключи в полученном массиве на сервере, будут соответствовать имени атрибута после "data-", т.е. значение атрибута "data-somevalue", будет в массиве под ключем "somevalue" Тег для кнопки и её расположение на странице - значения не имеет.
Пример:
<button class="add_item" data-id="7" data-title="Bugatti Veyron Super Sports" data-price="200" data-img="http://site.com/img/photo.png">Добавить в корзину</button>
В архиве найдете пример обработчика (handler.php) с подготовкой и отправкой письма на почту. В конце обработчика, обязательно должен быть ответ клиенту в формате JSON.
<?php
// какой-то код обработки заказа...
// Ответ на запрос
// !для версии PHP < 5.4, используйте традиционный синтаксис инициализации массивов array() вместо короткого []
$response = [
'errors' => !$send_ok,
'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'
];
exit( json_encode($response) );
Где переменная $send_ok - булевое значение (true/false), в зависимости от результата обработки заказа. Если это будет отправка на почту, то можно так:
<?php
$send_ok = mail($to, $subject, $body, implode("\r\n", $headers));
Ахтунг! В обработчике я не делал фильтрацию данных, поэтому внимательно и тщательно их обрабатывайте перед использованием, а особенно, если вы собираетесь записывать данные в БД!
Версия 1.1.0
- Данные распределены по разным data-атрибутам кнопки
- Добавлена возможность отображения фото товара в корзине
- Добавлен параметр currency для вывода в корзине валюты рядом со стоимостью и ценой
- Добавлена возможность передавать на сервер дополнительные данные, которые берутся из пользовательских data-атрибутов кнопки
Версия 1.1.1
- Добавлена опция visibleLabel. Показывать ярлык при пустой корзине
- Добавлена опция openByAdding. Автоматически открывать корзину при добавлении товара
- Добавлена кнопка вывода заказа на печать
Версия 1.1.2
- Исправлен расчет сумм с плавающей точкой
Просьба описывать в комментариях найденные вами ошибки/баги. По мере возможностей, я буду их править, НО глобальными изменениями или дополнениями, буду заниматься, как уже говорил, при наличии свободного времени