Компонент 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',
]}Параметры
| Имя | По умолчанию | Описание |
|---|---|---|
| tpl | msMCDMiniCartRowTpl | чанк для каждого результата |
| tplOuter | msMCDMiniCartOuterTpl | чанк обёртка |
| jsUrl | путь до файла со скриптами | |
| img | картинка товара. Указывается так же как и в источнике файлов, например: 50x50 или small | |
| animate | false | Анимированное добавление в корзину. У изображения, в чанке вывода списка товаров необходимо добавить класс msmcd-img. Также изображение должно находится внутри тега form |
| dropdown | false | Раскрывать мини корзину при добавлении товара |
| changeCount | false | Дать возможность изменять количество товара в мини корзине |
Сниппет msMCDCount
Сниппет msMCDCount — для добавления товара, вместо кнопки выводит инпут с -/+. Вызов этого сниппета прописан в чанке msMCDProductsRowInputTpl.
Параметры
| Имя | По умолчанию | Описание |
|---|---|---|
| tpl | msMCDCountTpl | чанк для вывода инпута |
| jsUrl | путь до файла со скриптами |
Системные настройки
| Имя | По умолчанию | Описание |
|---|---|---|
| msmcd_fields_mini_cart | pagetitle | Поля, которые необходимо передать в мини корзину. Доступны все поля объектов:msProduct(modResource), msProductData, msVendor В мини-корзине есть всегда: id, price, count, options, weight, ctx, sum, img |
| msmcd_animate_mini_cart | false | Включает анимацию добавления товара |
| msmcd_dropdown_mini_cart | false | Открывать мини-корзину при добавлении товара |
Системные настройки можно переопределить параметрами сниппета.
Примеры
В комплекте с 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. Это необходимо для анимации добавления товара (полёт картинки).