Инструменты пользователя

Инструменты сайта


wiki:tpl_file_features

Файл features.tpl

Файл features.tpl используется для вывода левого меню на сайте. По умолчанию в нем выводится меню каталога (категории), просмотренные товары и фильтр.

Пример вывода категорий

{* Вывод дерева категорий *}
{function name=catalog_tree}
    {if $categories}
        {* Первая итерация *}
        {if $level == 1}
            {* Заголовок блока *}
            <div class="h5 bg-info p-x-1 p-y-05">
                <span data-language="{$translate_id['features_categories']}">{$lang->features_categories}</span>
            </div>
            {* @END Заголовок блока *}
            <div class="nav-catalog p-x-05 m-b-2">
        {* Последующие итерации *}
        {else}
            <div id="cat_{$parent_id}" class="collapse{if $collapse_trigger == true} in{/if}">
        {/if}
        {foreach $categories as $c}
            {if $c->visible}
                {* Если есть подкатегории *}
                {if $c->subcategories}
                    <div class="nav-item">
                        {* Кнопка раскрывающая категорию *}
                        <button class="btn-catalog-collapse {if $category->id != $c->id} collapsed{/if}" type="button" data-toggle="collapse" data-target="#cat_{$c->id}" aria-expanded="{if $category->id != $c->id}true{else}false{/if}" aria-controls="cat_{$c->id}"></button>
                        {* @END Кнопка раскрывающая категорию *}
                        {* Название категории *}
                        <a class="nav-link{if $category->id == $c->id} link-red fn-collapsed{/if}" href="{$lang_link}catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
                        {* @END Название категории *}
                        {* Если подкатегорий больше одной, для деления блока на 2 колонки *}
                        {if $category->id == $c->id}
                            {assign var='collapse' value=true}
                        {else}
                            {assign var='collapse' value=false}
                        {/if}
                        {if $c->subcategories|count > 1}
                            {catalog_tree categories=$c->subcategories level=$level + 1 parent_id=$c->id two_col=true collapse_trigger=$collapse}
                        {else}
                            {catalog_tree categories=$c->subcategories level=$level + 1 parent_id=$c->id collapse_trigger=$collapse}
                        {/if}
                    </div>
                {* Если категория без подкатегорий *}
                {else}
                    {* Название категории *}
                    <div class="nav-item">
                        <a class="nav-link{if $category->id == $c->id} link-red fn-collapsed{/if}" href="{$lang_link}catalog/{$c->url}" data-category="{$c->id}">{$c->name|escape}</a>
                    </div>
                    {* @END Название категории *}
                {/if}
            {/if}
        {/foreach}
        {* Первая итерация *}
        {if $level == 1}
            </div>
        {* Последующие итерации *}
        {else}
            </div>
        {/if}
    {/if}
{/function}
{catalog_tree categories=$categories level=1}
{* @END Вывод дерева категорий *}

Сначала объявляем функцию с именем categories_tree.
После объявления вызываем ее {categories_tree categories=$categories level=1} и передаем в качестве входных параметров categories массив {$categories} и переменной level задаем единицу.
Внутри функции проверяем что у нас есть категории {if $categories} далее в цикле {foreach}{/foreach} перебираем категории убеждаясь с каждой итерацией что категория включен в админ-панеле {if $c->visible}.
Внутри условия {if $c->visible} {/if} имея только активные категории добавляем еще одно условие

{if $c->subcategories}
    {* здесь выводим категорию у которой есть дочерние категории, и кнопку на разворачивание подкатегории *}
    {* также здесь вызываем функцию "catalog_tree", передаем ей дочерние категории и "level" увеличиваем на 1 *}
    {catalog_tree categories=$c->subcategories level=$level + 1}
{else}
    {* здесь выводим просто название категории, так как у этой категории нет дочерних *}
{/if}

Переменная {$level} может пригодится в верстке.

В результате получим приблизительно такой вывод (здесь div-ы заменены на ul и li для наглядности)

<ul>
    <li>
        <a  href="catalog/categoty_url" data-category="1">Категория_1</a>
    </li>
    <li class="parent">
        <a class="selected" href="catalog/categoty_url2" data-category="2">Категория_2</a>
        <div class="submenu">        
            <ul>
                <li class="parent ">
                    <a  href="catalog/categoty_url3" data-category="3">Категория_3</a>
                    <div class="submenu">        
                        <ul>
                            <li>
                                <a  href="catalog/categoty_url4" data-category="4">Категория_4</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>

data атрибут data-category добавляется к ссылкам затем, чтобы всплывающая подсказка для администратора «знала» на какую категорию строить URL 1).
Совет: используйте проверку {if $category->id == $c->id}class=«current»{/if} для добавления класса current категории (в дереве категорий) в которой пользователь находится в данный момент, и по этому классу уже можно стилизовать текущую категорию (выделять цветом, шрифтом…)

Фильтр по цене

