docs.modx.pro
  1. Компоненты
  2. Compare для MODX 3 - Документация

Compare ​

Compare — это компонент для сравнения товаров MiniShop3 (MODX 3) по характеристикам.

Compare пример работы

Возможности компонента ​

Возможности компонента:

  • Сравнение товаров MiniShop3 по основным характеристикам (поля ресурса, опции miniShop3, цена, производитель и т.д.)
  • Поддержка нескольких списков сравнения (например, Смартфоны и Холодильники)
  • Хранение списков сравнения в сессии пользователя (для простых магазинов) или в базе данных (для более технически сложных магазинов)
  • Добавление ссылки на сравнение в шапку сайта (по аналогии с мини-корзиной минишоп) с подсветкой кол-ва товаров в сравнении.
  • Отдельная страница для сравнения товаров, где все характеристики выводятся сводной таблицей.
  • Подсветка "лучшей" характеристики, например, минимальной цены, максимальной мощности и т.п.
  • Простая интеграция на сайт, минимальная нагрузка на фронт, чтобы скорость работы вашего сайта оставалась на высоком уровне

Особенность компонента ​

Для работы компонента вам не потребуется добавлять вызовы сниппетов на страницы сайта (кроме, собственно, страницы сравнения). Все, что нужно - это добавить html разметку, что позитивно сказывается на скорости работы сайта. Данные для работы компонента подгружаются отдельным запросом в момент отображения страницы на клиенте.

Интеграция на сайт ​

Важно: стандартные чанки и css файл адаптированы для Bootstrap 5. Если Вы его не используете у себя на сайте, то, вероятно, придется скорректировать html код и css стили для адаптации.

Шаг 1. Добавьте на страницы сайта скрипты и стили компонента:

html
<!-- css, добавляем в секцию <head> -->
<link rel="stylesheet" href="/assets/components/compare/css/compare.css">

<!-- js, внизу страницы, перед закрывающимся </body> -->
<script src="/assets/components/compare/js/compare.js" defer></script>

Шаг 2. Добавьте у товара кнопку для добавления в сравнение.

Вы можете использовать стандартный чанк tpl.Compare.Button или создать свой, основываясь на примерах ниже.

В указанных примерах вам нужно заполнить атрибут data-id (это id товара), при необходимости можете указать data-list (название списка сравнения). Проверьте, что используете [[*id]] на карточке товара и [[+id]] в списке товаров.

Пример #1, просто иконка:

html
<div class="compare compare--load" compare-root data-id="[[*id]]" data-list="Товары">
    <button class="compare__button" aria-label="Добавить в сравнение">
        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect y="8" width="3" height="10" fill="#A6A6A6"/>
            <rect x="7" width="3" height="18" fill="#A6A6A6"/>
            <rect x="14" y="4" width="3" height="14" fill="#A6A6A6"/>
        </svg>
    </button>
</div>

Пример #2, с текстом:

html
<div class="compare compare--load" compare-root data-id="[[*id]]" data-list="Товары">
    <button class="compare__button" type="button" aria-label="Добавить в сравнение">
        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect y="8" width="2" height="10" fill="#125190"></rect>
            <rect x="7" width="2" height="18" fill="#125190"></rect>
            <rect x="14" y="4" width="2" height="14" fill="#125190"></rect>
        </svg>
        <span class="compare__button-text" data-add="В сравнение" data-remove="В сравнении">В сравнение</span>
    </button>
    <a href="/compare?list=default" class="compare__go">Сравнить (<span class="compare__count"></span>)</a>
</div>

Обратите внимание на классы и аттрибуты, начинающиеся с compare, они обязательны для корректной работы компонента.

Шаг 3. Создайте отдельную страницу (например, /compare), где будет вызов сниппета [[!Compare]]:

[[!Compare?
    &fields=`price,vendor_id,size,color,weight,made_in,option_1,option_2`
    &priceFields=`price,old_price`
    &weightFields=`weight`
    &best=`price:min`
    &list=`default`
    &tpl=`tpl.Compare.Page`
]]

Описание параметров сниппета:

  • fields - список полей товара и опций (option_1, ...) для сравнения.
  • priceFields - поля с ценой, по умолчанию price,old_price. Значения будут отформатированы с символом валюты.
  • weightFields - поля с весом, по умолчанию weight. Значения будут отформатированы с единицами измерения.
  • best - список полей, для которых подсветить лучшие (min или max) значения (только числовые), например, для минимальной цены и максимальной мощности это price:min,power:max.
  • list - список сравнения, по-умолчанию пустое значение, отображается как Товары. Используйте разные списки, чтобы не сравнивать Холодильники и Телефоны.
  • tpl - шаблон с html разметкой, по умолчанию tpl.Compare.Page.

Шаг 4. Добавьте в шапку сайта ссылку на страницу сравнения (по аналогии с мини-корзиной miniShop2).

Вы можете использовать готовый чанк tpl.Compare.Mini или добавить HTML вручную:

html
<a href="/compare" class="compare-mini">
    Сравнить <i class="compare-mini__count"></i>
</a>

Здесь будет отображаться кол-во товаров в сравнении.

Когда в сравнении будут товары, то к ссылке добавится класс compare-mini--active, что позволит управлять её внешним видом (или видимостью).

К ссылке можете добавить параметр list для перехода на конкретный список сравнения: /compare?list=Товары.

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

КлючПо умолчаниюНазначение
compare_page_id0ID ресурса страницы сравнения
compare_list_limit100Максимальное количество товаров в одном списке
compare_storage_handlerCompare\Storages\SessionStorageКласс хранилища, Compare\Storages\SessionStorage для хранения данных в сессии, Compare\Storages\DbStorage для хранения данных в БД
compare_anonymous_ttl_days30Срок хранения списков анонимных пользователей (только для DbStorage)

Заключение ​

Обсуждение компонента, вопросы автору задавайте на сайте https://modx.pro или в поддержке https://modstore.pro (для купленных дополнений).