Сообщение #1 makki » 30.05.2017, 06:59
Предлагаю небольшое дополнение к дефолтному шаблону OkayCMS 2, которое сделает удобнее навигацию по каталогу товаров. Несмотря на то, что новый шаблон мне понравился своей простотой и чистым CSS, каталог товаров на десктопе мне показался сильно спрятанным и немного неудобным. Дополнение добавляет боковое меню подкатегорий. Т.е. отображается не все дерево каталога а только подкатегории выбранной категории. Если подкатегорий нет, меню отображает подкатегории родителя.
1. В самое начало файла design/ваш_шаблон/html/features.tpl добавляем следующий код:
Код: Выделить всё
{* Subcategory menu*}
{if $category->subcategories || $category->level > 1}
<h2 class="h2"><span data-language="subcategories">{$lang->subcategories}</span></h2>
<div class="subcategory-menu" >
{* Рекурсивная функция вывода дерева категорий *}
{function name=catalog_tree}
{if $categories}
<ul>
{foreach $categories as $c}
{* Показываем только видимые категории *}
{if $c->visible}
<li>
<a {if $category->id == $c->id}class="__active"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
</li>
{/if}
{/foreach}
</ul>
{/if}
{/function}
{if $category->subcategories}
{catalog_tree categories=$category->subcategories}
{elseif $category->level > 1}
{catalog_tree categories=$category->path[count($category->path)-2]->subcategories}
{/if}
</div>
{/if}
2. В css (design/ваш_шаблон/css/style.css) добавляем несколько новых стилей.
Код: Выделить всё
.subcategory-menu {
padding-right: 23px;
border-bottom: 1px solid #e1e8ed;
}
.subcategory-menu ul {
margin-left: -10px
}
.subcategory-menu li{
font-size: 13px;
line-height: 16px;
margin: 10px;
}
.subcategory-menu li a {
text-decoration: none;
}
.subcategory-menu li a.__active{
font-weight: bold;
}
3. В админке добавляем новый перевод для переменной subcategories и даем ей значения Подкатегории, Subcategories, Підкатегорії для соответствующих языков.
На этом все! См.скриншот.
Предлагаю небольшое дополнение к дефолтному шаблону OkayCMS 2, которое сделает удобнее навигацию по каталогу товаров. Несмотря на то, что новый шаблон мне понравился своей простотой и чистым CSS, каталог товаров на десктопе мне показался сильно спрятанным и немного неудобным. Дополнение добавляет боковое меню подкатегорий. Т.е. отображается не все дерево каталога а только подкатегории выбранной категории. Если подкатегорий нет, меню отображает подкатегории родителя.
1. В самое начало файла design/ваш_шаблон/html/features.tpl добавляем следующий код:
[code]{* Subcategory menu*}
{if $category->subcategories || $category->level > 1}
<h2 class="h2"><span data-language="subcategories">{$lang->subcategories}</span></h2>
<div class="subcategory-menu" >
{* Рекурсивная функция вывода дерева категорий *}
{function name=catalog_tree}
{if $categories}
<ul>
{foreach $categories as $c}
{* Показываем только видимые категории *}
{if $c->visible}
<li>
<a {if $category->id == $c->id}class="__active"{/if} href="catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
</li>
{/if}
{/foreach}
</ul>
{/if}
{/function}
{if $category->subcategories}
{catalog_tree categories=$category->subcategories}
{elseif $category->level > 1}
{catalog_tree categories=$category->path[count($category->path)-2]->subcategories}
{/if}
</div>
{/if}[/code]
2. В css (design/ваш_шаблон/css/style.css) добавляем несколько новых стилей.
[code].subcategory-menu {
padding-right: 23px;
border-bottom: 1px solid #e1e8ed;
}
.subcategory-menu ul {
margin-left: -10px
}
.subcategory-menu li{
font-size: 13px;
line-height: 16px;
margin: 10px;
}
.subcategory-menu li a {
text-decoration: none;
}
.subcategory-menu li a.__active{
font-weight: bold;
}[/code]
3. В админке добавляем новый перевод для переменной subcategories и даем ей значения Подкатегории, Subcategories, Підкатегорії для соответствующих языков.
На этом все! См.скриншот.
[attachment=0]Screen.jpg[/attachment]
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)