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

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


wiki:tpl_file_product

Файл product.tpl

Файл product.tpl содержит шаблон вывода одного товара (карточка товара).

Вывод изображения товара

{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}

Если существует объект {$product->image} а соответственно и существует массив {$product->images}1), то выводим изображение товара и (если есть) промо-изображение товара. Изображение выводится в теле ссылки, атрибут href которой равен этому же изображению только с большими размерами ресайза изображения и rel равен «group»2).

Далее проверяем если в массиве {$product->images} больше одного элемента, выводим в цикле {foreach}{/foreach} дополнительные фото товара, так же в ссылке и с rel=«group».

Иначе если у товара нет изображения, выводим «заглушку» no_image.png и (если есть) промо-изображение товара.

Далее выводим информацию о товаре: цена основного варианта, артикул основного варианта, старая цена основного варианта (см. {$product->variant}), рейтинг товара.

Блок выбора варианта

Формируем выпадающий список с вариантами товара перебирая массив {$product->variants}

<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>

Устанавливаем data-атрибуты для option

  • data-price - цена варианта
  • data-stock - количество на складе варианта
  • data-cprice - старая цена варианта (если задана)
  • data-sku - артикул варианта (если задан)

data-атрибуты нужны для смены вариантов

Создаем кнопки "Нет в наличии" и "Предзаказ"

{* Нет на складе *}
<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 Предзаказ *}

Если количество варианта 0 и в настройках «Если нет в наличии» указано «Предзаказ» кнопке «Нет в наличии» добавляем класс hidden-xs-up 3)

Иначе если установлено «Нет на складе» то кнопке «Предзаказ» добавляем класс hidden-xs-up 4)

Выбор количества

<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>

См. смена количества товара

Добавление / удаление из сравнения

<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>

Если id товара нет в массиве {$comparison->ids} выводим кнопку «добавить в сравнение», иначе «удалить из сравнения». Отличаются они названием, значением атрибута data-result-text и классом selected.

См. добавление / удаление товаров из сравнения

Добавление / удаление из избранного

<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>

Если id товара есть в массиве {$wished_products} выводим кнопку на удаление из избранного, иначе выводим кнопку на добавление в избранное. Отличаются они названием, значением атрибута data-result-text и классом selected.

См. добавление / удаление из избранного

Вывод характеристик

<table class="table table-striped">
    {foreach $product->features as $f}
        <tr>
            <td>{$f->name}</td>
            <td>{$f->value}</td>
        </tr>
    {/foreach}
</table>

Перебираем массив {$product->features} для вывода свойств товара.

Вывод комментариев товара

{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}

Для вывода комментариев перебираем массив {$comments}.

Вывод предыдущего / следующего товаров

Для вывода предыдущего / следующего товаров используйте переменные {$prev_product} и {$next_product} соответственно.

Вывод связанных товаров

{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}

Для вывода связанных товаров необходимо перебирать массив {$related_products}, по структуре он аналогичен {$products}

1) доп. фото товара
2) нужно чтобы fancybox мог переключать следующее / предыдущее изображение
3) Который скрывает кнопку «Нет в наличии»
4) Который скрывает кнопку «Предзаказ»
wiki/tpl_file_product.txt · Последние изменения: 2016/02/14 01:38 (внешнее изменение)