Динамическое подменю для демо-сайта Современный (xslt)

Материал из Umicms
Перейти к:навигация, поиск

Задача: На демо-сайте по продаже бытовой техники есть подменю, подменю находится слева и представляет из себя разделы каталога, и подразделы каталога. Все разделы каталога раскрыты (показывают подразделы) и не изменяются при переходе на разделы или подразделы. В этой статье мы рассмотрим как сделать динамическое меню, для этого сайта, поскольку многие пользователю берут за основу своего сайта именно функционал демо-сайта Современный.

Решение: Нам необходимо, чтобы все разделы каталога были свернуты, при нажатии на раздел, показывались подразделы, при нажатии на подраздел показывались товары подраздела, или дочерние подразделы если они есть. При переходе в другой раздел каталога, предыдущий закрывается, а текущий наоборот раскрывается. Подменю демо-сайта, построено с помощью вызовов catalog getCategoryList и catalog getObjectsList, поэтому нам не нужно ставить галочки "Отображать в меню", "Показывать подменю", потому что они ни как не будут влиять на данные вызовы (эти галочки влияют если меню создано вызовом content menu)

1. Шаблоны подменю находятся по пути ~xsltTpls/modules/catalog/left-column-category-list.xsl. Необходимо чтобы в этом файле был следующий код (все предыдущее содержание файла удаляем) :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM	"ulang://i18n/constants.dtd:file">
<xsl:stylesheet	version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:umi="http://www.umi-cms.ru/TR/umi">

	<xsl:template match="udata[@method = 'getCategoryList']" mode="left-column">
		<ul class="catalog_menu" umi:button-position="bottom left"
			umi:element-id="{@category-id}" umi:region="list" umi:module="catalog" umi:sortable="sortable">
			<xsl:apply-templates select="//item" mode="left-column" />
		</ul>
	</xsl:template>

	<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
		<li umi:element-id="{@id}" umi:region="row">
			<span>
				<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
					<xsl:value-of select="." />
				</a>
			</span>
			
			<xsl:if test="(@id=$document-page-id) or (@id=$document-page-parent-id/page/@id)">
				<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))"
mode="left-column-sub"/>
			</xsl:if>
		</li>
	</xsl:template>
	
	<!--шаблон для подразделов 2 и более уровней-->
	<xsl:template match="udata[@method = 'getCategoryList']" mode="left-column-sub">
		<ul umi:element-id="{@category-id}" umi:region="list" umi:module="catalog" umi:sortable="sortable" 
umi:button-position="top right">
			<xsl:apply-templates select="//item" mode="left-column-sub"/>
		</ul>
	</xsl:template>

	<xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column-sub">
		<li umi:element-id="{@id}" umi:region="row">
			<a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
				<xsl:value-of select="." />
			</a>
			<xsl:if test="(@id=$document-page-id) or (@id=$document-page-parent-id/page/@id)">
				<xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id))" 
mode="left-column-sub"/>
			</xsl:if>
		</li>
	</xsl:template>

</xsl:stylesheet>

2. В файл, находящийся по пути ~xsltTpls/default.xsl добавляем строку

<xsl:variable name="document-page-parent-id" select="/result/parents" />