Просмотр исходного текста страницы Вывод в результатах поиска товаров с картинкой и ценой

'''Актуально для версии 2.9.1'''

'''Задача:''' Выводить результаты поиска по объектам каталога товары с картинкой и ценой.

'''Решение:''' представленное решение проверенно на демо-шаблоне Интернет-магазина "Современный" (demodizzy), а также на шаблонах готовых сайтов.

За отображение результатов в поиске отвечает шаблон<br/>
в demodizzy: /templates/demodizzy/xslt/modules/search/search-results.xsl<br/>
в шаблонах готовых сайтов: /xsltTpls/modules/search/search-results.xsl<br/>

В данном шаблоне нам необходимо найти секцию:
<source lang="xml">
<xsl:template match="item" mode="search-result">
		<dt>
			<span>
				<xsl:value-of select="$p + position()" />
			</span>
			<a href="{@link}" umi:element-id="{@id}" umi:field-name="name">
				<xsl:value-of select="@name" />
			</a>
		</dt>
		<dd>
			<xsl:value-of select="." disable-output-escaping="yes" />
		</dd>
</xsl:template>
</source>

Под выводом имени  найденного объекта (<xsl:value-of select="@name" />) сделаем вызов темплейта, в котором по протоколу upage получим всю необходимую нам информацию о найденной странице: <xsl:apply-templates select="document(concat('upage://', @id))/udata" mode="extra_search"/>
Для красивого оформления вывода объектов используется CSS.
<source lang="xml">
<xsl:template match="item" mode="search-result">
<div style="width:150px;float: left;text-align:center; margin: 5px;background-color:#f9f9f9;border:1px solid #dcdcdc;">
    <dt>
        <span>
	    <xsl:value-of select="$p + position()" />
	</span>
	    <a href="{@link}" umi:element-id="{@id}" umi:field-name="name">
	    <div style="display:inline-block;
	                color:#555555;
	                font-family:Arial;
	                font-size:15px;
	                font-weight:bold;
	                font-style:normal;
	                width:100px;
	                text-decoration:none;
	                text-align:center;">
                <xsl:value-of select="@name" />
            </div>
		<xsl:apply-templates select="document(concat('upage://', @id))/udata" mode="extra_search"/>
	    </a>
    </dt>
</div>	
</xsl:template>
</source>
<source lang="php">
В шаблоне готового сайта, необходимо добавить после <xsl:template match="item" mode="search-result"> строку <xsl:param name="per_page"/> 
и заменить строку <xsl:value-of select="$p + position()" /> на <xsl:value-of select="$p * $per_page + position()" />
</source>
Теперь опишем вызванный темплейт выводя нужные нам данные (в нашем случае это картинка и цена). Для формирования картинки нужного размера используем макрос system/makeThumbnail.
<source lang="xml">
<xsl:template match="udata"  mode="extra_search"> 
    <xsl:apply-templates select="document(concat('udata://system/makeThumbnail/(',substring(.//property[@name='photo']/value,2),')/(auto)/70'))/udata" />
    <div style="background-color:#f6b33d;
	        border:1px solid #eda933;
	        display:inline-block;
	        color:#ffffff;
	        font-family:Arial;
	        font-size:15px;
	        font-weight:bold;
	        font-style:normal;
	        width:100px;
	        text-decoration:none;
	        text-align:center;">
        <xsl:value-of select=".//property[@name='price']/value"  disable-output-escaping="yes"/> руб.
   </div>
</xsl:template>
</source>

Результат:<br/>
[[Файл:Searchresult1.png]]<br/>
[[Файл:Searchresult2.png]]<br/>
<br/>
'''Для TPL-шаблонизатора'''
<br/>
1. Откройте шаблон /templates/demoold/tpls/search/default.tpl<br/>
2. В блок $FORMS['search_block_line'] = <<<END вставьте код:
<source lang="xml">
$FORMS['search_block_line'] = <<<END
<div style="width:140px;float: left;text-align:center; margin: 5px;background-color:#f9f9f9;border:1px solid #dcdcdc;">
    <dt>
        <span>
	    %num%
		</span>
	    <a href="%link%" umi:element-id="%id%" umi:field-name="name">
	    <div style="display:inline-block;
	                color:#555555;
	                font-family:Arial;
	                font-size:12px;
	                font-weight:bold;
	                font-style:normal;
	                width:100px;
	                text-decoration:none;
	                text-align:center;">
                %name%
            </div>
		<img src="%photo%" height="70px"/>
		<div style="background-color:#f6b33d;
	        border:1px solid #eda933;
	        display:inline-block;
	        color:#ffffff;
	        font-family:Arial;
	        font-size:15px;
	        font-weight:bold;
	        font-style:normal;
	        width:100px;
	        text-decoration:none;
	        text-align:center;">
        %price% руб.
   </div>
	    </a>
    </dt>
</div>	
END;
</source>
Сделать поиск только по объектам каталога, Вы можете по инструкции в статье: [[Как сделать поиск только по объектам каталога]]<br/>
Результат:<br/>
[[Файл:17-10-2013 5-29-19.png]]<br/>

[[Категория:Модуль Поиск]][[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]][[Категория:Верстка в XSLT]][[Категория:Верстка в TPL]]