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

Категорії

У дефолтних шаблоні 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">  </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. У 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">  
 {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"> 

Пробуйте, а якщо будуть питання - звертайтеся. Ми з радістю допоможемо! :)

Поки немає відгуків
Ваш комментрарій буде першим :)
Написати коментар
увійдіть в особистий кабінет
Завантажити OkayCMS
version 4.5.0
Підписатися на розсилку
Ви будете отримувати добірку корисних статей по роботі з сайтом на OkayCMS, знижки на модулі і шаблони