* MaxSite CMS
* (c) https://max-3000.com/
*
* Корзина
*
Как использовать функционал корзины на своем сайте. По этой инструкции вы можете создать демо-вариант за 3 шага.
1. Подключение корзины выполняется в файле custom/my-template.php. Уберите коррментарий чтобы получилось так:
if ($fn = mso_fe('custom/cart/cart.php')) require_once($fn);
2. Создайте страницу товара. На одной странице может быть любое количество товаров. Структура страниц и рубрик — произвольная. Данные товара оформляются в data-атрибутах html-тэга, например кнопки BUTTON (см. инструкцию ниже).
В тексте записи разместите этот код. Это 4 товара, блок для вывода сообщения и адрес (укажите свой) на страницу просмотра корзины.
<button class="cart-add-item" type="button" data-id="x01" data-price="100" data-name="Куртка" data-maxcount="1" data-desc="Куртка детская, зеленая, размер XL">Куртка <span class="cart-item-count" data-id="x01"></span></button> <button class="cart-add-item" type="button" data-id="x02" data-price="200" data-name="Шапка" data-maxcount="2">Шапка <span class="cart-item-count" data-id="x02"></span></button> <button class="cart-add-item" type="button" data-id="x03" data-price="300" data-name="Кроссовки" data-maxcount="3">Кроссовки <span class="cart-item-count" data-id="x03"></span></button> <button class="cart-add-item" type="button" data-id="x04" data-price="400" data-name="Джинсы" data-maxcount="10">Джинсы <span class="cart-item-count" data-id="x04"></span></button>
<div class="cart-message t-center"></div>
<a href="http://сайт/page/cart">Посмотреть корзину</a> (<span class="cart-all-count"></span>)
3. Создайте страницу корзины, например «ВашСайт/page/cart». На ней будет отображаться состояние корзины, а также форма заказа. Разместите следующий код:
<a href="#" class="cart-show-noedit">Корзина</a> | <a href="#" class="cart-show">Редактировать</a> | <a href="#" class="cart-clear">Очистить корзину</a> | <span class="cart-all-count"></span>
<div class="cart-message t-center"></div>
<div class="cart-table-items"></div>
<a href="#" class="cart-show-order">Оформить заказ</a>
<form id="cart-form-order" class="b-hide">
<div class="cart-form-order-hidden"></div>
<div class="cart-form-order-table"></div>
<h4>Укажите дополнительную информацию</h4>
<div class="mar10-tb"><label>Ваше имя: <input type="text" name="cart[form][name]" required></label></div>
<div class="mar10-tb"><label>Ваш email: <input type="email" name="cart[form][email]" required></label></div>
<div class="mar10-tb"><label>Способ оплаты: <input type="text" name="cart[form][pay]" required></label></div>
<button class="mar20-tb" type="submit">Отправить</button> <a href="#" class="cart-form-order-cancel mar20-l">или отменить</a>
</form>
<div id="cart-form-order-result"></div>
Всё, корзина готова!
--------------------------------
Технические описания
====================
1. Добавление товара в корзину осуществляется с помощью произвольного html-тэга, например BUTTON. Параметры товара задаются в предопределенных data-атрибутах. CSS-класс кнопки должен быть «cart-add-item». Например:
<button class="cart-add-item" type="button" data-id="x01" data-price="100" data-name="Куртка" data-maxcount="1" data-desc="Куртка детская, зеленая, размер XL">Куртка</button>
data-id="x01" — код товара
data-price="100" — стоимость (только число)
data-name="Куртка" — название товара в корзине
data-maxcount="1" — максимальное колво товаров в корзине
data-desc="Куртка детская, зеленая, размер XL" — описание товара для корзины
Если необходимо вывести количество для этого товара, то используется дополнительный тэг с классом cart-item-count и data-атрибутом, где указывается код товара, например:
<span class="cart-item-count" data-id="x01"></span>
Атрибуты data желательно указывать все. Если нет обязательных атрибутов, добавление в корзину будет невозможным (выскочит сообщение об ошибке).
Верстка cart-add-item и cart-item-count произвольная. Например можно разместить span внутри button.
2. Вывод Корзины возможен на любой странице сайта, включая и страницу товара, виджета, компонента и т.п.
Сама корзина выводится в блоке cart-table-items:
<div class="cart-table-items"></div>
Блок cart-message служит для вывода различных сообщений.
<div class="cart-message t-center"></div>
Для вывода информации в блоке корзины используются кнопки/ссылки с классами («кнопки действия»):
<a href="#" class="cart-show-noedit">Корзина</a> — показать товары без редактирования
<a href="#" class="cart-show">Редактировать</a> — показать товары с редактирование колва
<a href="#" class="cart-clear">Очистить корзину</a> — очистить корзину
<span class="cart-all-count"></span> — вывести всего наименований товаров в корзине
3. Для вызова формы оформления заказа используется ссылка/кнопка cart-show-order
<a href="#" class="cart-show-order">Оформить заказ</a>
которая показывает форму с id="cart-form-order". По умолчанию форма скрыта (класс b-hide).
Сама форма содержит служебные блоки cart-form-order-hidden и cart-form-order-table, где выводится информация и формируются нужные input-элементы формы.
Завершает форму submit-кнопка, по которой происходит отправка данных на сервер. Для отмены/скрытия формы используется кнопка/ссылка с классом cart-form-order-cancel.
В форме можно разместить любые дополнительные поля. Их имена (name) должны строиться по шаблону «cart[form][ПОЛЕ]».
<h4>Укажите дополнительную информацию</h4>
<div class="mar10-tb"><label>Ваше имя: <input type="text" name="cart[form][name]" required></label></div>
<div class="mar10-tb"><label>Ваш email: <input type="email" name="cart[form][email]" required></label></div>
<div class="mar10-tb"><label>Способ оплаты: <input type="text" name="cart[form][pay]" required></label></div>
Оформление формы, полей, кнопок и т.п. произвольное.
Результат ответа сервера выводится в блоке id="cart-form-order-result". Он должен располагаться вне блока формы.
<div id="cart-form-order-result"></div>
4. Ядро корзины состоит из трёх файлов:
cart.js — основной функционал. Его не следует редактировать.
cart-my.js — настраиваемая часть
cart-ajax.php — обработка аякс-запроса формы заказа
cart.php — подключаемый к шаблону файл.
5. Файл cart-my.js содержит часть кода, которая отвечает за настройки корзины, html-разметку, различные опции, а также описывает действия для кнопок/ссылок.
6. Файл cart-ajax.php является обработчиком формы заказа. Вы можете его отредактировать под свою задачу.
7. Данные корзины хранятся в браузере пользователя в localStorage. Это гарантирует его полную сохранность после закрытия браузера, обновления страниц и т.п. К тому же localStorage обладает очень большим объемом, что позволяет сохранять неограниченное количество информации из Корзины. Данные на сервер отправляются только при нажатии кнопки Отправить в форме заказа. До этого момента сервер ничего не знает о действиях пользователя.
# end of file