Как добавить дополнительные вкладки (табы) на странице товара?

Данил Бдуленко
  • 391
  • 3

В дефолтном шаблоне OkayCMS на странице товара информация о товаре выводится в трех вкладках - Описание, Характеристики, Комментарии. Но часто данных вкладок не достаточно, например, когда есть необходимость добавления видеообзора товара. Как правило, дополнительную информацию размещают в дополнительных вкладках. 

Как добавить дополнительную вкладку описываем ниже.

1. Создать в базе данных магазина необходимые поля:


в таблице ok_lang_products, текстовое поле custom_description,

в таблице ok_products, текстовое поле custom_description

 

Для этого можно зайти, например, в php MyAdmin, перейти во вкладку SQL, поочередно вставить запросы в поле и выполнить их, нажав кнопку «Вперед»

 

(SQL запрос) для создания в таблице ok_lang_products поля custom_description:

ALTER TABLE `ok_lang_products`
ADD `custom_description` text COLLATE 'utf8_general_ci' NOT NULL AFTER `description`;

 

(SQL запрос) для создания в таблице ok_products поля custom_description:

ALTER TABLE `ok_products`
ADD `custom_description` text COLLATE 'utf8_general_ci' NOT NULL AFTER `description`;

2. В  backend/lang/ru.php,  backend/lang/en.php  и  backend/lang/ge.php необходимо добавить перевод:

$backend_translations->general_custom_description = 'Ваше название';

3. В файле backend/design/html/product.tpl

вставьте выделенный код, в блок 


<div class="heading_tabs">
    <div class="tab_navigation">
        <a href="#tab1" class="heading_box tab_navigation_link">{$btr->general_short_description|escape}</a>
        <a href="#tab2" class="heading_box tab_navigation_link">{$btr->general_full_description|escape}</a>
        <a href="#tab3" class="heading_box tab_navigation_link">{$btr->general_custom_description|escape}</a>
    </div>
    <div class="toggle_arrow_wrap fn_toggle_card text-primary">
        <a class="btn-minimize" href="javascript:;" ><i class="icon-arrow-down"></i></a>
    </div>
</div>
<div class="toggle_body_wrap on fn_card">
    <div class="tab_container">
        <div id="tab1" class="tab">
            <textarea name="annotation" id="annotation" class="editor_small">{$product->annotation|escape}</textarea>
        </div>
        <div id="tab2" class="tab">
            <textarea id="fn_editor" name="description" class="editor_large fn_editor_class">{$product->description|escape}</textarea>
            </div>
        <div id="tab3" class="tab">
            <textarea id="fn_editor" name="custom_description" class="editor_large fn_editor_class">{$product->custom_description|escape}</textarea>
            </div>
    </div>
</div>


4. В C backend/core/ProductAdmin.php после строчки

$product->description = $this->request->post('description');

добавить строчку

$product->custom_description = $this->request->post('custom_description');

5. В api/Languages.php

в строку

$fields['products']= array('name', 'meta_title', 'meta_keywords', 'meta_description', 'annotation', 'description', 'special');

вставляем код, выделенный оранжевым

, 'custom_description'

и в результате должно оплучиться так:

$fields['products']= array('name', 'meta_title', 'meta_keywords', 'meta_description', 'annotation', 'description', 'custom_description', 'special');

6. Вставляем переводы через админку 

Называем перевод product_custom_description 



и пишем название вкладки, которое будет отображаться пользователю:


7. В файле /design/okay_shop/html/product.tpl

вставьте выделенный код, в блок 

<div class="tab_navigation">
    {if $product->description}
        <a href="#description" data-language="product_description">{$lang->product_description}</a>
    {/if}
    {if $product->custom_description}
        <a href="#custom_description" data-language="product_custom_description">{$lang->product_custom_description}</a>
    {/if}
    {if $product->features}
        <a href="#features" data-language="product_features">{$lang->product_features}</a>
    {/if}

    <a href="#comments" data-language="product_comments">{$lang->product_comments}</a>
</div>

<div class="tab_container">
    {if $product->description}
        <div id="description" class="tab product_description" itemprop="description">
            {$product->description}
        </div>
    {/if}
    {if $product->custom_description}
        <div id="custom_description" class="tab product_description" itemprop="custom_description">
            {$product->custom_description}
        </div>
    {/if}
    {if $product->features}
        <div id="features" class="tab">   
            <ul class="features">
                {foreach $product->features as $f}
                    <li>
                        <span class="features_name"><span>{$f->name|escape}</span></span>
                        <span class="features_value">{$f->value|escape}</span>
                    </li>
                {/foreach}
            </ul>
        </div>
    {/if}

Пробуйте, а если будут вопросы - обращайтесь. Мы с радостью поможем! :)

Рассказать друзьям:


Написать комментарий

captcha

okay_user
Елена
17.02.2018, 14:14
Всё получилось!
А было бы круто, если бы можно было это делать по нажатию одной кнопки... И могли бы даже поставить стоимость этой кнопки - рублей 10 (эквиваленты в другой валюте также) - типа "одноцентовый товар". Вот наверняка набежало бы больше и быстрее, чем от более дорогих товаров в магазине. :)
okay_user
OkayCMS
05.02.2018, 12:15
Да, должно работать. Если не получается, - напишите в тех. поддержку через админ. панель, мы посмотрим и поправим.
okay_user
Артём
04.02.2018, 22:31
Здравствуйте! Подскажите, пожалуйста, на версии 2.0.0 это будет работать, а то всё сделал по инструкции, но таб дополнительный не появился((