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_id`	`0`	ID ресурса страницы сравнения
`compare_list_limit`	`100`	Максимальное количество товаров в одном списке
`compare_storage_handler`	`Compare\Storages\SessionStorage`	Класс хранилища, `Compare\Storages\SessionStorage` для хранения данных в сессии, `Compare\Storages\DbStorage` для хранения данных в БД
`compare_anonymous_ttl_days`	`30`	Срок хранения списков анонимных пользователей (только для `DbStorage`)

Заключение

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

handyShop

Утилиты

Настройки

Утилиты

События

Backend API