Корзина для интернет-магазина на фронте или Пишем модульный javascript. Настройка страницы корзины в WooCommerce Приступаем к разработке

Которая преследовала цель всего лишь показать абстрактный пример реализации корзины покупателя, то не думал, что она породит такое количество вопросов и просьб, посыпавшихся и в самом блоге, и на мою почту, и т.д. Собственно, поэтому и решил написать этот плагинчик "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-id - ID товара

data-title - Наименование товара

data-price - Цена товара

data-img - URL фото товара (опционально )

Все значения вышеуказанных data-атрибутов, принимают участие при формировании окна корзины. Можно добавлять дополнительные data-атрибуты, значения которых будут отправлены с остальными данными в обработчик. Ключи в полученном массиве на сервере, будут соответствовать имени атрибута после "data-", т.е. значение атрибута "data-somevalue", будет в массиве под ключем "somevalue" Тег для кнопки и её расположение на странице - значения не имеет.

Добавить в корзину

В архиве найдете пример обработчика (handler.php ) с подготовкой и отправкой письма на почту. В конце обработчика, обязательно должен быть ответ клиенту в формате JSON.

Тематические материалы: