Вывод изображения, прикрепленного с помощью TV параметра, в результатах поиска AjaxSearch

После того, как я написал урок об организации поиска по сайту в MODx с помощью сниппета AjaxSearch, мне на почту стали приходить вопросы, самым распространенным из которых стал «Как вывести изображения, прикрепленные с помощью TV параметров, в результатах поиска AjaxSearch».

Чтобы избавить себя от необходимости каждый раз отвечать на этот вопрос посетителей блога я решил написать небольшое дополнение к уроку по реализации поиска на сайте.

Вывод содержимого TV параметров в результатах поиска

Предположим, что вам нужно для некоторых ресурсов вывести прикрепленные изображения в результатах поиска.

Для этого создаем TV параметр, который мы будем выводить в результатах с именем, например, «imgsearch» и типом ввода image. 

Название TV параметра может быть любым, главное затем его правильно указать при вызове сниппета AjaxSearch и в шаблоне вывода результата.

Обратите внимание: TV параметры, которые должны выводиться в результатах поиска, не должны в названии содержать символ  "-", в противном случае при попытке произвести поиск система будет выдавать сообщение об ошибке.

На странице с результатами поиска выводим следующую конструкцию:

[!AjaxSearch? &ajaxSearch=`0` &pagingType=`0` &showInputForm=`0` &grabMax=`7` &withTvs=`imgsearch`!]

Параметр &withTvs указывает, какие TV параметры вы хотите видеть в выводе результатов поиска. Если этих параметров несколько, они должны отделяться друг от друга запятой.

Прикрепите для какой-нибудь страницы из дерева ресурсов изображение с помощью TV параметра imgsearch.

Затем нам необходимо отредактировать шаблон вывода результатов, чтобы добавить в нем вызов дополнительного TV параметра.

Для этого будем редактировать файл result.tpl.html, в котором хранится шаблон вывода результата в AjaxSerch. По умолчанию этот файл находится в папке assets/snippets/ajaxSearch/templates/. 

Сейчас содержимое этого файла следующее:

<div class="[+as.resultClass+]">
<a class="[+as.resultLinkClass+]" href="[+as.resultLink+]" title="[+as.longtitle+]">[+as.pagetitle+]</a>

[+as.extractShow:is=`1`:then=`
<div class="[+as.extractClass+]"><p>[+as.extract+]</p></div>
`+]

[+as.breadcrumbsShow:is=`1`:then=`
<span class="[+as.breadcrumbsClass+]">[+as.breadcrumbs+]</span>
`+]

[+as.descriptionShow:is=`1`:then=`
<span class="[+as.descriptionClass+]">[+as.description+]</span>
`+]
</div>

После строчки 

<a class="[+as.resultLinkClass+]" href="[+as.resultLink+]" title="[+as.longtitle+]">[+as.pagetitle+]</a>

которая отвечает за вывод ссылки на результат поиска добавляем следующую конструкцию:

[+as.imgsearchShow:is=`1`:then=`
<img width="60px" align="right" src="[+as.imgsearch+]">
`+]

Эта конструкция проверяет,  содержит ли TV параметр imgsearch какую-либо информацию, и если этот параметр не пустой, то происходит вывод тега img с содержимым TV параметра в качестве значения scr.

В этом случае выравнивание изображения производится по правому краю, а его ширина ограничивается 60 пикселями. Вы можете выставить любое подходящее вам значение ширины и позиционирования изображения на странице.

Для того, чтобы выводимое изображение было ссылкой на страницу, конструкция, которую нам необходимо добавить в файл result.tpl.html, должна быть следующей:

[+as.imgsearchShow:is=`1`:then=`
<a class="[+as.resultLinkClass+]" href="[+as.resultLink+]" title="[+as.longtitle+]"> <img width="60px" align="right" src="[+as.imgsearch+]"></a>
`+]

В итоге файл с шаблоном вывода результата поиска будет содержать в себе следующий код:

<div class="[+as.resultClass+]">
<a class="[+as.resultLinkClass+]" href="[+as.resultLink+]" title="[+as.longtitle+]">[+as.pagetitle+]</a>

[+as.imgsearchShow:is=`1`:then=`
<a class="[+as.resultLinkClass+]" href="[+as.resultLink+]" title="[+as.longtitle+]"> <img width="60px" align="right" src="[+as.imgsearch+]"></a>
`+]

[+as.extractShow:is=`1`:then=`
<div class="[+as.extractClass+]"><p>[+as.extract+]</p></div>
`+]

[+as.breadcrumbsShow:is=`1`:then=`
<span class="[+as.breadcrumbsClass+]">[+as.breadcrumbs+]</span>
`+]

[+as.descriptionShow:is=`1`:then=`
<span class="[+as.descriptionClass+]">[+as.description+]</span>
`+]

</div>

Внешний вид результата с прикрепленным изображением будет приблизительно таким:

Вы можете изменить стиль отображения с помощью CSS. Например, чтобы добавить отступы и границу изображения в CSS файле можно прописать стиль для тега img:

.ajaxSearch_result img{padding:5px; border:1px solid #eee; margin-top:10px;}

После этого добавится обводка изображения и изменятся отступы. Итоговый вид будет следующим:

Подобным образом будут выводиться и любые другие TV параметры с любым типом ввода. Например, если вы хотите вывести в результатах поиска дополнительную текстовую строчку, которая хранится в TV параметре с типом ввода text и именем name, то на странице с результатами поиска при вызове сниппета необходимо использовать параметр &withTvs=`name`, а в файле с шаблоном результата дополнительный TV параметр вызывается с помощью конструкции:

[+as.nameShow:is=`1`:then=`
[+as.name+]
`+]

Созданные во время урока чанки:

Автор: Ефимов Виктор

Кстати, Вы легко можете получать известия об обновлениях в моем блоге на электронную почту или с помощью RSS ленты. 

Вы можете также посмотреть другие уроки по созданию сайта на MODx: