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

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


wiki:tpl_file_tiny_products

Различия

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

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

wiki:tpl_file_tiny_products [2016/02/08 16:36] (текущий)
Строка 1: Строка 1:
 +====== Файл tiny_products.tpl ======
  
 +Файл **tiny_products.tpl** выводит превью одного товара. Используется на главной,​ в каталоге на странице товара (вывод связанных товаров)
 +
 +==== Пример файла ====
 +
 +<​HTML>​
 +<div class="​fn-product card">​
 +    <div class="​card-block fn-transfer">​
 +        {* Изображение товара *}
 +        <a class="​card-image m-b-1" href="​{$lang_link}products/​{$product->​url}">​
 +            {if $product->​image->​filename}
 +                <img class="​fn-img"​ src="​{$product->​image->​filename|resize:​219:​172}"​ alt="​{$product->​name|escape}"/>​
 +                {if $product->​special}
 +                    <img class="​card-spec"​ src='​files/​special/​{$product->​special}'​ alt='​{$product->​sp_img}'/>​
 +                {/if}
 +            {else}
 +                <img class="​fn-img"​ src="​design/​{$settings->​theme}/​images/​no_image.png"​ alt="​{$product->​name|escape}"/>​
 +                {if $product->​special}
 +                    <img class="​card-spec"​ src='​files/​special/​{$product->​special}'​ alt='​{$product->​sp_img}'/>​
 +                {/if}
 +            {/if}
 +        </a>
 +        {* @END Изображение товара *}
 +        {* Название товара *}
 +        <div class="​card-title m-b-1">​
 +            <a data-product="​{$product->​id}"​ href="​{$lang_link}products/​{$product->​url}">​{$product->​name|escape}</​a>​
 +        </​div>​
 +        {* @END Название товара *}
 +        <div class="​row card-price-block">​
 +            {* Старая цена *}
 +            <div class="​col-xs-6 text-line-through text-red{if !$product->​variant->​compare_price} hidden-xs-up{/​if}">​
 +                <span class="​fn-old_price">​{$product->​variant->​compare_price|convert}</​span>​ {$currency->​sign|escape}
 +            </​div>​
 +            {* @END Старая цена *}
 +            {* Цена *}
 +            <div class="​{if !$product->​variant->​compare_price}col-xs-12{else}col-xs-6{/​if} h5 font-weight-bold m-b-0">​
 +                <span class="​fn-price">​{$product->​variant->​price|convert}</​span>​ {$currency->​sign|escape}
 +            </​div>​
 +            {* @END Цена *}
 +        </​div>​
 +        <form class="​fn-variants okaycms"​ action="/​{$lang_link}cart">​
 +            {* Варианты товара *}
 +            <select name="​variant"​ class="​fn-variant okaycms form-control c-select{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>​
 +            {* @END Варианты товара *}
 +            {* Нет на складе *}
 +            <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['​tiny_products_out_of_stock'​]}">​{$lang->​tiny_products_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['​tiny_products_pre_order'​]}">​{$lang->​tiny_products_pre_order}</​button>​
 +            </​div>​
 +            {* @END Предзаказ *}
 +            <div class="​input-group">​
 +                {* Сравнение *}
 +                <div class="​input-group-btn text-xs-right">​
 +                    {if !in_array($product->​id,​$comparison->​ids)}
 +                        <a class="​btn-comparison fn-comparison okaycms hidden-md-down selected"​ href="#"​ data-id="​{$product->​id}"​ title="​{$lang->​tiny_products_add_comparison}"​ data-result-text="​{$lang->​tiny_products_remove_comparison}"​ data-language="​{$translate_id['​tiny_products_add_comparison'​]}"></​a>​
 +                    {else}
 +                        <a class="​btn-comparison fn-comparison okaycms hidden-md-down"​ href="#"​ data-id="​{$product->​id}"​ title="​{$lang->​tiny_products_remove_comparison}"​ data-result-text="​{$lang->​tiny_products_add_comparison}"​ data-language="​{$translate_id['​tiny_products_remove_comparison'​]}"></​a>​
 +                    {/if}
 +                </​div>​
 +                {* @END Сравнение *}
 +                {* Избранное *}
 +                <div class="​input-group-btn text-xs-left">​
 +                    {if $product->​id|in_array:​$wished_products}
 +                        <a href="#"​ data-id="​{$product->​id}"​ class="​btn-favorites fn-wishlist okaycms selected"​ title="​{$lang->​tiny_products_remove_favorite}"​ data-result-text="​{$lang->​tiny_products_add_favorite}"​ data-language="​{$translate_id['​tiny_products_remove_favorite'​]}"></​a>​
 +                    {else}
 +                        <a href="#"​ data-id="​{$product->​id}"​ class="​btn-favorites fn-wishlist okaycms"​ title="​{$lang->​tiny_products_add_favorite}"​ data-result-text="​{$lang->​tiny_products_remove_favorite}"​ data-language="​{$translate_id['​tiny_products_add_favorite'​]}"></​a>​
 +                    {/if}
 +                </​div>​
 +                {* @END Избранное *}
 +                {* Кнопка добавления в корзину *}
 +                <button class="​fn-is_stock btn btn-warning btn-block i-add-cart{if $product->​variant->​stock < 1} hidden-xs-up{/​if}"​ data-language="​{$translate_id['​tiny_products_add_cart'​]}"​ type="​submit">​{$lang->​tiny_products_add_cart}</​button>​
 +                {* @END Кнопка добавления в корзину *}
 +            </​div>​
 +        </​form>​
 +    </​div>​
 +</​div>​
 +</​HTML>​
 +
 +==== Подробнее о файле ====
 +
 +Разбираем объект [[wiki:​variable_product|{$product}]].\\
 +
 +Проверяем,​ если у товара есть изображение <​html>​{if $product->​image->​filename}</​html>,​ выводим его, иначе выводим заглушку "​нет фото"​.\\
 +Далее в теле ссылки на товар выводим название товара
 +<​HTML>​
 +<a data-product="​{$product->​id}"​ href="​{$lang_link}products/​{$product->​url}">​{$product->​name|escape}</​a>​
 +</​HTML>​
 +В ''​data-product''​ указываем id товара для "​Всплывающей подсказки администратора"​.
 +
 +=== Блок цены ===
 +
 +<​HTML>​
 +<div class="​row card-price-block">​
 +    {* Старая цена *}
 +    <div class="​col-xs-6 text-line-through text-red{if !$product->​variant->​compare_price} hidden-xs-up{/​if}">​
 +        <span class="​fn-old_price">​{$product->​variant->​compare_price|convert}</​span>​ {$currency->​sign|escape}
 +    </​div>​
 +    {* @END Старая цена *}
 +    {* Цена *}
 +    <div class="​{if !$product->​variant->​compare_price}col-xs-12{else}col-xs-6{/​if} h5 font-weight-bold m-b-0">​
 +        <span class="​fn-price">​{$product->​variant->​price|convert}</​span>​ {$currency->​sign|escape}
 +    </​div>​
 +    {* @END Цена *}
 +</​div>​
 +</​HTML>​
 +
 +Проверяем если у товара нет старой цены ''​{if !$product->​variant->​compare_price}''​ добавляем класс ''​hidden-xs-up''​ который скроет блок старой цены ((блок должен быть, на случай если у другого варианта будет старая цена, его нужно будет отобразить)). Ширина блока старой цены 50% от ширины блока превью товара ((класс col-xs-6)).\\
 +Блок основной цены товара,​ если нет старой цены, выводим шириной 100% ((класс col-xs-12)),​ иначе 50% ((класс col-xs-6))
 +
 +=== Блок выбора варианта ===
 +
 +Формируем выпадающий список с вариантами товара
 +<​HTML>​
 +<select name="​variant"​ class="​fn-variant okaycms form-control c-select{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** - артикул варианта (если задан)
 +
 +=== Создаем кнопки "​Нет в наличии"​ и "​Предзаказ"​ ===
 +<​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['​tiny_products_out_of_stock'​]}">​{$lang->​tiny_products_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['​tiny_products_pre_order'​]}">​{$lang->​tiny_products_pre_order}</​button>​
 +</​div>​
 +{* @END Предзаказ *}
 +</​HTML>​
 +
 +Если количество варианта 0 и в настройках "​Если нет в наличии"​ указано "​Предзаказ"​ кнопке "​Нет в наличии"​ добавляем класс ''​hidden-xs-up''​ ((Который скрывает кнопку "​Нет в наличии"​))
 +
 +Иначе если установлено "​Нет на складе"​ то кнопке "​Предзаказ"​ добавляем класс ''​hidden-xs-up''​ ((Который скрывает кнопку "​Предзаказ"​))
 +
 +=== Кнопка "В сравнение"​ ===
 +
 +<​HTML>​
 +<div class="​input-group-btn text-xs-right">​
 +    {if !in_array($product->​id,​$comparison->​ids)}
 +        <a class="​btn-comparison fn-comparison okaycms hidden-md-down selected"​ href="#"​ data-id="​{$product->​id}"​ title="​{$lang->​tiny_products_add_comparison}"​ data-result-text="​{$lang->​tiny_products_remove_comparison}"​ data-language="​{$translate_id['​tiny_products_add_comparison'​]}"></​a>​
 +    {else}
 +        <a class="​btn-comparison fn-comparison okaycms hidden-md-down"​ href="#"​ data-id="​{$product->​id}"​ title="​{$lang->​tiny_products_remove_comparison}"​ data-result-text="​{$lang->​tiny_products_add_comparison}"​ data-language="​{$translate_id['​tiny_products_remove_comparison'​]}"></​a>​
 +    {/if}
 +</​div>​
 +</​HTML>​
 +
 +Проверяем если в массиве [[wiki:​variable_comparison|{$comparison->​ids}]] не присутствует данный товар, то выводим кнопку "​Добавить в сравнение"​ иначе "​Удалить из сравнения"​
 +
 +
 +=== Кнопка "В избранное"​ ===
 +
 +<​HTML>​
 +<div class="​input-group-btn text-xs-left">​
 +    {if $product->​id|in_array:​$wished_products}
 +        <a href="#"​ data-id="​{$product->​id}"​ class="​btn-favorites fn-wishlist okaycms selected"​ title="​{$lang->​tiny_products_remove_favorite}"​ data-result-text="​{$lang->​tiny_products_add_favorite}"​ data-language="​{$translate_id['​tiny_products_remove_favorite'​]}"></​a>​
 +    {else}
 +        <a href="#"​ data-id="​{$product->​id}"​ class="​btn-favorites fn-wishlist okaycms"​ title="​{$lang->​tiny_products_add_favorite}"​ data-result-text="​{$lang->​tiny_products_remove_favorite}"​ data-language="​{$translate_id['​tiny_products_add_favorite'​]}"></​a>​
 +    {/if}
 +</​div>​
 +</​HTML>​
 +
 +Проверяем если в массиве [[wiki:​variable_wished_products|{$wished_products}]] присутствует данный товар, то выводим кнопку "​Удалить из избранного"​ иначе "​Добавить из избранного"​
 +
 +==== Полезные ссылки ====
 +
 +  * [[wiki:​by_js_file_okay#​смена_варианта_в_превью_товара_и_в_карточке|смена варианта в превью товара и в карточке]]
 +  * [[wiki:​by_js_file_okay#​добавление_товара_в_корзину|Добавление товара в корзину]]
wiki/tpl_file_tiny_products.txt · Последние изменения: 2016/02/08 16:36 (внешнее изменение)