На очереди у нас сравнение товаров. В данной статье мы с вами рассмотрим, как реализовать сравнение товаров в MODx Revo с miniShop2. Для реализации поставленной задачи нам понадобится компонент Comparison из репозитория modstore.pro. Компонент платный, его стоимость 490 руб. на 14 апреля 2017 года. Вы можете написать свой сниппет обработчик для реализации сравнения на основе сессий пользователя. Я надеюсь, что мы обязательно рассмотрим написание своих сниппетов с помощью API MODx Revo. Пока будем реализовывать уже готовыми средствами.
После того, как мы скачали и установили компонент посмотрим наши сниппеты, которые идут в комплекте с компонентом:
- addComparison — сниппет добавления товара в список сравнения
- CompareList — сниппет вывода таблицы сравнения
- getComparison — cниппет для вывода ссылки на имеющееся сравнение товаров в любом месте
Итак, начинаем как всегда с чанков. Сделаем чанк добавления в сравнение (addComparisonTpl):
<div class="comparison comparison-[[+list]][[+added]][[+can_compare]]" data-id="[[+id]]" data-list="[[+list]]"> <a href="#" class="comparison-add comparison-link btn-add-to-compare " data-text="[[%comparison_updating_list]]">[[%comparison_add_to_list]]</a> <a href="#" class="comparison-remove comparison-link btn-add-to-compare" data-text="[[%comparison_updating_list]]">[[%comparison_remove_from_list]]</a> <a href="[[+link]]" class="comparison-go">[[%comparison_go_to_list]]</a> <span class="comparison-total">[[+total]]</span> </div> <!--comparison_can_compare can_compare--> <!--comparison_added added-->
Если вы внимательно посмотрите, то увидите, что отображение у нас будет отличаться от того, что на сайте. Такое бывает — не нужно пугаться. Далее вызовем сниппет addComparison в шаблоне товара:
[[!addComparison? &list_id=`20` &list=`mobile` &id=`[[*id]]` &tpl=`addComparisonTpl` ]]
Listid – это идентификатор страницы, на которой у нас будет выводиться таблица сравнения, мы ее создадим чуть позже
List – это наименование списка сравнения, там у меня стоит условие на обработку сравнения телефонов и плееров
Id – это идентификатор и товара, который будет добавлен в сравнение
Tpl – это чанк вывода, мы его создали чуть ранее
А в чанках listProductTpl, gridProductTpl и lookedProductTpl вызовем следующим образом:
[[!addComparison? &list_id=`20` &list=`mobile` &id=`[[+id]]` &tpl=`addComparisonTpl` ]]
Теперь нам необходимо создать шаблон, для нашего списка сравнения (сравнение товаров):
<!DOCTYPE html> <html lang="ru"> <head> [[$meta]] </head> <body> <div class="wrapper"> [[$headerInner]] <section id="checkout-page"> <div class="container"> <h1>[[*pagetitle]]</h1> [[!CompareList? &fields=`{"mobile":["price","article","vendor.name","option.memory","option.cpucore"]}` ]] </div> </section> [[$footer]] </div> [[$scripts]] </body> </html>
У меня в параметре fields прописана только одна конфигурация, для телефонов, вы можете расширить ее на плееры. Почитать, как составляется конфигурация, вы можете в документации к компоненту Comparison. У меня:
- vendor.name – наименование производителя
- price – цена
- article – артикул
- option.memory – опция “Объем памяти” (мы создавали ее в одном из прошлых уроков)
- option.cpucore — опция “Кол-во ядер процессора” (мы создавали ее в одном из прошлых уроков)
Далее нам необходимо создать ресурс с данным шаблоном. Не забудьте поменять id в чанках listProductTpl, gridProductTpl и lookedProductTpl и шаблоне товара на свой, если он отличается от 20.
Сравнение товаров у вас должно работать, проверьте. А нам осталось только вывести ссылку на сравнение в шапку сайта:
Для этого созданим чанк (getComparisonTpl):
<div class="compare comparison-[[+list]][[+added]][[+can_compare]]"> <a href="[[+link]]" class="comparison-go"><i class="fa fa-exchange"></i> [[%comparison_go_to_list]] <span class="value">([[+count]])</span> </a> </div> <!--comparison_can_compare can_compare--> <!--comparison_added added-->
И вызовем сниппет getComparison в чанках header и headerInner:
[[!getComparison? &list=`mobile` &tpl=`getComparisonTpl` ]]
Здесь, параметр list у меня настроен только на конфигурацию mobile. Для того, чтобы настроить на другие конфигурации, я бы написал для него сниппет обертку. Этим мы с вами займемся в заключительных частях курса.
Вот, в принципе, и все. Возможно, только стоит подкорректировать стили на странице сравнения.