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

06.08.2023

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