Вывод в результатах поиска товаров с картинкой и ценой — различия между версиями
Velross (обсуждение | вклад) |
Velross (обсуждение | вклад) |
||
(не показаны 3 промежуточные версии этого же участника) | |||
Строка 54: | Строка 54: | ||
</source> | </source> | ||
<source lang="php"> | <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()" /> | + | В шаблоне готового сайта, необходимо добавить после <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> | </source> | ||
Теперь опишем вызванный темплейт выводя нужные нам данные (в нашем случае это картинка и цена). Для формирования картинки нужного размера используем макрос system/makeThumbnail. | Теперь опишем вызванный темплейт выводя нужные нам данные (в нашем случае это картинка и цена). Для формирования картинки нужного размера используем макрос system/makeThumbnail. | ||
Строка 76: | Строка 77: | ||
</source> | </source> | ||
− | Результат: | + | Результат:<br/> |
[[Файл:Searchresult1.png]]<br/> | [[Файл:Searchresult1.png]]<br/> | ||
− | [[Файл:Searchresult2.png]] | + | [[Файл: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]] |
Текущая версия на 01:32, 17 октября 2013
Актуально для версии 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>
Результат:
Для 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;
Сделать поиск только по объектам каталога, Вы можете по инструкции в статье: Как сделать поиск только по объектам каталога
Результат: