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

In the default OkayCMS template on the product page, information about the product is displayed in three tabs - Description, Characteristics, Comments. But often these tabs are not enough, for example, when there is a need to add a video review of a product. As a rule, additional information is placed in additional tabs.

How to add an additional tab is described below.

1. Create the necessary fields in the store's database:

Table ok_lang_products, a text box custom _ description,

in ok_products table, text box custom_description

To do this, you can go, for example, in php MyAdmin, go to the SQL tab, insert queries in the field one by one and execute them by clicking the "Next" button

(SQL query) to create a field in the table ok_lang_products custom _ description:

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

(SQL query) to create a field in the table ok_products custom_description:

TABLE statement the ALTER ` ok_products `
`` Custom_description the ADD text the COLLATE 'utf8_general_ci' the NOT a NULL the AFTER `` description;

2. Add translation to backend / lang / ru.php, backend / lang / en.php and backend / lang / ge.php:

 $ backend_translations-> general_custom_description = 'Your title';

3. In the file backend / design / html / product.tpl

paste the highlighted code into the block

 <div class = "heading_tabs">
<div class = "tab_navigation">
<a href="#tab1" class="heading_box tab_navigation_link">  </a>
<a href="#tab2" class="heading_box tab_navigation_link">  </a>

 <a href="#tab3" class="heading_box tab_navigation_link">  </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">  </textarea>
</div>
<div id = "tab2" class = "tab">
<textarea id = "fn_editor" name = "description" class = "editor_large fn_editor_class">  </textarea>
    </div> 

 <div id = "tab3" class = "tab">
<textarea id = "fn_editor" name = "custom_description" class = "editor_large fn_editor_class">  </textarea>
    </div> 

 </div>
</div>

4. In C backend / core / ProductAdmin.php after the line

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

add line

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

5. In the api / Languages.php

in line

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

insert the code highlighted in orange

 , 'custom_description '

and the result should be like this:

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

6. Insert translations through the admin panel

We name the translation product_custom_description

and write the name of the tab that will be displayed to the user:

7. In the file /design/okay_shop/html/product.tpl

paste the highlighted code into the block

 <div class = "tab_navigation">
{if $ product-> description}
<a href="#description" data-language="product_description">  

 {if $ product-> custom_description}
<a href="#custom_description" data-language="product_custom_description"> 

 {if $ product-> features}
<a href="#features" data-language="product_features"> 

<a href="#comments" data-language="product_comments">  </a>
</div>

<div class = "tab_container">
{if $ product-> description}
<div id = "description" class = "tab product_description" itemprop = "description">
 

 {if $ product-> custom_description}
<div id = "custom_description" class = "tab product_description" itemprop = "custom_description">

 {if $ product-> features}
<div id = "features" class = "tab">
<ul class = "features">
{foreach $ product-> features as $ f}
<li>
<span class = "features_name"> <span>  </span> </span>
<span class = "features_value"> 

Try it, and if you have any questions - contact us. We will be happy to help! :)