UMI.CMS Товары данной коллекции

Давненько я не писал статей по UMI.CMS, что очень печально...

За то время, которое не публиковал статьи я блоге успел «переучиться», ну или не переучиться а просто перейти на XSLT шаблонизатор UMI.CMS. Перейдя на данный шаблонизатор, понимаю, что он экономит огромное кол-во времени при разработки сайтов на UMI.CMS, и если вы до сих пор используете TPL шаблонизатор, я вам настоятельно рекомендую про него забыть и использовать XSLT. Я могу вам обещать, что вы будете экономить огромную массу времени при написание шаблонов для своих сайтов!

Данная статья будет посвящена такой интересной функциональности как «товары данной коллекции», что это такое, например, у вас есть определенная коллекция, в которую входит 2, 3, 5 различных товаров и вам нужно показывать данные товары на карточке товаров этой коллекции. Все предельно просто.

Для реализации этого метода будет использоваться протокол USEL в UMI.CMS. Что этот протокол представляет из себя вы можете прочитать на wiki UMI.CMS. Если кратко сказать, то этот протокол позволяет совершать произвольные выборки из базы данных UMI.CMS.

Данный пример будет рассмотрен на шаблоне UMI.CMS DemoDizzy.

Для начала нужно перейти в модуль «шаблон данных» и у типа «объект каталога», это важно(!), добавить поле типа выпадающий список или выпадающий список с множественным выбором, я добавлю данное поле в секцию "Опции управления [manage_options]". Название поля «Коллекция», справочник для данного поля создавать не нужно, все будет сделано автоматически:

Обращаю ваше внимание, что данное поле нужно создавать именно у типа «объект каталога». Если данное поле будет создано не у данного тита, то вы гарантированно получите ошибку вида Field is not presented in selected object types при выборе через протокол USEL.

Если вы все же получила данную ошибку, то почитайте вот здесь 

После того как поле создано нужно перейти в справочники /admin/data/guides/ и найти справочник для поля «Коллекция». Он должен быть последним. Наводите на справочник, появляется иконка «глаз», нажимаете:

Нужно добавить несколько названий для ваших коллекций. Так как я использую DemoDizzy, у меня будет немного странные названия:

Перейдите в модуль «каталог» и назначите ваши коллекции нужным товарам:

На этом с разметкой закончено. Далее нужно все показать вашим посетителям 😉

Перед тем как выводить товары, нужно добавить USEL файл, который будет обращаться к UMI. В папке usels вашего шаблона создаете файл get-collection.xml (путь — \templates\demodizzy\usels), содержание файла:

<?xml version="1.0" encoding="utf-8"?>
<selection>
    <target result="pages">
        <type module="catalog" method="object" />
    </target>

    <property name="kollekciya" value="{kollekciya}" /> <!-- Запрос нужно коллекции -->

    <sort>rand()</sort> <!-- Вывод рэндомно товары -->

    <limit page="0">{limit}</limit> <!-- Кол-во товаров для вывода -->
</selection>

Так как я использую шаблон DemoDizzy, я открываю файл object-view.xsl (путь — \templates\demodizzy\xslt\modules\catalog\).

За отображение вида карточки товара отвечает блок:

<xsl:template match="udata" mode="object-view">
...
</xsl:template>

Я предлагаю добавить отображение «товаров данной коллекции» ниже характеристик товара, т.е. вызов USEL будет происходить после:

<xsl:if test="$user-type = 'sv'">
	<xsl:apply-templates select=".//group[@name = 'manage_options']" mode="table" />
</xsl:if>

Нужно добавить:

<!-- Товары данной коллекции -->
<div class="b-collection">
	<!-- Получение id названия коллекции -->
	<xsl:variable name="kollekciya" select=".//property[@name = 'kollekciya']/value/item/@id" />
	<!-- Получение названия коллекции -->
	<xsl:variable name="kollekciya-nazvanie" select=".//property[@name = 'kollekciya']/value/item/@name" />

	<!-- Проверка если есть товары в коллекции, то нужно выводить данный блок -->
	<xsl:if test="$kollekciya">
		<h3 class="b-collection__title">Другие товары коллекции "<xsl:value-of select="$kollekciya-nazvanie" />"</h3>

		<xsl:apply-templates select="document(concat('usel://get-collection/?kollekciya=', $kollekciya, '&amp;limit=4'))/udata/page" mode="collection" />
	</xsl:if>
	<div class="spacer" />
</div>
<!-- / Товары данной коллекции -->

Далее в конец файла добавить вид отображения:

<xsl:template match="page" mode="collection">
	<div class="b-collection__item">
		<div class="item-name">
			<a href="{@link}" title="{name}"><xsl:value-of select="name" /></a>
		</div>
		<div class="item-image">
			<a href="{@link}" title="{name}">
				<xsl:call-template name="catalog-thumbnail">
					<xsl:with-param name="element-id" select="@id" />
					<xsl:with-param name="field-name">photo</xsl:with-param>
					<xsl:with-param name="width">100</xsl:with-param>
					<xsl:with-param name="height">100</xsl:with-param>
				</xsl:call-template>
			</a>
		</div>
	</div>
</xsl:template>

И также следует закинуть в css файл вашего шаблона:

.b-collection__item {
    float: left;
    float: left;
    margin-left: 25px;
}
.b-collection__item .item-name {}
.b-collection__item .item-image img {}
.spacer {
    clear: both;
    margin: 0;
    padding: 0;
}

На этом все. Вот так будет отображаться у вас на сайте:

И я чуть не забыл, вот так должен выглядеть доктайп вашего файла, в котором будут выводится товары:

<!DOCTYPE xsl:stylesheet SYSTEM	"ulang://i18n/constants.dtd:file"[
    <!ENTITY amp  "&#38;">
]>