Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. Если у раздела есть вложенные группы товаров, то показываем "крестик". При открытии раздела "крестик" будет заменяться "тире".
В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню.
1. Создаете XSL шаблон "ГруппыТоваровЛевоеМеню":
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:hostcms="http://www.hostcms.ru/"
exclude-result-prefixes="hostcms">
<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>
<!-- ГруппыТоваровЛевоеМеню-->
<xsl:template match="/">
<xsl:apply-templates select="/shop"/>
</xsl:template>
<!-- Шаблон для магазина -->
<xsl:template match="/shop">
<div class="left-block-widget">
<h4 class="text-center">Каталог товаров</h4>
<div class="shop-group-menu">
<ul>
<xsl:apply-templates select="shop_group"/>
</ul>
</div>
</div>
</xsl:template>
<xsl:variable name="current_group_id" select="/shop/current_group_id"/>
<!-- Шаблон для групп товара -->
<xsl:template match="shop_group">
<li>
<h6><xsl:value-of disable-output-escaping="yes" select="name"/></h6>
<!-- Если есть подгруппы -->
<xsl:if test="shop_group">
<ul id="submenu_{@id}" >
<xsl:apply-templates select="shop_group" mode="sub_subgroup"/>
</ul>
</xsl:if>
</li>
</xsl:template>
<!-- Шаблон для групп товара -->
<xsl:template match="shop_group" mode="sub_subgroup>
<li>
<xsl:if test="@id = /shop/current_group_id or .//shop_group/@id = /shop/current_group_id">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<xsl:choose>
<xsl:when test="shop_group">
<a onclick="$('#submenu_{@id}').toggle('slow'); $(this).toggleClass('opened')" class="groups">
<xsl:if test="@id = /shop/current_group_id or .//shop_group/@id = /shop/current_group_id">
<xsl:attribute name="class">groups current-group opened</xsl:attribute>
</xsl:if>
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</xsl:when>
<xsl:otherwise>
<a href="{url}" >
<xsl:if test="@id = /shop/current_group_id">
<xsl:attribute name="class">current-group</xsl:attribute>
</xsl:if>
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</xsl:otherwise>
</xsl:choose>
<!-- Если есть подгруппы -->
<xsl:if test="shop_group">
<ul id="submenu_{@id}" style="display: none;">
<xsl:if test="@id = $current_group_id or .//shop_group/@id = $current_group_id">
<xsl:attribute name="style">display:block</xsl:attribute>
<xsl:attribute name="class">level0 opened</xsl:attribute>
</xsl:if>
<xsl:apply-templates select="shop_group" mode="last_subgroup"/>
</ul>
</xsl:if>
</li>
</xsl:template>
<!-- Шаблон для групп товара -->
<xsl:template match="shop_group" mode="last_subgroup">
<li>
<xsl:if test="@id = /shop/current_group_id">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<xsl:choose>
<xsl:when test="shop_group">
<a onclick="$('#submenu_{@id}').toggle('slow'); $(this).toggleClass('opened')" class="groups">
<xsl:if test="@id = /shop/current_group_id">
<xsl:attribute name="class">current-group</xsl:attribute>
</xsl:if>
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</xsl:when>
<xsl:otherwise>
<a href="{url}" >
<xsl:if test="@id = /shop/current_group_id">
<xsl:attribute name="class">current-group</xsl:attribute>
</xsl:if>
<xsl:value-of disable-output-escaping="yes" select="name"/>
</a>
</xsl:otherwise>
</xsl:choose>
<!-- Если есть подгруппы -->
<xsl:if test="shop_group">
<ul id="submenu_{@id}" style="display: none;">
<xsl:if test="@id = $current_group_id or .//shop_group/@id = $current_group_id">
<xsl:attribute name="style">display:block</xsl:attribute>
<xsl:attribute name="class">level0 opened</xsl:attribute>
</xsl:if>
<xsl:apply-templates select="shop_group" mode="last_subgroup"/>
</ul>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
2. Далее во вкладке CSS загружаете стили для нашего меню:
/*===== ГРУППЫ ТОВАРОВ =====*/
.shop-group-menu ul {
padding: 0;
margin: 0;
}
.shop-group-menu ul li {
border-bottom: 1px solid #d8d8d8;
margin: 0;
padding: 0;
list-style-type:none;
}
.shop-group-menu ul li:last-child {
border-bottom: medium none;
}
.shop-group-menu li a {
border:0;
cursor:pointer;
color: #666;
font-size: 15px;
font-weight: 300;
text-decoration: none;
padding: 5px 15px;
display:block;
position:relative;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.shop-group-menu >ul >li >h6 {
background:#00c783;
color:#fff;
padding:8px 12px 8px 20px;
margin:10px -17px 4px;
}
.shop-group-menu li a:hover {
background:#f2f2f2;
color: #000;
}
.shop-group-menu li a.groups:after {
display: block;
content: "+";
font-size:15px;
position: absolute; top: 6px;
right: 2px; color: #00c783;
}
.shop-group-menu li a.opened:after {
content: "-";
color: #109668;
}
.shop-group-menu li a.current-group {
font-weight:600;
}
.shop-group-menu ul li a i {
position:absolute;
right:0; top:5px;
font-size:10px;
color:#999;
}
.shop-group-menu ul ul ul li {
margin-left:0;
}
.shop-group-menu ul ul ul {
background:#efefef;
}
.shop-group-menu ul ul ul ul {
background:#e6e6e6;
}
3. В макет, который у вас подключен для показа Каталога товаров, добавляете php код вывода Меню:
<?php
// Разделы магазина
if (Core::moduleIsActive('shop')) { $Shop_Controller_Show = new Shop_Controller_Show( Core_Entity::factory('Shop', 3) );
$Shop_Controller_Show ->xsl( Core_Entity::factory('Xsl')->getByName('МагазинГруппыТоваровНаГлавнойСайт2') ) ->groupsMode('all') ->limit(0);
// Чтобы знать текущую группу каталога, добавляем этот код if (is_object(Core_Page::instance()->object) && get_class(Core_Page::instance()->object) == 'Shop_Controller_Show') { $Shop_Controller_Show->addEntity( Core::factory('Core_Xml_Entity') ->name('current_group_id') ->value(intval(Core_Page::instance()->object->group)) ); } $Shop_Controller_Show->show();
} ?>
Если возникнут вопросы при интеграции этого меню, пишите в комментариях. На этом всё. Ниже вы найдете ссылки на другие интеграции для сайтов на движке HostCMS 6.
Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.
Другие статьи по теме:
sin()и cos().
Выводим на Главной или отдельной странице сайта комментарии к товарам, оставляемые посетителями или покупателями...
Подборка различных проектов с открытым кодом на CSS и HTML, от бордеров до слайдера, которые могут вам пригодиться при создании веб сайта.
Создание интернет-магазина может показаться сложной задачей, но с правильными инструментами начать продавать онлайн очень просто.
grid-template-rows и grid-template-columns свойства теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, так как она встроена прямо в спецификацию модуля компоновки CSS Grid Level 1.
Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка...
