Улучшение базового шаблона Okaycms 4.х.х

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

Vanger M
Vanger M
Репутация: 5
Сообщения: 31
Зарегистрирован: 08.06.2016
С нами: 7 лет 9 месяцев

Сообщение #1 Vanger » 24.03.2021, 15:34

Подскажите пожалуйста, как отредактировать код вывода меню в сайдбаре (вывод в категориях, список товаров) так, чтобы показывало все разделы категорий 1 уровень вложенности, и при открытии нужной (показывало её доп подразделы, 2, 3 уровня)?
примером может послужить шаблон для 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 block

css:

Код: Выделить всё

/*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*/


документация раньше хорошо гуглилась с сайта через поиск, а теперь на гитхаб

zyxer M
zyxer M
Возраст: 32
Репутация: 77
Сообщения: 419
Зарегистрирован: 03.02.2016
С нами: 8 лет 1 месяц
Откуда: Днепр

Сообщение #2 zyxer » 01.04.2021, 11:33

данная статья не поможет https://simplamarket.com/blog/akkordeon-menyu-dlya-simplacms?
Всё сказанное мной, является лично моим мнением, и не является официальной позицией OkayCMS

Vanger M
Vanger M
Репутация: 5
Сообщения: 31
Зарегистрирован: 08.06.2016
С нами: 7 лет 9 месяцев

Сообщение #3 Vanger » 01.04.2021, 16:34

zyxer писал(а):данная статья не поможет https://simplamarket.com/blog/akkordeon-menyu-dlya-simplacms?
да, спасибо, вариант (после адаптации кода под окай, и сверять работу скрипта)

нашел более подходящий вариант, без скриптов (на форуме Simpla, чуть подправив под Okay)
вывод списка категорий с показом подкатегорий у активной, рекурсивная функция вывода дерева категорий
кому пригодится такой вид дерева категорий, достаточно удобно:

Код: Выделить всё

{* Рекурсивная функция вывода дерева категорий *}

            {function name=categories_tree}

            {if $categories}

            <div id="catalog_menu">

            <ul>

            {foreach $categories as $c1}

                {* Показываем только видимые категории *}

                {if $c1->visible}

                    <li>

                        <a id="m{$c1->id}" {if $category->id == $c1->id}class="selected"{/if} href="{*{$c1->url}*}{url_generator route="category" url=$c1->url}" data-category="{$c1->id}">{$c1->name}</a>

                            {if in_array($category->id, $c1->children)}

                            {categories_tree categories=$c1->subcategories}

                            {/if}

                    </li>

                {/if}

            {/foreach}

            </ul>
             
             </div>   

            {/if}
            {/function}
            {categories_tree categories=$categories}



а вот с работой сортировки товаров в каталоге (выбор нужного кол-ва результатов на странице), как ранее было - задачка
похоже что это убрали, очень жаль... (одно удобно сделали, что можно в админке задать кол-во, но не работает потом функция выбора в каталоге)
а доработку делать - править /Okay/Controllers/ файлы ProductsController.php и CategoryController.php

и мобильное меню бы улучшать, но там скриптом править mobile_menu.js и mobile_menu.tpl...
(при нажатии на категории и подкатегории - раскрытие списка, а выше название этой категории уже с активной ссылкой для перехода, так тоже достаточно удобно)


Название раздела: Полезные решения для OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Полезные решения для OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 1 гость