ShoppingCart

Описание

Универсальный сниппет для создания корзины покупок в интернет-магазине. Так же сниппет можно использовать для временного хранения любых данных, например, функционал избранного и т.д. Данные сохраняются в базу данных, можно настроить время хранения. Управлять добавлением товаров в корзину и редактировать содержимое можно с помощью JavaScript функций (без зависимостей).

Пакет в репозитории MODX

Параметры сниппета shoppingCart

rowTpl - Название чанка строки содержимого корзины.
outerTpl - Название чанка обертки корзины.
emptyTpl - Название чанка пустой корзины.
action - Действие. Возможные значения: print - вывод содержимого корзины. Если не указано, производит действия, передаваемые в запросе.
currency - Валюта товара.
lifeTime - Время жизни данных корзины в БД в секундах. По умолчанию: 172800 (48 часов).
contentType - Название типа содержимого.

Пример HTML-кода формы товара для добавления в корзину:

modx

<div class="shk-item">
  <form id="shk-form" action="[[~6]]" method="post">
    <input type="hidden" name="item_id" value="[[*id]]">
    <!-- Поле "category_id" нужно только для Shopkeeper4 -->
    <input type="hidden" name="category_id" value="[[*parent]]">
    <div>
      <div class="my-3">
        [[*description]]
      </div>
      <div class="my-3">
        Цена:
        <span class="big shk-price">[[*price:numFormat]]</span>
        <span class="shk-currency">[[+shk4.currency]]</span>
      </div>
      <div class="my-3">
        <input type="number" class="form-control d-inline-block text-center mr-2" value="1" min="1" step="1" name="count" style="width: 100px;">
        <button type="submit" class="btn btn-primary" name="submit_button">
          В корзину
        </button>
      </div>
    </div>
  </form>
</div>

Пример вызова сниппета:

modx

[[!shoppingCart?
  &action=`print`
  &contentType=`shop`
  &rowTpl=`shoppingCart_rowTpl`
  &outerTpl=`shoppingCart_outerTpl`
  &emptyTpl=`shoppingCart_emptyTpl`
]]

Вызов сниппета с набором параметров (рекомендуется):

modx

[[!shoppingCart@shoppingCartFull]]

Плейсхолдеры в чанке "outerTpl"

[[+wrapper]] - HTML-код со списком товаров (чанк "rowTpl").
[[+priceTotal]] - Общая цена товаров в корзине.
[[+countTotal]] - Общее число товаров в корзине.
[[+countTotalUnique]] - Общее число уникальных товаров в корзине.
[[+currency]] - валюта.

Плейсхолдеры в чанке "rowTpl"

[[+item_id]] - Идентификатор товара.
[[+title]] - Название товара.
[[+name]] - Псевдоним (alias) товара.
[[+uri]] - URI адрес товара.
[[+count]] - Количество единиц одного товара.
[[+price]] - Цена.
[[+priceTotal]] - Общая цена, включая цену праметров товара.
[[+options.x]] - Любой параметр из массива "options". Пример для $options['color']: [[+options.color]].
[[+index]] - Индекс строки (от 0).
[[+num]] - Номер строки (от 1).

Плейсхолдеры, доступные в шаблоне, в котором вызывается сниппет "shoppingCart"

[[+shopping_cart.price_total]]
[[+shopping_cart.items_total]]
[[+shopping_cart.items_unique_total]]
[[+shopping_cart.delivery_price]]
[[+shopping_cart.delivery_name]]
[[+shopping_cart.ids]]

Плагин shoppingCart

Плагин удаляет устаревшие корзины из базы данных при очистке кэша, а также сохраняет ID пользователя в данные корзины при авторизации.

События: OnCacheUpdate, OnWebLogin.

Плагин shoppingCartShopkeeper4

Плагин, который формирует данные товара из базы данных MongoDB приложения Shopkeeper4. Также плагин используется для сохранения данных заказа в базу данных MongoDB. Для вывода списка товаров на странице каталога можно использовать сниппет Shopkeeper4.

События: OnShoppingCartAddProduct, OnShoppingCartCheckoutSave.

В форме товара должно быть скрытое поле с ID категории. Пример (страница товара):

modx

<input type="hidden" name="category_id" value="[[+page.parentId]]">

Пример поля категории в списке товаров:

modx

<input type="hidden" name="category_id" value="[[+page.parentId]]">

Пример поля категории в списке товаров:

modx

<input type="hidden" name="category_id" value="[[+parentId]]">

Плагин shoppingCartModResource

Плагин, который формирует данные товара из ресурса MODX. Для цены можно использовать дополнительное поле (TV). Если вы используете ресурсы (документы) MODX в качестве товаров, убедитесь, что данный плагин активирован.

События: OnShoppingCartAddProduct, OnShoppingCartCheckoutSave.

Параметры:

tvNamePrice - Имя доп. параметра цены товара. По умолчанию: "price".

Оформление заказа

Для создания формы оформления заказа и отправки писем с уведомлениями нужно использовать сниппет FormIt. Для вывода списка товаров заказа в письме и сохранения заказа в БД можно использовать сниппет "shoppingCart", указав его в качестве хука (hooks).

Пример вызова сниппета FormIt:

modx