{* Аяксовый фильт по цене *}
{if $prices && $products|count > 0}
    {* Заголовок блока *}
    <div class="h5 bg-info p-x-1 p-y-05">
        <span data-language="{$translate_id['features_price']}">{$lang->features_price}</span>
    </div>
    {* @END Заголовок блока *}
    <div class="m-b-2">
        <div class="row m-y-1 p-x-05">
            {* Минимальная цена товаров *}
            <div class="col-xs-6">
                <input id="fn-slider-min" name="p[min]" value="{$prices->current->min|default:$prices->range->min}" data-price="{$prices->range->min}" type="text" class="form-control" title="">
            </div>
            {* @END Минимальная цена товаров *}
            {* Максимальная цена товаров *}
            <div class="col-xs-6">
                <input id="fn-slider-max" name="p[max]" value="{$prices->current->max|default:$prices->range->max}" data-price="{$prices->range->max}" type="text" class="form-control" title="">
            </div>
            {* @END Максимальная цена товаров *}
        </div>
        {* Слайдер цен *}
        <div id="fn-slider-price" class="okaycms"></div>
        {* @END Слайдер цен *}
    </div>
{/if}
{* @END Аяксовый фильт по цене *}

В input минимальной цены указываем значение переменной {$prices->current->min}2), если она пуста, выводим значение переменной {$prices->range->min}3). С максимальной ценой аналогично.

Фильтр по свойствам

{* Фильтр по свойствам *}
{if $features}
    {foreach $features as $key=>$f}
        {* Название свойства *}
        <div class="h5 bg-info p-x-1 p-y-05" data-feature="{$f->id}">{$f->name}</div>
        {* @END Название свойства *}
        <div class="m-b-2 p-x-05">
            {* Сброс всех свойств *}
            <div>
                <label class="c-input c-checkbox">
                    <input onchange="window.location.href='{furl params=[$f->url=>null, page=>null]}'" type="checkbox"{if !$smarty.get.$key} checked{/if}/>
                    <span class="c-indicator"></span>
                    <span data-language="{$translate_id['features_all']}">{$lang->features_all}</span>
                </label>
            </div>
            {* @END Сброс всех свойств *}
            {* Значения свойств *}
            {foreach $f->options as $o}
                <div>
                    <label class="c-input c-checkbox">
                        <input onchange="window.location.href='{furl params=[$f->url=>$o->translit, page=>null]}'" type="checkbox"{if $smarty.get.{$f@key} && in_array($o->translit,$smarty.get.{$f@key})} checked{/if}/>
                        <span class="c-indicator"></span>
                        {$o->value|escape}
                    </label>
                </div>
            {/foreach}
            {* @END Значения свойств *}
        </div>
    {/foreach}
{/if}
{* @END Фильтр по свойствам *}

Проверяем если существует переменная {$features} выводим фильтр по свойствам.

В цикле {foreach}{/foreach} перебираем массив свойств, выводим название свойства, затем еще в одном цикле {foreach}{/foreach} перебираем массив значений этого свойства и выводим как чекбоксы.

«Вешаем» на чекбокс событие «изменение состояния» перенаправить на URL с данным свойством и его выбранным значением. Для формирования URL для свойства используйте плагин {furl}

Фильтр по брендам

{* Фильтр по брендам *}
{if $category->brands}
    {* Заголовок блока *}
    <div class="h5 bg-info p-x-1 p-y-05">
        <span data-language="{$translate_id['features_manufacturer']}">{$lang->features_manufacturer}</span>
    </div>
    {* @END Заголовок блока *}
    <div class="m-b-2 p-x-05">
        {* Сброс всех брендов *}
        <div>
            <label class="c-input c-checkbox">
                <input onchange="window.location.href='{furl params=[brand=>null, page=>null]}'" type="checkbox"{if !$brand->id && !$smarty.get.b} checked{/if}/>
                <span class="c-indicator"></span>
                <span data-language="{$translate_id['features_all']}">{$lang->features_all}</span>
            </label>
        </div>
        {* @END Сброс всех брендов *}
        {* Список брендов *}
        {foreach $category->brands as $b}
            <div>
                <label class="c-input c-checkbox" data-brand="{$b->id}">
                    <input onchange="window.location.href='{furl params=[brand=>$b->url, page=>null]}'" type="checkbox"{if $brand->id == $b->id || $smarty.get.b && in_array($b->id,$smarty.get.b)} checked{/if}/>
                    <span class="c-indicator"></span>
                    {$b->name|escape}
                </label>
            </div>
        {/foreach}
        {* @END Список брендов *}
    </div>
{/if}
{* @END Фильтр по брендам *}

Если переменная {$category->brands}4) существует выводим фильтр по брендам.
По аналогии с фильтром по свойствам выводим чекбокс при изменении состояния которого, происходит перенаправление на эту же страницу с примененным фильтром по бренду. Для генерации URL используйте плагин {furl}

Просмотренные товары

Используя плагин get_browsed_products вызываем просмотренные товары и записываем их в массив {$browsed_products}, затем в цикле {foreach}{/foreach} перебираем товары записывая с каждой итерацией цикла один товар в объект {$browsed_product} 5) и выводим товар

1) содержит id категории
2) содержит значение минимальной цены которую задали, если применялся фильтр по цене
3) содержит минимальную цену из диапазона цен
4) бренды товаров этой категории
5) ВНИМАНИЕ объект {$browsed_product} не имеет свойств variant и variants
wiki/tpl_file_features.txt · Последние изменения: 2016/02/12 11:20 (внешнее изменение)