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

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

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

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

Комментарии (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