Сниппет-сравнялка для вашего сайта.
Готовое(
почти) решение для вашего каталога\интернет-магазина.
Добавил класс, тыцнул на кнопочку и оп-ля — сравнялка готова =)
Новая версия старого сниппета. Не такой «дикий», и на много удобней старого.
Гибкая настройка каждого элемента сравнения, мультиязычность, поддержка горизонтальной\вертикальной верстки, удобная настройка списка тв полей.
Документация пока тут
Потом залью в 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>`
!]
