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

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


wiki:tpl_file_features

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

wiki:tpl_file_features [2016/02/12 11:20] (текущий)
Строка 1: Строка 1:
 +====== Файл features.tpl ======
 +Файл **features.tpl** используется для вывода левого меню на сайте. По умолчанию в нем выводится меню каталога (категории),​ просмотренные товары и фильтр.\\
 +
 +==== Пример вывода категорий ====
 +
 +<​HTML>​
 +{* Вывод дерева категорий *}
 +{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 Вывод дерева категорий *}
 +</​HTML>​
 +
 +Сначала объявляем функцию с именем ''​categories_tree''​. \\
 +После объявления вызываем ее **''​{categories_tree categories=$categories level=1}''​** и передаем в качестве входных параметров ''​categories''​ массив **[[wiki:​variable_categories|{$categories}]]** и переменной ''​level''​ задаем единицу.\\
 +Внутри функции проверяем что у нас есть категории ''​{if $categories}''​ далее в цикле **''​{foreach}{/​foreach}''​** перебираем категории убеждаясь с каждой итерацией что категория включен в админ-панеле ''​{if $c->​visible}''​.\\
 +Внутри условия ''​{if $c->​visible} {/​if}''​ имея только активные категории добавляем еще одно условие
 +<code smarty>
 +{if $c->​subcategories}
 +    {* здесь выводим категорию у которой есть дочерние категории,​ и кнопку на разворачивание подкатегории *}
 +    {* также здесь вызываем функцию "​catalog_tree",​ передаем ей дочерние категории и "​level"​ увеличиваем на 1 *}
 +    {catalog_tree categories=$c->​subcategories level=$level + 1}
 +{else}
 +    {* здесь выводим просто название категории,​ так как у этой категории нет дочерних *}
 +{/if}
 +</​code> ​
 +
 +Переменная **{$level}** может пригодится в верстке.
 +
 +В результате получим приблизительно такой вывод (здесь div-ы заменены на ul и li для наглядности)
 +<​HTML>​
 +<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>
 +</​HTML>​
 +
 +data атрибут **''​data-category''​** добавляется к ссылкам затем, чтобы всплывающая подсказка для администратора "​знала"​ на какую категорию строить URL ((содержит id категории)).\\
 +**Совет:​** используйте проверку ''​{if $category->​id == $c->​id}class="​current"​{/​if}''​ для добавления класса ''​current''​ категории (в дереве категорий) в которой пользователь находится в данный момент,​ и по этому классу уже можно стилизовать текущую категорию (выделять цветом,​ шрифтом...)
 +
 +
 +==== Фильтр по цене ====
 +
 +<code smarty>
 +{* Аяксовый фильт по цене *}
 +{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 Аяксовый фильт по цене *}
 +</​code>​
 +
 +В input минимальной цены указываем значение переменной **{$prices->​current->​min}**((содержит значение минимальной цены которую задали,​ если применялся фильтр по цене)), если она пуста, выводим значение переменной **{$prices->​range->​min}**((содержит минимальную цену из диапазона цен)). С максимальной ценой аналогично.
 +
 +==== Фильтр по свойствам ====
 +
 +<code smarty>
 +{* Фильтр по свойствам *}
 +{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 Фильтр по свойствам *}
 +</​code>​
 +
 +Проверяем если существует переменная [[wiki:​variable_features|{$features}]] выводим фильтр по свойствам.
 +
 +В цикле ''​{foreach}{/​foreach}''​ перебираем массив свойств,​ выводим название свойства,​ затем еще в одном цикле ''​{foreach}{/​foreach}''​ перебираем массив значений этого свойства и выводим как чекбоксы.
 +
 +"​Вешаем"​ на чекбокс событие "​изменение состояния"​ перенаправить на URL с данным свойством и его выбранным значением. Для формирования URL для свойства используйте плагин [[wiki:​by_tpl_plugin_furl|{furl}]]
 +
 +==== Фильтр по брендам ====
 +
 +<code smarty>
 +{* Фильтр по брендам *}
 +{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 Фильтр по брендам *}
 +</​code>​
 +
 +Если переменная [[wiki:​variable_brands|{$category->​brands}]]((бренды товаров этой категории)) существует выводим фильтр по брендам.\\
 +По аналогии с фильтром по свойствам выводим чекбокс при изменении состояния которого,​ происходит перенаправление на эту же страницу с примененным фильтром по бренду. Для генерации URL используйте плагин [[wiki:​by_tpl_plugin_furl|{furl}]]
 +
 +==== Просмотренные товары ====
 +
 +Используя плагин **[[wiki:​by_tpl_plugin_get_browsed_products|get_browsed_products]]** вызываем просмотренные товары и записываем их в массив **[[wiki:​variable_products|{$browsed_products}]]**,​ затем в цикле **''​{foreach}{/​foreach}''​**
 +перебираем товары записывая с каждой итерацией цикла один товар в объект **[[wiki:​variable_product|{$browsed_product}]]** ((**ВНИМАНИЕ** объект **{$browsed_product}** не имеет свойств **[[wiki:​variable_product-variant|variant]]** и **[[wiki:​variable_product-variants|variants]]**)) и выводим товар
  
wiki/tpl_file_features.txt · Последние изменения: 2016/02/12 11:20 (внешнее изменение)