Skip to content
  1. Компоненты
  2. msMCD

Компонент msMCD (mini cart dynamic) для miniShop2

Компонент msMCD (mini cart dynamic) для miniShop2 — это рефакторинг старого компонента msMiniCartDynamic с рядом улучшений и предназначен для обновления мини корзины на лету — динамически. msMiniCartDynamic поддерживаться больше не будет.

Теперь не нужно самостоятельно добавлять скрипты на страницу, msMCD делает это сам. Все чанки переписаны на Fenom и Bootstrap4.

Возможности msMCD

  • Динамическое обновление мини-корзины
  • Добавление товара в корзину как кнопкой, так и ручным вводом, а также кнопками -/+. Опционально
  • Анимация добавления товара (полёт картинки). Опционально
  • Возможность выбора полей для передачи в мини-корзину. Опционально
  • Удаление выбранного товара
  • Работа с разными контекстами

Сниппет msMCDMiniCart

Сниппет msMCDMiniCart — выводит текущую мини-корзину

После установки компонента, вместо стандартного сниппета msMiniCart воспользуйтесь msMCDMiniCart, который идёт с компонентом msMCD.

modx
[[!msMCDMiniCart?
  &img=`50x50`
]]
fenom
{'!msMCDMiniCart' | snippet: [
  'img' => '50x50',
]}

Параметры

ИмяПо умолчаниюОписание
tplmsMCDMiniCartRowTplчанк для каждого результата
tplOutermsMCDMiniCartOuterTplчанк обёртка
jsUrlпуть до файла со скриптами
imgкартинка товара. Указывается так же как и в источнике файлов, например: 50x50 или small
animatefalseАнимированное добавление в корзину. У изображения, в чанке вывода списка товаров необходимо добавить класс msmcd-img. Также изображение должно находится внутри тега form
dropdownfalseРаскрывать мини корзину при добавлении товара
changeCountfalseДать возможность изменять количество товара в мини корзине

Сниппет msMCDCount

Сниппет msMCDCount — для добавления товара, вместо кнопки выводит инпут с -/+. Вызов этого сниппета прописан в чанке msMCDProductsRowInputTpl.

Параметры

ИмяПо умолчаниюОписание
tplmsMCDCountTplчанк для вывода инпута
jsUrlпуть до файла со скриптами

Системные настройки

ИмяПо умолчаниюОписание
msmcd_fields_mini_cartpagetitleПоля, которые необходимо передать в мини корзину. Доступны все поля объектов:msProduct(modResource), msProductData, msVendor В мини-корзине есть всегда: id, price, count, options, weight, ctx, sum, img
msmcd_animate_mini_cartfalseВключает анимацию добавления товара
msmcd_dropdown_mini_cartfalseОткрывать мини-корзину при добавлении товара

Системные настройки можно переопределить параметрами сниппета.

Примеры

В комплекте с msMCDM идут два примера чанков для вывода товаров: msMCDProductsRowTpl и msMCDProductsRowInputTpl. Например для добавления товара в корзину кнопкой, вызов сниппета msProducts будет таким:

modx
[[!msProducts?
  &tpl=`msMCDProductsRowTpl`
]]
fenom
{'!msProducts' | snippet: [
  'tpl' => 'msMCDProductsRowTpl',
]}

Соответственно для добавления товара кнопками/ручным вводом таким:

modx
[[!msProducts?
  &tpl=`msMCDProductsRowInputTpl`
]]
fenom
{'!msProducts' | snippet: [
  'tpl' => 'msMCDProductsRowInputTpl',
]}

Эти чанки служат только для примера, и обратите внимание, что картинка товара находится в теге form и класс msmcd-img. Это необходимо для анимации добавления товара (полёт картинки).