Реализация тегов в MODx Revo - tagLister

Сейчас мы с вами реализуем облако тегов, с помощью компонента “tagLister”. Для этого нам необходимо скачать и установить два дополнения:

  • getResources (на основе него работает поиск по тегам)
  • tagLister (собственно, сам компонент для реализации тегов)

Когда мы инсталлируем компоненты, нам нужно создать дополнительное поле “tags”, где будут содержаться наши теги:

  • Имя – tags
  • Подпись – Теги
  • Описание – (можно не запонять)
  • Категория – элементы страниц
  • Параметры ввода – авто-метка
  • Параметры вывода – по умолчанию
  • Доступно для шаблонов – Пост

Важно, чтобы TV-поле называлось именно “tags”, иначе придется переопределять предустановки компонента:

Теги на MODx Revo - tagLister

Теперь я более подробно расскажу про сам компонент. В составе него идет 3 сниппета:

  • getResourcesTag – данный сниппет ищет статьи, помеченные определенным тегом. Работает на основе getResources, следовательно, наследует его параметры.
  • tagLister – сниппет для вывода облака тегов.
  • toLinks – сниппет, который преобразовывает теги статьи в ссылки на страницы, на которых у нас будет подборка статей, помеченных определенным тегом.

Чтобы приступить, нам необходимо создать шаблон “Поиск по тегам” со следующим кодом:

<html lang="ru">
  <head>
	[[$meta]]
  </head>  
  <body>
	<div class="wrapper">
	  [[$headerInner]]
	  <main id="blog" class="inner-bottom-xs">
		<div class="container">
		  <div class="row">
			<div class="col-md-9">
			  <div class="posts sidemeta">
				[[!getResourcesTag?
				   &element=`pdoResources`
				   &elementClass=`modSnippet`
				   &grSnippet=`pdoPage`
				   &tpl=`postTpl`
				   &hideContainers=`1`
				   &pageVarKey=`page`
				   &parents=`2`
				   &includeTVs=`image,tags`
				   &includeContent=`1` 
				 ]]
			  </div>
			  <hr/>
			  [[!+page.nav]]
			</div>			
			<div class="col-md-3">
			  [[$blogSidebar]]
			</div>
		  </div>		  
		</div>
	  </main>
	  [[$footer]]
	</div>
	[[$scripts]]
  </body>
</html>

В параметре «tplPageWrapper» нужно указать чанк, найдете его на тестовом сайте. Я использовал вместо getResources – pdoResources, чтобы выборка происходила быстрее. В видео я объясню, что значит каждый из параметров и вы сможете посмотреть это в официальной документации.

Итак, у нас готов шаблон. Теперь в корне сайта нам необходимо создать ресурс – “Поиск по тегам”:

Теги на MODx Revo - tagLister

На данном ресурсе у на будут выводиться релевантные выбранному тегу статьи. Отлично!

Теперь вспомните: где у нас выводятся теги? Правильно! В шаблоне “Пост” и в чанке “postTpl”. Сейчас мы с вами выведем теги для статьи, но прежде нужно добавить в нашу тестовую статью какие-нибудь “тестовые теги” (указываем через запятую, сохраняем):

Теги на MODx Revo - tagLister

В шаблоне теги у нас выводятся в двух местах, причем их стиль отображения отличается. Если в первом случае, нам достаточно просто вызвать сниппет toLinks (шаблон ссылка – по умолчанию), то во втором случае, нужно создать чанк “tagRowTpl”:

<span><a href="[[+url]]" class="[[+cls]]">[[+item]]</a></span>

И в шаблоне нужно прописать в следующих местах вызовы toLinks:

Теги на MODx Revo - tagLister

Вызов первый:

[[!tolinks? 
&items=`[[*tags]]` 
&target=`5`
]]

Вызов второй:

[[!tolinks? 
&items=`[[*tags]]` 
&tpl=`tagRowTpl` 
&target=`5`
]]

