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

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


wiki:tpl_file_comparison

Различия

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

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

wiki:tpl_file_comparison [2016/02/08 12:01] (текущий)
Строка 1: Строка 1:
 +====== Файл comparison.tpl ======
  
 +Файл **comparison.tpl** используется в папке сравнения.
 +
 +==== Пример файла ====
 +
 +<​HTML>​
 +{* Тайтл страницы *}
 +{$meta_title = $lang->​comparison_title scope=parent}
 +{* @END Тайтл страницы *}
 +<div class="​container m-b-2">​
 +    {* Хлебные крошки *}
 +    {include file='​breadcrumb.tpl'​}
 +    {* @END Хлебные крошки *}
 +    {* Заголовок страницы *}
 +    <h1 class="​m-b-1"><​span data-language="​{$translate_id['​comparison_header'​]}">​{$lang->​comparison_header}</​span></​h1>​
 +    {* @END Заголовок страницы *}
 +    {if $comparison->​products}
 +        <div class="​row">​
 +            <div class="​col-lg-3 p-a-0">​
 +                <div class="​p-a-0">​
 +                    <div class="​fn-product fn-resize border-b-1-primary show-container">​
 +                        {* Показать скрыть одинаковые характеристики *}
 +                        {if $comparison->​products|count > 1}
 +                            <ul class="​fn-show okaycms nav nav-tabs">​
 +                                <li class="​nav-item">​
 +                                    <a href="#​show_all"​ class="​nav-link active"​ data-language="​{$translate_id['​comparison_all'​]}">​{$lang->​comparison_all}</​a>​
 +                                </li>
 +                                <li class="​nav-item">​
 +                                    <a href="#​show_dif"​ class="​nav-link unique"​ data-language="​{$translate_id['​comparison_unique'​]}">​{$lang->​comparison_unique}</​a>​
 +                                </li>
 +                            </ul>
 +                        {/if}
 +                        {* @END Показать скрыть одинаковые характеристики *}
 +                    </​div>​
 +                    {* Рейтинг товара *}
 +                    <div class="​cprs_rating p-y-05 p-x-05"​ data-use="​cprs_rating">​
 +                        <span data-language="​{$translate_id['​product_rating'​]}">​{$lang->​product_rating}</​span>​
 +                    </​div>​
 +                    {* @END Рейтинг товара *}
 +                    {* Названия характеристик *}
 +                    {if $comparison->​features}
 +                        {foreach $comparison->​features as $id=>​$cf}
 +                            <div class="​p-y-05 p-x-05 {if $cf@index % 2 == 0 }bg-info {/​if}cprs_feature_{$id} cell{if $cf->​not_unique} not_unique{/​if}"​ data-use="​cprs_feature_{$id}">​
 +                                <span data-feature="​{$cf->​id}">​{$cf->​name}</​span>​
 +                            </​div>​
 +                        {/foreach}
 +                    {/if}
 +                    {* @END Названия характеристик *}
 +                </​div>​
 +            </​div>​
 +            <div class="​col-lg-9 row fn-comparison_products okaycms"​ data-products="​3">​
 +                {foreach $comparison->​products as $id=>​$cp}
 +                    <div class="​col-lg-4 p-a-0">​
 +                        {include file="​tiny_products_comparison.tpl"​}
 +                        {* Рейтинг товара *}
 +                        <div id="​product_{$cp->​id}"​ class="​p-y-05 p-x-05 text-xs-left cprs_rating">​
 +                            <span class="​rating_starOff">​
 +                                <span class="​rating_starOn"​ style="​width:​{$cp->​rating*90/​5|string_format:'​%.0f'​}px;"></​span>​
 +                            </​span>​
 +                        </​div>​
 +                        {* @END Рейтинг товара *}
 +                        {* Характеристики *}
 +                        {if $cp->​features}
 +                            {foreach $cp->​features as $id=>​$value}
 +                                <div class="​p-y-05 p-x-05 {if $value@index % 2 == 0 }bg-info {/​if}cprs_feature_{$id} cell{if $comparison->​features.{$id}->​not_unique} not_unique{/​if}">​
 +                                    {$value|default:"&​mdash;"​}
 +                                </​div>​
 +                            {/foreach}
 +                        {/if}
 +                        {* @END Характеристики *}
 +                    </​div>​
 +                {/foreach}
 +            </​div>​
 +        </​div>​
 +    {else}
 +        <span data-language="​{$translate_id['​comparison_empty'​]}">​{$lang->​comparison_empty}</​span>​
 +    {/if}
 +</​div>​
 +</​HTML>​
 +
 +==== Подробнее о файле ====
 +
 +Формируем заголовок страницы
 +
 +<​HTML>​
 +<​h1><​span data-language="​{$translate_id['​comparison_header'​]}">​{$lang->​comparison_header}</​span></​h1>​
 +</​HTML>​
 +
 +В **''​data-language''​** указываем id **перевода** на который должна вести "​Всплывающая подсказка администратора" ​
 +
 +В <​html><​div class="​col-lg-3 p-a-0">​...</​div></​html>​ формируем левый блок папки сравнения с названиями полей ((названия свойств и т.д.)).\\
 +В <​html><​div class="​col-lg-9 row fn-comparison_products okaycms"​ data-products="​3">​...</​div></​html>​ формируем правый блок папки сравнения с товарами. В ''​data-products''​ указываем сколько товаров может быть в папке сравнения без слайдера,​ свыше включается слайдер. По <​html><​div class="​fn-comparison_products">​...</​div></​html>​ [[wiki:​by_js_file_okay#​слайдер_в_папке_сравнения|инициализируется слайдер в папке сравнения]].
 +
 +==== Формирование папки сравнения ====
 +
 +=== Левая часть ===
 +
 +В левой колонке папки сравнения <​html><​div class="​col-lg-3 p-a-0">​...</​div></​html>​ выводим:​ \\
 +строка 1) кнопки "​только отличия"​ и "​все"​\\
 +строка 2) название строки "​рейтинг товара"​\\
 +все последующие строки - названия свойств\\
 +
 +Выводим названия свойств товаров перебирая массив ''​{$comparison->​features}''​
 +<​HTML>​
 +{if $comparison->​features}
 +    {foreach $comparison->​features as $id=>​$cf}
 +        <div class="​p-y-05 p-x-05 {if $cf@index % 2 == 0 }bg-info {/​if}cprs_feature_{$id} cell{if $cf->​not_unique} not_unique{/​if}"​ data-use="​cprs_feature_{$id}">​
 +            <span data-feature="​{$cf->​id}">​{$cf->​name}</​span>​
 +        </​div>​
 +    {/foreach}
 +{/if}
 +</​HTML>​
 +
 +С каждой итерацией цикла проверяем,​ если свойство не уникально [[wiki:​variable_comparison#​подробнее_о_свойствах_объекта_comparison-_features_x|{$cf->​not_unique}]],​ то добавляем класс этому свойству ''​not_unique'',​ по которому будут скрываться не уникальные значения по нажатию на "​только отличия"​.\\
 +При каждой второй итерации цикла ''​{if $cf@index % 2 == 0 }bg-info {/​if}''​ добавляем класс ''​bg-info''​ по которому устанавливаем фон на каждую вторую строку свойств
 +
 +=== Правая часть ===
 +
 +Перебираем массив **[[wiki:​variable_comparison|{$comparison->​products}]]**.\\
 +
 +В правой колонке папки сравнения <​html><​div class="​col-lg-9 row fn-comparison_products okaycms"​ data-products="​3">​...</​div></​html>​ выводим:​ \\
 +
 +строка 1) выводим превью товара (оно в отдельном файле [[wiki:​tpl_file_tiny_products_comparison|tiny_products_comparison.tpl]])\\
 +строка 2) выводим рейтинг товара в "​звездочках"​\\
 +<​HTML>​
 +<div id="​product_{$cp->​id}"​ class="​p-y-05 p-x-05 text-xs-left cprs_rating">​
 +    <span class="​rating_starOff">​
 +        <span class="​rating_starOn"​ style="​width:​{$cp->​rating*90/​5|string_format:'​%.0f'​}px;"></​span>​
 +    </​span>​
 +</​div>​
 +</​HTML>​
 +
 +все последующие строки - значения свойств товара\\
 +
 +<​HTML>​
 +{foreach $cp->​features as $id=>​$value}
 +    <div class="​p-y-05 p-x-05 {if $value@index % 2 == 0 }bg-info {/​if}cprs_feature_{$id} cell{if $comparison->​features.{$id}->​not_unique} not_unique{/​if}">​
 +        {$value|default:"&​mdash;"​}
 +    </​div>​
 +{/foreach}
 +</​HTML>​
 +В объекте ''​{$cp}''​ в данном случае хранится один товар. Перебирая его свойства выводим значения свойств,​ если значения нет, выводим символ "&​mdash;"​ (прочерк)
wiki/tpl_file_comparison.txt · Последние изменения: 2016/02/08 12:01 (внешнее изменение)