примером может послужить шаблон для OkayCMS 3* VV_Blue
я пока сделал так как черновой вариант, что выводит и разделы и подразделы
Код: Выделить всё
{* Featured categories *}
{*{if ($category->subcategories && $category->count_children_visible) ||
($category->path[$category->level_depth-2]->subcategories && $category->path[$category->level_depth-2]->count_children_visible) || $brand->categories}*}
<div class="sidebar__boxed hidden-md-down">
<div class="filters filters_catalog">
<div class="fn_switch filter__name d-flex align-items-center justify-content-between">
<span data-language="features_catalog">{$lang->features_catalog}</span>
<span class="d-flex align-items-center filter__name_arrow fa fa-chevron-down"></span>
</div>
<div class="filter__group">
{function name=categories_tree3}
{if $categories}
{*<div class="level_{$level} {if $level == 1}categories_nav__menu{else}categories_nav__subcategory{/if}">*}
<div class="level_{$level} {if $level == 1}filter__catalog_menu {else}filter__subcatalog {/if}">
{*<ul class="fn_category_scroll {if $level == 1}categories_menu {else}subcategory {/if}">*}
{foreach $categories as $c}
{if $c->visible && ($c->has_products || $settings->show_empty_categories)}
{if $c->subcategories && $c->count_children_visible && $level < 3}
{*<li class="categories_menu__item has_child">*}
<div class="filter__catalog_item has_child">
{*<a class="d-flex align-items-center categories_menu__link{if $category->id == $c->id} selected{/if}" href="{url_generator route="category" url=$c->url}" data-category="{$c->id}">*}
<{if $c->id == $category->id}b{else}a{/if} class="filter__catalog_link{if $c->subcategories} sub_cat{/if}{if $category->id == $c->id} selected{/if}" href="{url_generator route="category" url=$c->url}" data-category="{$c->id}">
{*{if $c->image}
{if $level == 1 }
{if strtolower(pathinfo($c->image, $smarty.const.PATHINFO_EXTENSION)) == 'svg'}
<span class="categories_menu__icon">
{$c->image|read_svg:$config->original_categories_dir}
</span>
{else}
<span class="categories_menu__icon lazy" data-bg="url({$c->image|resize:22:22:false:$config->resized_categories_dir})" ></span>
{/if}
{/if}
{/if}*}
<span class="categories_menu__name">{$c->name|escape}</span>
{*{include file='svg.tpl' svgId='arrow_right'}*}
{*</a>*}
</{if $c->id == $category->id}b{else}a{/if}>
{categories_tree3 categories=$c->subcategories level=$level + 1}
{*</li>*}</div>
{else}
{*<li class="categories_menu__item">*}
<div class="filter__catalog_item">
{*<a class="categories_menu__link d-flex align-items-center d-flex align-items-center{if $category->id == $c->id} selected{/if}" href="{url_generator route='category' url=$c->url}" data-category="{$c->id}">*}
<{if $c->id == $category->id}b{else}a{/if} class="filter__catalog_link{if $c->subcategories} sub_cat{/if}{if $category->id == $c->id} selected{/if}" href="{url_generator route="category" url=$c->url}" data-category="{$c->id}">
{*{if $level == 3}
<div class="d-flex align-items-center justify-content-center categories_menu__image">
{if $c->image}
{if strtolower(pathinfo($c->image, $smarty.const.PATHINFO_EXTENSION)) == 'svg'}
{$c->image|read_svg:$config->original_categories_dir}
{else}
<picture>
{if $settings->support_webp}
<source type="image/webp" data-srcset="{$c->image|resize:65:65:false:$config->resized_categories_dir}.webp">
{/if}
<source data-srcset="{$c->image|resize:65:65:false:$config->resized_categories_dir}">
<img class="lazy" data-src="{$c->image|resize:65:65:false:$config->resized_categories_dir}" src="{$rootUrl}/design/{get_theme}/images/xloading.gif" alt="{$c->name|escape}" title="{$c->name|escape}"/>
</picture>
{/if}
{else}
<div class="categories__no_image d-flex align-items-center justify-content-center" title="{$c->name|escape}">
{include file="svg.tpl" svgId="no_image"}
</div>
{/if}
</div>
{elseif $level == 1}
{if $c->image}
{if strtolower(pathinfo($c->image, $smarty.const.PATHINFO_EXTENSION)) == 'svg'}
<span class="categories_menu__icon">
{$c->image|read_svg:$config->original_categories_dir}
</span>
{else}
<span class="categories_menu__icon lazy" data-bg="url({$c->image|resize:22:22:false:$config->resized_categories_dir})" ></span>
{/if}
{/if}
{/if}*}
<span class="d-flex align-items-center categories_menu__name">{$c->name|escape}</span>
{*</a>*}
</{if $c->id == $category->id}b{else}a{/if}> {if $level == 2}{include file="svg.tpl" svgId="arrow_right2"}{elseif $level == 3}{include file="svg.tpl" svgId="arrow_right2"}{/if}
{*</li>*}</div>
{/if}
{/if}
{/foreach}
{*</ul>*}
</div>
{/if}
{/function}
{categories_tree3 categories=$categories level=1}
</div>
</div>
</div>
но не скрывает подразделы не открытой категории/подкатегории
(может через скрипт, или через css это можно поправить)
-----
и еще, так как сейчас настройка кол-ва товаров для вывода в каталоге задается в админке, возможно влияет на опцию сортировки товаров (но это не точно)
идея сделать вывод кнопок переключения для показа нужного кол-ва товара, но не работает в новых версиях движка
может кто подскажет в реализации?
Код: Выделить всё
<div class="fn_ajax_buttons d-flex flex-wrap align-items-center products_sort">
<span class="product_sort__title hidden-sm-down" data-language="products_sort_by">Результатов на странице:</span>
<form class="product_sort__form" method="post">
<button type="submit" name="prg_seo_hide" class="d-inline-flex align-items-center product_sort__link{if $current_limit == 100}active_up{/if} no_after" value="{url limit=30}">
<span data-language="products_by_default">30</span>
</button>
</form>
<form class="product_sort__form" method="post">
<button type="submit" name="prg_seo_hide" class="d-inline-flex align-items-center product_sort__link{if $current_limit == 100} active_up{elseif $current_limit == 16} active_down{/if}" value="{url limit=60}">
<span data-language="products_by_price">60</span>
</button>
</form>
<form class="product_sort__form" method="post">
<button type="submit" name="prg_seo_hide" class="d-inline-flex align-items-center product_sort__link{if $current_limit == 100}active_up{/if}" value="{url limit=90}">
<span data-language="products_by_price">90</span>
</button>
</form>
</div>
-----
было бы отлично и сделать вывод в каталоге товаров переключение вида с плитки на список, компактный
может на днях переделаю скрипт с 2.х.х и выложу, ниже старой версии использовал ранее
на стр категории
Код: Выделить всё
<!-- view choise - begin of block -->
<div class="view hidden-sm">
<span class="grid selected" data-view="grid" title="Вид плиткой"></span>
<span class="compact" data-view="compact" title="Вид компактный"></span>
<span class="list" data-view="list" title="Вид списком"></span>
</div>
<!-- view choise - end of block -->
в js
Код: Выделить всё
// view choise - begin of block
function view_pr(v){
console.log(v);
switch (v) {
case "grid":
$('#fn-products_content').children().removeClass();
$('.grid').addClass('selected');
$('.compact').removeClass('selected');
$('.list').removeClass('selected');
$('#fn-products_content').children().addClass('col-md-4 col-lg-6 col-xl-4');
break;
case "compact":
$('.compact').addClass('selected');
$('.grid').removeClass('selected');
$('.list').removeClass('selected');
$('#fn-products_content').children().removeClass();
$('#fn-products_content').children().addClass('col-md-3');
break;
case "list":
$('.list').addClass('selected');
$('.compact').removeClass('selected');
$('.grid').removeClass('selected');
$('#fn-products_content').children().removeClass();
$('#fn-products_content').children().addClass('col-md-12');
break;
}
}
function view_choose(){
$(document).on('click','.grid', function(){
sessionStorage.setItem("view_ch","grid");
view_pr(sessionStorage.getItem("view_ch"));
});
$(document).on('click', '.compact', function(){
sessionStorage.setItem("view_ch","compact");
view_pr(sessionStorage.getItem("view_ch"));
});
$(document).on('click', '.list', function(){
sessionStorage.setItem("view_ch","list");
view_pr(sessionStorage.getItem("view_ch"));
});
};
$(document).ready(function(){
if(!sessionStorage.getItem("view_ch")){
sessionStorage.setItem("view_ch","grid");
};
view_pr(sessionStorage.getItem("view_ch"));
view_choose();
});
// view choise - end of blockcss:
Код: Выделить всё
/*view choise - begin of block*/
.view{
float: right;
font-size: 0;
}
.view span{
display: inline-block;
width: 23px;
height: 23px;
margin: 0 0 0 10px;
cursor: pointer;
}
.view .grid:hover, .view .grid.selected {
background: url(../images/grid.png) 0 100% no-repeat;
}
.view .grid {
background: url(../images/grid.png) 0 0% no-repeat;
}
.view .compact:hover, .view .compact.selected {
background: url(../images/grid.png) 0 100% no-repeat;
}
.view .compact {
background: url(../images/grid.png) 0 0% no-repeat;
}
.view .list:hover, .view .list.selected {
background: url(../images/list.png) 0 100% no-repeat;
}
.view .list {
background: url(../images/list.png) 0 0% no-repeat;
}
/*view choise - end of block*/документация раньше хорошо гуглилась с сайта через поиск, а теперь на гитхаб