Сейчас мы с вами реализуем облако тегов, с помощью компонента “tagLister”. Для этого нам необходимо скачать и установить два дополнения:
- getResources (на основе него работает поиск по тегам)
- tagLister (собственно, сам компонент для реализации тегов)
Когда мы инсталлируем компоненты, нам нужно создать дополнительное поле “tags”, где будут содержаться наши теги:
- Имя – tags
- Подпись – Теги
- Описание – (можно не запонять)
- Категория – элементы страниц
- Параметры ввода – авто-метка
- Параметры вывода – по умолчанию
- Доступно для шаблонов – Пост
Важно, чтобы TV-поле называлось именно “tags”, иначе придется переопределять предустановки компонента:
Теперь я более подробно расскажу про сам компонент. В составе него идет 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, чтобы выборка происходила быстрее. В видео я объясню, что значит каждый из параметров и вы сможете посмотреть это в официальной документации.
Итак, у нас готов шаблон. Теперь в корне сайта нам необходимо создать ресурс – “Поиск по тегам”:
На данном ресурсе у на будут выводиться релевантные выбранному тегу статьи. Отлично!
Теперь вспомните: где у нас выводятся теги? Правильно! В шаблоне “Пост” и в чанке “postTpl”. Сейчас мы с вами выведем теги для статьи, но прежде нужно добавить в нашу тестовую статью какие-нибудь “тестовые теги” (указываем через запятую, сохраняем):
В шаблоне теги у нас выводятся в двух местах, причем их стиль отображения отличается. Если в первом случае, нам достаточно просто вызвать сниппет toLinks (шаблон ссылка – по умолчанию), то во втором случае, нужно создать чанк “tagRowTpl”:
<span><a href="[[+url]]" class="[[+cls]]">[[+item]]</a></span>
И в шаблоне нужно прописать в следующих местах вызовы toLinks:
Вызов первый:
[[!tolinks? &items=`[[*tags]]` &target=`5` ]]
Вызов второй:
[[!tolinks? &items=`[[*tags]]` &tpl=`tagRowTpl` &target=`5` ]]
Заметили параметр target? Он как раз ведет на тот ресурс, который мы создали. Теперь нам нужно сделать аналогичный вызов в чанке postTpl:
Помните разницу? Здесь мы вызываем TV с префиксом и знаком “+”. Также не забудьте включить TV-параметр в выборку в шаблоне “Блог”:
Ну, что? Проверим? Покликайте по тегам на странице статьи или блога. Работает! Можете создать другую статью и сделать отличные от созданной раннее тегами.
Теперь выведем облако тегов в сайдбаре. Я не буду управлять их размером, выведу 15 популярных:
Вызов tagLister:
[[!tagLister? &tv=`tags` &target=`5` &limit=`15` &tpl=`tagListerTpl` &allTpl=`tagListerTpl` ]]
Код чанка “tagListerTpl”:
<a href="[[~[[+target]]]]?[[+tagVar]]=[[+tag]]">[[+tag]]</a>
Все! У нас получилось! Теги реализованы. Согласитесь, что все очень быстро и просто!
Array ( [page] => 1 [pageNo] => 1 [href] => tegi?tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&key=tags ) Array ( [page] => 2 [pageNo] => 2 [href] => tegi?page=2&tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&key=tags ) Array ( [page] => 3 [pageNo] => 3 [href] => tegi?page=3&tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&key=tags ) Array ( [page] => 4 [pageNo] => 4 [href] => tegi?page=4&tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&key=tags ) Array ( [page] => 5 [pageNo] => 5 [href] => tegi?page=5&tag=%D0%9F%D0%B0%D0%B2%D0%BB%D0%BE%D0%B4%D0%B0%D1%80&key=tags )Что делать? Кто сталкивался?[[!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]]сделал все по инструкции. Выводятся ВСЕ статьи, как ни бился. Что не так?