new

Compare

Сравнения товаров MiniShop3 (MODX 3) по характеристикам
Документация
Документация
modx3 сравнение характеристики товары miniShop3 опции
Alexey Naumov
Автор дополнения
Alexey Naumov
Пакетов
9
Закачек
7 073
Обычно отвечает в течение суток
Автор дополнения
Alexey Naumov Alexey Naumov
Пакетов
9
Закачек
7 073
Обычно отвечает в течение суток

FileMan

Прикрепление файлов к ресурсам MODX 3

msPriceList

Управление прайс-листами minishop2

easyComm

Создание модулей и разделов отзывов, комментариев, вопросов и ответов.
Версия 3.3.1-pl
Дата выпуска 28.04.2026
Загрузки 7
Просмотры 452
Внимание, этот компонент требует PHP 8.2 или выше!
Внимание, этот компонент требует MODX 3 или выше.
Compare — это компонент для сравнения товаров MiniShop3 (MODX 3) по характеристикам.



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

Покупка и установка

Вы можете купить компонент в магазине ModStore и установить его через Менеджер пакетов вашего сайта.

Ознакомьтесь с разделом Помощь, чтобы узнать больше о том, как купить платное дополнение.

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

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

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

<!-- 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
(название списка сравнения).

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

<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, с текстом:

<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" class="compare__go">Сравнить (<span class="compare__count"></span>)</a>
</div>


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

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

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


Описание параметров:
  • fields — список полей товара и опций (option_1, ...) для сравнения.
  • priceFields — поля с ценой, будут отформатированы согласно настройкам MiniShop3.
  • weightFields — поля с весом, будут отформатированы согласно настройкам MiniShop3.
  • best — список полей, для которых подсветить лучшие (min или max) значения (только числовые), например, минимальная цена.
  • includeOptions — если включён, все опции сравниваемых товаров автоматически добавляются в таблицу сравнения, без необходимости перечислять их в fields.
    groupOptions — если включён, опции в таблице сравнения группируются по категориям (из настроек MiniShop3). Перед каждой группой выводится заголовок с её названием. Порядок групп соответствует порядку категорий в административной панели.
    list — список сравнения, по умолчанию пустое значение, выводится как «Товары». Используйте разные списки, чтобы не сравнивать холодильники с телефонами. Остерегайтесь длинных названий.
    tpl — шаблон с html разметкой.


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

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

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

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

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

3.3.1-pl (2026-04-28)

  • Fixed sorting of option groups

3.3.0-pl (2026-04-24)

  • Added new properties "includeOptions" and "groupOptions" for the Compare snippet

3.2.0-pl (2025-02-25)

  • Added tabs with comparison lists
  • Merging anonymous user lists during OnWebLogin

3.1.0-pl (2025-02-23)

  • Ability to store comparison lists in the database (\Compare\Storages\DbStorage)

3.0.0-pl (2025-02-10)

  • First release

Последние обсуждения в сообществе MODX.pro