Compare snippet v2.0

Сниппет-сравнялка для вашего сайта.


Готовое(почти) решение для вашего каталога\интернет-магазина.
Добавил класс, тыцнул на кнопочку и оп-ля — сравнялка готова =)

Новая версия старого сниппета. Не такой «дикий», и на много удобней старого.
Гибкая настройка каждого элемента сравнения, мультиязычность, поддержка горизонтальной\вертикальной верстки, удобная настройка списка тв полей.

Документация пока тут
Потом залью в docs.

Преимущеста
  • Быстрая установка и настройка.
  • Поддержка blang.
  • Поддержка горизонтальной(таблица) и вертикальной (блоки) верстки.
  • Удобная настройка списка тв полей для сравнения с возможностю задавать свои поля для разных категорий.
  • Группировка тв по категориям.
  • Подстановка значений из девера документов.
  • Возможность скрывать одинаковые параметры.


Чтобы сравнение работало в фронтенде досточно для кнопки или ссылки доабавить клас «to-compare» и атрибут «data-id» с id товара.
Пример:
<a class="to-compare" data-id="5">Добавить в сравнение</a>

Для елемента с количеством товаров в сравнении необходимо задать class=«compare-count»
Пример:
Количество товаров в сравнении
<div class="compare-count"></div>

После загрузки страницы скрипт пропишет клас «active» для елементов, которые уже есть в списке сравнения.

Вывода списка товаров

Для вывода списка товаров необходимо на странице вызвать сниппет compare

Конфигурация
Задать список тв полей для сравнения можно несколькими способами:
  • Перечислив их в параметре tvList
  • Задать в родительском документе в параметре multiTV «compare»
  • Задать в параметре «tvCategory» id категории тв параметров, через запятую

Пример:
[!compare?
    &showUniqueValues=`0` //выводим все свойста
    &layoutType=`vertical` // вертикальная верстка
    &ownerTpl=`@CODE:<ul class="compare-list js-compare-slider">[+wrapper+]</ul>`
    &blockOuter=`@CODE:<li class="compare-list__item">[+item+][+tvs+]</li>`
    &itemTpl=`tpl.compareItem`
    paramBlockOuter=`@CODE:<ul class="compare-list__descr">[+wrapper+]</ul>`
    paramTpl=`@CODE:<li class="compare-list__descr-item">
    <span class="compare-list__descr-title">[+name+]</span>
    <span class="compare-list__descr-info">[+value+]</span>
</li>`
!]

3 комментария

avatar

Успел протестировать. Все красиво, удобно, понятно
Комментарий отредактирован 2017-05-06 21:37:11 пользователем DemonAstaroth
avatar
а как правильно установить?
avatar
Добрый день! А можно Ваш плагин использовать, например, на сайте недвижимости, для сравнения объектов?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.