Сравнение товаров в miniShop2

На очереди у нас сравнение товаров. В данной статье мы с вами рассмотрим, как реализовать сравнение товаров в 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.

Сравнение товаров у вас должно работать, проверьте. А нам осталось только вывести ссылку на сравнение в шапку сайта:

Сравнение товаров на MODx Revo miniShop2

Для этого созданим чанк (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. Для того, чтобы настроить на другие конфигурации, я бы написал для него сниппет обертку. Этим мы с вами займемся в заключительных частях курса.

Вот, в принципе, и все. Возможно, только стоит подкорректировать стили на странице сравнения. 

Сравнение товаров в miniShop2

0 Число голосов: 4
4
5
1
4

Комментарии ()

  1. Михаил 26 февраля 2018, 13:39 # 0
    «Здесь, параметр list у меня настроен только на конфигурацию mobile. Для того, чтобы настроить на другие конфигурации, я бы написал для него сниппет обертку. Этим мы с вами займемся в заключительных частях курса.»Добрый день. Уж очень интересует возможность градации сравнения товаров по категориям. Могли бы подсказать как оформить этот «сниппет обертку»? Заранее благодарен
    1. Андрей 08 марта 2019, 23:59 # 0
      Тоже интересно, так как не работает на другие товары, а мобилок у меня нет, хм…
      1. игорь 16 апреля 2019, 21:09 # 0
        когда же наконец про сниппет обертку
        1. Николай 11 июня 2021, 17:43 # 0
          настроить на другие конфигурации, я бы написал для него сниппет обертку. Очень, Очень нужно:) Нет ли уже этого сниппета?
    2. Андрей 09 марта 2019, 00:54 # 0
      Думал если поменять mobile на default, то заработает, но всё равно пишет:«Не могу найти массив полей сравнения для набора „default“блин, всё получилось, а здесь затык(как решить, может пдскажет кто?
      1. Андрей 09 марта 2019, 02:09 # 0
        Заработало! Ура!
        1. Alex 17 марта 2019, 21:54 # 0
          Артем, а для того чтобы вывести сравнение не товаров, а других сущностей, условно задач, статей, сервисов… тоже нужно функционал интернет магазина?
          1. Петя 03 апреля 2021, 01:13 # 0
            Вы бы лучше у разработчика спросили — у Ильи) Артем думаю этого не знает)
            1. Петропавловский Артем 03 апреля 2021, 09:00 # 0
              Разработчик компонента не Илья, а Василий Наумкин. Илья сейчас просто его поддерживает. И, отвечая на предыдущий вопрос: функционал интернет-магазина не нужен. Вообще функциональность данного компонента оставляет желать лучшего, я чаще пишу свои контроллеры для сравнения.

          Наши клиенты

          Многие компании уже доверяют нам. Будьте в их числе!

          Хотите реализовать проект?

          Контакты

          Напишите нам - мы расскажем вам много интересного!


          Пермь, ул. Крупской 34, офис 510