Заметили параметр target? Он как раз ведет на тот ресурс, который мы создали. Теперь нам нужно сделать аналогичный вызов в чанке postTpl:

Теги на MODx Revo - tagLister

Помните разницу? Здесь мы вызываем TV с префиксом и знаком “+”. Также не забудьте включить TV-параметр в выборку в шаблоне “Блог”:

Теги на MODx Revo - tagLister

Ну, что? Проверим? Покликайте по тегам на странице статьи или блога. Работает! Можете создать другую статью и сделать отличные от созданной раннее тегами.

Теперь выведем облако тегов в сайдбаре. Я не буду управлять их размером, выведу 15 популярных:

Теги на MODx Revo - tagLister

Вызов tagLister:

[[!tagLister? 
&tv=`tags` 
&target=`5`
&limit=`15`
&tpl=`tagListerTpl`
&allTpl=`tagListerTpl`
]]

Код чанка “tagListerTpl”:

	<a href="[[~[[+target]]]]?[[+tagVar]]=[[+tag]]">[[+tag]]</a>

Все! У нас получилось! Теги реализованы. Согласитесь, что все очень быстро и просто!

Реализация тегов в MODx Revo - tagLister

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

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

  1. Константин 21 марта 2017, 09:25 # 0
    Название чанка tagListerTpl? Или tagTpl?
    1. Петропавловский Артем 23 марта 2017, 15:10 # 0
      Посмотрите на тестовом сайте
    2. Константин 21 марта 2017, 10:42 # 0
      Как реализовать счетчик просмотров?
      1. Петропавловский Артем 23 марта 2017, 15:11 # 0
        С помощью плагина самописного или компонента HitsPage
      2. Михаил 23 мая 2017, 21:29 # 0
        Если не устанавливается tagLister в MODx — Можно снипеты и чанки создать самому и содержимое скопировать с уже установленых, скажем с Вашего тестового сайта. Работать будет?
        1. Александр 17 октября 2017, 15:48 # 0
          Если есть ещё одно другое облако тегов, нужно добавить параметр tagKey в сниппет getResourcesTag
          1. Вадим 13 ноября 2017, 18:25(Комментарий был изменён) # 0
            Если задать &limit=`2` сниппету getResourcesTag, то не работает пагинация. http://prntscr.com/h9x4ukВот вызов сниппета http://prntscr.com/h9x5ch
            1. Rezetka 30 ноября 2017, 14:45(Комментарий был изменён) # 0
              Не зависимо по какому тегу переходить в результате выводит все темы у которых разные теги.
              [[!pdoPage?
              &element=`pdoResources`
              &parents=`3,4,5,6,7`
              &tpl=`news6.tpl`
              &hideContainers=`1`
              &includeTVs=`ImagesNews,tags`
              &limit=`10`
              &tplPageWrapper=`@INLINE <ul class="pagination blog-pagination">[[+prev]][[+pages]][[+next]]</ul>`
              ]]
              [[!+page.nav]]
              если делать так, то не чего не выводит
              &parents=`[[*id]]`
              Сами теги вывожу так
              [[tolinks? &items=`[[*tags]]` &target=`39` &tpl=`linkTpl` &inputDelim=`,` &outputDelim=` `]]
              Если делаю так, то пагинация выходит массивом
              [[!getResourcesTag?
              &element=`pdoResources`
              &grSnippet=`pdoPage`
              &tpl=`news6.tpl`
              &hideContainers=`1`
              &pageVarKey=`page`
              &parents=`3,4,5,6,7`
              &includeTVs=`ImagesNews,tags`
              &includeContent=`1`
              ]]
              Array
              (
                  [page] => 1
                  [pageNo] => 1
                  [href] => tegi?tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&amp;key=tags
              )
              Array
              (
                  [page] => 2
                  [pageNo] => 2
                  [href] => tegi?page=2&amp;tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&amp;key=tags
              )
              Array
              (
                  [page] => 3
                  [pageNo] => 3
                  [href] => tegi?page=3&amp;tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&amp;key=tags
              )
              Array
              (
                  [page] => 4
                  [pageNo] => 4
                  [href] => tegi?page=4&amp;tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&amp;key=tags
              )
              Array
              (
                  [page] => 5
                  [pageNo] => 5
                  [href] => tegi?page=5&amp;tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&amp;key=tags
              )
              
              Что делать? Кто сталкивался?
              1. Илья 05 января 2018, 13:48 # 0
                Здравствуйте. Теги выводятся нормально. Но вот возник вопрос — в ресурсе «Вывод результатов по тегам» можно ли сделать описание тега?То есть при нажатии на тег -пользователь переходит на вывод результатов с прикрепленными статьями. А сверху над результатами — картинка и описание. Такой глоссарий как бы.
                1. Критика 13 февраля 2018, 10:58 # 0
                  Стиль изложение так себе. Путает даже более менее опытного человека. Новичку (по конкретно этой статье) будет тяжело
                  1. Кирилл 14 марта 2018, 13:55(Комментарий был изменён) # 0
                    Здравствуйте! А можно как-то скрыть на странице поиска по тегам параметры и вместо них выводить например https://mysite.ru/tags/modrevo? Именно сделать ЧПУ.
                    1. biper 10 июля 2018, 07:28 # 0
                      На странице http://fenix.petrovich-design.ru/rezultat-po-zaprosu.html вывожу выборку статей по запросу (по тегам)
                      [[!pdoResources? &parents=`0`  &pageVarKey=`0` &includeTVs=`image,tags` &processTVs=`tags`  &includeContent=`1` &tpl=`articleTpl` &limit=`6` &where=`{"tags:LIKE":"%[[!pdoResources? &name=`tag`]]%"}` &sortby=`{"publishedon":"DeSC"}` &toPlaceholder=`results` &showHidden=`1` &hideContainers=`true` ]]
                                  
                                  [[!+results]] [[!+page.nav]]
                      сделал все по инструкции. Выводятся ВСЕ статьи, как ни бился. Что не так?
                      1. Вячеслав 15 ноября 2018, 21:40 # 0
                        Позвольте предложить небольшую доработку для облака тэгов. В качестве благодарности за ваш курс.Делаем сниппет randomFontSize, который рандомно возращает 1 из 4 вариантов размера тэга. Так облако тэгов будет смотреться красивее.<?php$size = [9,10,12,20];$index = mt_rand(0, 3);echo $size[$index];
                        1. Игорь 03 февраля 2022, 15:32(Комментарий был изменён) # 0
                          При настройке вывода тегов, теги в статье и в облаке тегов выводятся нормально. Но на странице «поиск по тегам» выводятся только headerInner, blogSidebar, footer. getResourcesTag на страницу не выводится.С чем это может связано? Как починить?
                          1. Петропавловский Артем 03 февраля 2022, 15:34 # 0
                            Для работы getResourcesTag необходим компонент getResources
                            1. Игорь 03 февраля 2022, 15:56(Комментарий был изменён) # 0
                              getResources установил, не работает
                              1. Игорь 04 февраля 2022, 10:48 # 0
                                getResources устанавливал, код с вашим тестовым сайтом сравнивал, не могу понять почему страница «поиск по тегам» пустая
                              2. El 20 апреля 2022, 15:46(Комментарий был изменён) # 0
                                Методом тыка было выявлено, что &grSnippet=`pdoPage` ломает верстку (сайдбар переносится вниз), а &hideContainers=`1` мешает отображению в принципе. Попробуйте их удалить, и всё заработает (при условии, что установлены getPage и getResources)

                              Наши клиенты

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

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

                              Контакты

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


                              Пермь, шоссе Космонавтов 252, офис 218