Compare - сравнение товаров MODX 2 + miniShop2

Привет!

Сегодня выложил в github свою наработку с одного из сайтов — дополнение под названием Compare, которое умеет сравнивать товары.





Все доступно по ссылке:
github.com/createit-ru/modx-compare


Готового пакета нет (ибо есть платный аналог с поддержкой и т.п.), разбирайтесь сами как хотите)))

Написано лично мной, с нуля, распространяется как есть, приветствуются PR и развитие.

Что умеет:
— кнопочку около товара «Добавить в избранное»;
— мини-сравнение с кол-вом товаров в шапке сайта (как мини-корзина ms2);
— в комплекте сниппет и чанк для использования на странице «Сравнение»;
— сравнение по полям msProductData, опциям товара, поддержка vendor_id;
— подсветка лучших параметров (например минимальная цена, максимальная мощность и т.п.).

Требования
PHP 7.4+, MODX 2, miniShop2, pdoTools + Fenom.

Сборка пакета



Для сборки пакета скачайте исходный код в каталог
Extras/compare/
в корне вашего сайта и запустите скрипт
Extras/compare/_build/build.php
компонент будет собран и установлен автоматически.

Установка на сайт



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

<!-- в <head> -->
<link rel="stylesheet" href="/assets/components/compare/css/compare.css">

<!-- перед </body> -->
<script src="/assets/components/compare/js/compare.js" defer></script>

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

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

<div class="compare compare--load" compare-root data-id="[[*id]]" data-list="default">
    <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="default">
    <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?
	&fields=`price,vendor,size,color,weight,made_in,option_1,option_2`
        &best=`price:min`
	&list=`default`
	&tpl=`compare.Page`
]]

Описание параметров:
* fields — список полей товара и опций (option_1, ...) для сравнения.
* best — список полей, для которых подсветить лучшие (min или max) значения (только числовые), например, минимальная цена.
* list — список сравнения, по-умолчанию default. Используйте разные списки, чтобы не сравнивать холодильники с телефонами.
* tpl — шаблон с html разметкой.

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

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

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

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

В заключение


Компонент бесплатный, но если вам понравился и пригодился — можно поблагодарить финансово по ссылке:



Ваши благодарности ускорят внедрение новых функций, увеличат мою мотивацию, заставят внимательнее прислушиваться к пожеланиям!
Наумов Алексей
15 августа 2025, 12:37
modx.pro
5
446
+11

Комментарии: 0

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
0