[[!FormIt?
  &hooks=`spam,shoppingCart,FormItSaveForm,email,FormItAutoResponder,redirect`
  &submitVar=`action_order`
  &emailTpl=`shoppingCart_orderReport`
  &fiarTpl=`shoppingCart_orderReport`
  &emailSubject=`В интернет-магазине "[[++site_name]]" сделан новый заказ`
  &fiarSubject=`Вы сделали заказ в интернет-магазине "[[++site_name]]"`
  &emailFrom=`[[++emailsender]]`
  &emailTo=`[[++emailsender]]`
  &fiarReplyTo=`[[++emailsender]]`
  &fiarToField=`email`
  &redirectTo=`8`
  &validate=`address:required,fullname:required,email:email:required,phone:required,delivery:required,payment:required`
  &formFields=`fullname,address,phone,email,delivery,payment,message,orderOutputData`
  &fieldNames=`fullname==Ф.И.О,address==Адрес,phone==Телефон,email==Адрес эл. почты,delivery==Способ доставки,payment==Способ оплаты,message==Комментарий,orderOutputData==Состав заказа`
  &formName=`shop`
  &shoppingCartMailRowTpl=`shoppingCart_mailOrderRowTpl`
  &shoppingCartMailOuterTpl=`shoppingCart_mailOrderOuterTpl`
]]

В данном примере используется также хук "FormItSaveForm", который сохраняет данные формы для вывода в компоненте FormIt в административной части сайта. Если используете какой-то компонент для управления заказами, то этот хук можно убрать.

Хук "shoppingCart" вызывает событие "OnShoppingCartCheckoutSave" и плагин, который слушает это событие, может сохранить данные заказа и создать список товаров в заказе для вывода в письме.

Пример формы оформления заказа можно увидеть здесь. Пример шаблона письма тоже есть в комплекте сниппета ShoppingCart.

Параметры хука shoppingCart

shoppingCartMailRowTpl - Название чанка одного товара. По умолчанию: "shoppingCart_mailOrderRowTpl".
shoppingCartMailOuterTpl - Название чанка обертки списка товаров. По умолчанию: "shoppingCart_mailOrderOuterTpl".
shoppingCartMailContentType - Название типа контента корзины. По умолчанию: "shop".

JavaScript API

Скрипт shopping_cart.js можно использовать для управления корзиной покупок без перезагрузки страницы в браузере (Ajax).

Добавьте строку в ваш шаблон для подключения скрипта перед </head> или </body>:

modx

<script src="[[++base_url]]assets/components/shopping_cart/js/shopping_cart.js"></script>

Пример использования:

var shoppingCart;
document.addEventListener('DOMContentLoaded', function () {
  shoppingCart = new ShoppingCart({
    baseUrl: '[[++base_url]]',
    snippetPropertySetName: 'shoppingCartSmall',
    selector: '#shoppingCartSmallContainer',
    productFormSelector: '.shk-item form'
  });
});

Параметры класса ShoppingCart

baseUrl - Базовый URL сайта. По умолчанию: "/".
connectorUrl - URL коннектора. По умолчанию: "assets/components/shopping_cart/connector.php".
snippetPropertySetName - Название набора параметров сниппета shoppingCart. Вы можете указать названия чанков и т.п. в этом наборе параметров, чтобы получить HTML код обновленной корзины.
selector - Селектор элемента контейнера корзины. Внутри этого элемента должна быть форма (тег <form>). По умолчанию: "#shoppingCartContainer".
useNumberFormat - Использовать разбивку цены по разрядам. По умолчанию: true.
selectorPriceTotal - Селектор элементов с общей ценой товаров. Содержимое будет автоматически обновляться после обновления корзины. По умолчанию: ".shopping-cart-price-total".
selectorCountTotal - Селектор элементов с числом товаров в корзине. По умолчанию: ".shopping-cart-count-total".
selectorCountUniqueTotal - Селектор элементов с числом уникальных товаров в корзине. По умолчанию: ".shopping-cart-count-unique-total".
selectorDeclension - Селектор элемента со строкой (например: товар/товара/товаров), которую нужно склонять по падежам в зависимости от числа товаров. По умолчанию: ".shopping-cart-declension".
productFormSelector - Селектор формы с кнопкой "Добавить в корзину". Форма будет отправляться без перезагрузки страницы в браузере.

События

load - После загрузки данных корзины.
formSubmitBefore - Перед отправкой данных формы.
requestBefore - Перед отправкой запроса.
requestAfter - После отправки запроса.

Пример использования событий:

shoppingCart
  .addEventListener('formSubmitBefore', function(e) { // До отправки данных формы
    var buttonEl = e.detail.element.querySelector('button[type="submit"]');
    if (buttonEl) {
      buttonEl.setAttribute('disabled', ''); // Блокируем кнопку
    }
  })
  .addEventListener('load', function(e) { // После получения ответа корзины покупок
    if (e.detail.element) {
      var buttonEl = e.detail.element.querySelector('button[type="submit"]');
      if (buttonEl) {
        buttonEl.removeAttribute('disabled'); // Убираем блокировку кнопки
      }
    }
  });

handyShop

Утилиты

ShoppingCart ​

Описание ​

Параметры сниппета shoppingCart ​

ShoppingCart

Описание

Параметры сниппета shoppingCart