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

Материал из Umicms
Версия от 01:32, 17 октября 2013; Velross (обсуждение | вклад)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к:навигация, поиск

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

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

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

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

В данном шаблоне нам необходимо найти секцию:

<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>

Под выводом имени найденного объекта (<xsl:value-of select="@name" />) сделаем вызов темплейта, в котором по протоколу upage получим всю необходимую нам информацию о найденной странице: <xsl:apply-templates select="document(concat('upage://', @id))/udata" mode="extra_search"/> Для красивого оформления вывода объектов используется CSS.

<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>
В шаблоне готового сайта, необходимо добавить после <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()" />

Теперь опишем вызванный темплейт выводя нужные нам данные (в нашем случае это картинка и цена). Для формирования картинки нужного размера используем макрос system/makeThumbnail.

<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>

Результат:
Searchresult1.png
Searchresult2.png

Для TPL-шаблонизатора
1. Откройте шаблон /templates/demoold/tpls/search/default.tpl
2. В блок $FORMS['search_block_line'] = <<<END вставьте код:

$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;

Сделать поиск только по объектам каталога, Вы можете по инструкции в статье: Как сделать поиск только по объектам каталога
Результат:
17-10-2013 5-29-19.png