Реализация тегов в 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>

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

Оцените статью:

Проголосовало: 53

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

  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]]
                      сделал все по инструкции. Выводятся ВСЕ статьи, как ни бился. Что не так?

                      Написать комментарий

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

                      Контакты

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


                      614060, Россия, г. Пермь,
                      ул. Крупской, д. 34, офис 510.
                      +7 (342) 277-43-93