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

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


wiki:tpl_file_product

Различия

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

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

wiki:tpl_file_product [2016/02/14 01:38] (текущий)
Строка 1: Строка 1:
 +====== Файл product.tpl ======
  
 +Файл **product.tpl** содержит шаблон вывода одного товара (карточка товара). ​
 +
 +==== Вывод изображения товара ====
 +
 +<​HTML>​
 +{if $product->​image}
 +    <div class="​col-lg-5">​
 +        <a class="​fn-zoom okaycms btn-block relative border-a-1-info text-xs-center"​ href="​{$product->​image->​filename|resize:​800:​600:​w}"​ rel="​group">​
 +            {* Промо изображение *}
 +            {if $product->​special}
 +                <img class="​card-spec"​ alt='​{$product->​sp_img}'​ title='​{$product->​sp_img}' ​ src='​files/​special/​{$product->​special}'/>​
 +            {/if}
 +            {* @END Промо изображение *}
 +            {* Большое фото товара *}
 +            <img class="​fn-img"​ src="​{$product->​image->​filename|resize:​300:​300}"​ alt="​{$product->​name|escape}"/>​
 +            {* @END Большое фото товара *}
 +        </a>
 +        {* Дополнительные фото продукта *}
 +        {if $product->​images|count > 1}
 +            <div class="​row m-y-2 fn-slick-images okaycms">​
 +                {* cut удаляет первую фотографию,​ если нужно начать 2-й - пишем cut:2 и тд *}
 +                {foreach $product->​images|cut as $i=>​$image}
 +                    <div class="​col-xs-4 col-lg-3">​
 +                        <a class="​fn-zoom okaycms btn-block border-a-1-info text-xs-center product-images"​ href="​{$image->​filename|resize:​800:​600:​w}"​ rel="​group">​
 +                            <img src="​{$image->​filename|resize:​87:​72}"​ alt="​{$product->​name|escape}"/>​
 +                        </a>
 +                    </​div>​
 +                {/foreach}
 +            </​div>​
 +        {/if}
 +        {* @END Дополнительные фото продукта *}
 +    </​div>​
 +{else}
 +    <div class="​col-lg-5">​
 +        <a class="​fn-zoom okaycms btn-block relative border-a-1-info text-xs-center"​ href="​design/​{$settings->​theme}/​images/​no_image.png"​ rel="​group">​
 +            {* Промо изображение *}
 +            {if $product->​special}
 +                <img class="​card-spec"​ alt='​{$product->​sp_img}'​ title='​{$product->​sp_img}' ​ src='​files/​special/​{$product->​special}'/>​
 +            {/if}
 +            {* @END Промо изображение *}
 +            {* Большое фото товара *}
 +            <img class="​fn-img"​ src="​design/​{$settings->​theme}/​images/​no_image.png"​ height="​300"​ alt="​{$product->​product->​name|escape}"/>​
 +            {* @END Большое фото товара *}
 +        </a>
 +    </​div>​
 +{/if}
 +
 +</​HTML>​
 +
 +Если существует объект [[wiki:​variable_product-image|{$product->​image}]] а соответственно и существует массив [[wiki:​variable_product-images|{$product->​images}]]((доп. фото товара)),​ то выводим изображение товара и (если есть) промо-изображение товара. Изображение выводится в теле ссылки,​ атрибут ''​href''​ которой равен этому же изображению только с большими размерами [[wiki:​by_tpl_modifier_resize|ресайза изображения]] и ''​rel''​ равен ''"​group"''​((нужно чтобы fancybox мог переключать следующее / предыдущее изображение)).
 +
 +Далее проверяем если в массиве [[wiki:​variable_product-images|{$product->​images}]] больше одного элемента,​ выводим в цикле ''​{foreach}{/​foreach}''​ дополнительные фото товара,​ так же в ссылке и с ''​rel="​group"''​.
 +
 +Иначе если у товара нет изображения,​ выводим "​заглушку"​ ''​no_image.png''​ и (если есть) промо-изображение товара.
 +
 +Далее выводим информацию о товаре:​ цена основного варианта,​ артикул основного варианта,​ старая цена основного варианта (см. [[wiki:​variable_product-variant|{$product->​variant}]]),​ рейтинг товара.
 +
 +
 +=== Блок выбора варианта ===
 +
 +Формируем выпадающий список с вариантами товара перебирая массив [[wiki:​variable_product-variants|{$product->​variants}]]
 +<​HTML>​
 +<select name="​variant"​ class="​fn-variant okaycms form-control c-select m-t-1 m-b-1-md_down{if $product->​variants|count < 2} hidden-xs-up{/​if}">​
 +    {foreach $product->​variants as $v}
 +        <option value="​{$v->​id}"​ data-price="​{$v->​price|convert}"​ data-stock="​{$v->​stock}"​{if $v->​compare_price > 0} data-cprice="​{$v->​compare_price|convert}"​{/​if}{if $v->sku} data-sku="​{$v->​sku}"​{/​if}{if $v@first} selected{/​if}>​{if $v->​name}{$v->​name}{else}{$product->​name|escape}{/​if}</​option>​
 +    {/foreach}
 +</​select>​
 +</​HTML>​
 +
 +=== Устанавливаем data-атрибуты для option ===
 +
 +  * **data-price** - цена варианта
 +  * **data-stock** - количество на складе варианта
 +  * **data-cprice** - старая цена варианта (если задана)
 +  * **data-sku** - артикул варианта (если задан)
 +
 +data-атрибуты нужны для [[wiki:​by_js_file_okay#​смена_варианта_в_превью_товара_и_в_карточке|смены вариантов]]
 +
 +=== Создаем кнопки "​Нет в наличии"​ и "​Предзаказ"​ ===
 +<​HTML>​
 +{* Нет на складе *}
 +<div class="​fn-not_preorder form-group{if $product->​variant->​stock > 0 || $product->​variant->​stock == 0 && $settings->​is_preorder} hidden-xs-up{/​if}">​
 +    <button class="​btn btn-danger-outline btn-block disabled h5" type="​button"​ data-language="​{$translate_id['​product_out_of_stock'​]}">​{$lang->​product_out_of_stock}</​button>​
 +</​div>​
 +{* @END Нет на складе *}
 +{* Предзаказ *}
 +<div class="​fn-is_preorder form-group{if $product->​variant->​stock > 0 || $product->​variant->​stock == 0 && !$settings->​is_preorder} hidden-xs-up{/​if}">​
 +    <button class="​btn btn-warning-outline btn-block i-preorder"​ type="​submit"​ data-language="​{$translate_id['​product_pre_order'​]}">​{$lang->​product_pre_order}</​button>​
 +</​div>​
 +{* @END Предзаказ *}
 +</​HTML>​
 +
 +Если количество варианта 0 и в настройках "​Если нет в наличии"​ указано "​Предзаказ"​ кнопке "​Нет в наличии"​ добавляем класс ''​hidden-xs-up''​ ((Который скрывает кнопку "​Нет в наличии"​))
 +
 +Иначе если установлено "​Нет на складе"​ то кнопке "​Предзаказ"​ добавляем класс ''​hidden-xs-up''​ ((Который скрывает кнопку "​Предзаказ"​))
 +
 +=== Выбор количества ===
 +
 +<​HTML>​
 +<div class="​fn-product-amount fn-is_stock okaycms text-xs-center text-md-left{if $product->​variant->​stock < 1} hidden-xs-up{/​if}">​
 +    {* Кол-во товаров *}
 +    <span class="​minus">&​minus;</​span>​
 +    <input class="​form-control"​ type="​text"​ name="​amount"​ value="​1"​ data-max="​{$product->​variant->​stock}">​
 +    <span class="​plus">&​plus;</​span>​
 +    {* @END Кол-во товаров *}
 +    {* Кнопка добавления в корзину *}
 +    <button class="​btn btn-warning i-add-cart{if $product->​variant->​stock < 1} hidden-xs-up{/​if}"​ type="​submit"​ data-language="​{$translate_id['​product_add_cart'​]}">​{$lang->​product_add_cart}</​button>​
 +    {* @END Кнопка добавления в корзину *}
 +</​div>​
 +</​HTML>​
 +
 +См. [[wiki:​by_js_file_okay#​количество_товара_в_карточке_и_корзине|смена количества товара]]
 +
 +=== Добавление / удаление из сравнения ===
 +
 +<​HTML>​
 +<div class="​form-group m-t-1 text-xs-center text-md-left hidden-md-down">​
 +    {if !in_array($product->​id,​$comparison->​ids)}
 +        <a class="​i-comparison fn-comparison okaycms selected"​ href="#"​ data-id="​{$product->​id}"​ title="​{$lang->​product_add_comparison}"​ data-result-text="​{$lang->​product_remove_comparison}"​ data-language="​{$translate_id['​product_add_comparison'​]}"></​a>​
 +    {else}
 +        <a class="​i-comparison fn-comparison okaycms"​ href="#"​ data-id="​{$product->​id}"​ title="​{$lang->​product_remove_comparison}"​ data-result-text="​{$lang->​product_add_comparison}"​ data-language="​{$translate_id['​product_remove_comparison'​]}"></​a>​
 +    {/if}
 +</​div>​
 +</​HTML>​
 +
 +Если id товара нет в массиве [[wiki:​variable_comparison|{$comparison->​ids}]] выводим кнопку "​добавить в сравнение",​ иначе "​удалить из сравнения"​. Отличаются они названием,​ значением атрибута ''​data-result-text''​ и классом ''​selected''​.
 +
 +См. [[wiki:​by_js_file_okay#​добавление_удаление_товаров_из_сравнения|добавление / удаление товаров из сравнения]]
 +
 +=== Добавление / удаление из избранного ===
 +
 +<​HTML>​
 +<div class="​form-group text-xs-center text-md-left m-t-1">​
 +    {if $product->​id|in_array:​$wished_products}
 +        <a href="#"​ data-id="​{$product->​id}"​ class="​i-favorites fn-wishlist okaycms selected"​ title="​{$lang->​product_remove_favorite}"​ data-result-text="​{$lang->​product_add_favorite}"​ data-language="​{$translate_id['​product_remove_favorite'​]}"></​a>​
 +    {else}
 +        <a href="#"​ data-id="​{$product->​id}"​ class="​i-favorites fn-wishlist okaycms"​ title="​{$lang->​product_add_favorite}"​ data-result-text="​{$lang->​product_remove_favorite}"​ data-language="​{$translate_id['​product_add_favorite'​]}"></​a>​
 +    {/if}
 +</​div>​
 +</​HTML>​
 +
 +Если id товара есть в массиве [[wiki:​variable_wished_products|{$wished_products}]] выводим кнопку на удаление из избранного,​ иначе выводим кнопку на добавление в избранное. Отличаются они названием,​ значением атрибута ''​data-result-text''​ и классом ''​selected''​.
 +
 +См. [[wiki:​by_js_file_okay#​функция_добавления_удаления_в_папку_избранного|добавление / удаление из избранного]]
 +
 +=== Вывод характеристик ===
 +
 +<​HTML>​
 +<table class="​table table-striped">​
 +    {foreach $product->​features as $f}
 +        <tr>
 +            <​td>​{$f->​name}</​td>​
 +            <​td>​{$f->​value}</​td>​
 +        </tr>
 +    {/foreach}
 +</​table>​
 +</​HTML>​
 +
 +Перебираем массив [[wiki:​variable_product-features|{$product->​features}]] для вывода свойств товара.
 +
 +=== Вывод комментариев товара ===
 +
 +<​HTML>​
 +{foreach $comments as $comment}
 +    {* Якорь комментария *}
 +    {* после добавления комментария кидает автоматически по якорю *}
 +    <a name="​comment_{$comment->​id}"></​a>​
 +    {* @END Якорь комментария *}
 +    <div class="​m-b-1">​
 +        {* Имя комментария *}
 +        <div>
 +            <span class="​h5">​{$comment->​name|escape}</​span>​
 +        </​div>​
 +        {* @END Имя комментария *}
 +        <div class="​p-y-05">​
 +            {* Дата комментария *}
 +            <span class="​blog-data static">​{$comment->​date|date},​ {$comment->​date|time}</​span>​
 +            {* @END Дата комментария *}
 +            {* Статус комментария *}
 +            {if !$comment->​approved}
 +                <span class="​font-weight-bold text-muted"​ data-language="​{$translate_id['​post_comment_status'​]}">​({$lang->​post_comment_status})</​span>​
 +            {/if}
 +            {* @END Статус комментария *}
 +        </​div>​
 +        {* Тело комментария *}
 +        {$comment->​text|escape|nl2br}
 +        {* @END Тело комментария *}
 +    </​div>​
 +{/foreach}
 +</​HTML>​
 +
 +Для вывода комментариев перебираем массив [[wiki:​variable_comments|{$comments}]].
 +
 +=== Вывод предыдущего / следующего товаров ===
 +
 +Для вывода предыдущего / следующего товаров используйте переменные [[wiki:​variable_prev_next_product|{$prev_product} и {$next_product}]] соответственно.
 +
 +=== Вывод связанных товаров ===
 +
 +<​HTML>​
 +{foreach $related_products as $product}
 +    <div class="​col-md-4 col-lg-4 col-xl-3{if $product@iteration == 4} hidden-lg{/​if}">​
 +        {include "​tiny_products.tpl"​}
 +    </​div>​
 +{/foreach}
 +</​HTML>​
 +
 +Для вывода связанных товаров необходимо перебирать массив {$related_products},​ по структуре он аналогичен [[wiki:​variable_products|{$products}]]
wiki/tpl_file_product.txt · Последние изменения: 2016/02/14 01:38 (внешнее изменение)