Вкладки товара как в PrestaShop 1.5

Всем привет:) Думаю многим у кого версия PrestaShop 1.5, нравились вкладки на странице товара. И сегодня я покажу Вам как сделать такие вкладки в версии 1.6.

Сразу хочу сказать что все будет максимально просто, и быстро реализуемо.
Поехали!

Что же на понадобится?

---

Нам нужно будет изменить сам файл темы, и файл стиля. А также если используются дополнительные модули для вкладки. Все эти файлы мы найдем в нашей теме по умолчанию.
Для начала отредактируем файл product.tpl, найти его можно тут: /themes/default-bootstrap/product.tpl. После открытия файла нам нужно найти код представленный ниже, это примерно с 450 по 653 строку.

{if isset($features) && $features}
            <!-- Data sheet -->
            <section class="page-product-box">
                <h3 class="page-product-heading">{l s='Data sheet'}</h3>
                <table class="table-data-sheet">          
                    {foreach from=$features item=feature}
                    <tr class="{cycle values="odd,even"}">
                        {if isset($feature.value)}              
                        <td>{$feature.name|escape:'html':'UTF-8'}</td>
                        <td>{$feature.value|escape:'html':'UTF-8'}</td>
                        {/if}
                    </tr>
                    {/foreach}
                </table>
            </section>
            <!--end Data sheet -->
        {/if}
        {if $product->description}
            <!-- More info -->
            <section class="page-product-box">
                <h3 class="page-product-heading">{l s='More info'}</h3>{/if}
                {if isset($product) && $product->description}
                    <!-- full description -->
                    <div  class="rte">{$product->description}</div>
            </section>
            <!--end  More info -->
        {/if}
        <!--HOOK_PRODUCT_TAB -->
        <section class="page-product-box">
            {$HOOK_PRODUCT_TAB}
            {if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}
        </section>
        <!--end HOOK_PRODUCT_TAB -->
        {if isset($accessories) && $accessories}
            <!--Accessories -->
            <section class="page-product-box">
                <h3 class="page-product-heading">{l s='Accessories'}</h3>
                <div class="block products_block accessories-block clearfix">
                    <div class="block_content">
                        <ul id="bxslider" class="bxslider clearfix">
                            {foreach from=$accessories item=accessory name=accessories_list}
                                {if ($accessory.allow_oosp || $accessory.quantity_all_versions > 0 || $accessory.quantity > 0) && $accessory.available_for_order && !isset($restricted_country_mode)}
                                    {assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
                                    <li class="item product-box ajax_block_product{if $smarty.foreach.accessories_list.first} first_item{elseif $smarty.foreach.accessories_list.last} last_item{else} item{/if} product_accessories_description">
                                        <div class="product_desc">
                                            <a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{$accessory.legend|escape:'html':'UTF-8'}" class="product-image product_image">
                                                <img class="lazyOwl" src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{$accessory.legend|escape:'html':'UTF-8'}" width="{$homeSize.width}" height="{$homeSize.height}"/>
                                            </a>
                                            <div class="block_description">
                                                <a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{l s='More'}" class="product_description">
                                                    {$accessory.description_short|strip_tags|truncate:25:'...'}
                                                </a>
                                            </div>
                                        </div>
                                        <div class="s_title_block">
                                            <h5 class="product-name">
                                                <a href="{$accessoryLink|escape:'html':'UTF-8'}">
                                                    {$accessory.name|truncate:20:'...':true|escape:'html':'UTF-8'}
                                                </a>
                                            </h5>
                                            {if $accessory.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
                                            <span class="price">
                                                {if $priceDisplay != 1}
                                                {displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}
                                                {/if}
                                            </span>
                                            {/if}
                                        </div>
                                        <div class="clearfix" style="margin-top:5px">
                                            {if !$PS_CATALOG_MODE && ($accessory.allow_oosp || $accessory.quantity > 0)}
                                                <div class="no-print">
                                                    <a class="exclusive button ajax_add_to_cart_button" href="{$link->getPageLink('cart', true, NULL, "qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add")|escape:'html':'UTF-8'}" data-id-product="{$accessory.id_product|intval}" title="{l s='Add to cart'}">
                                                        <span>{l s='Add to cart'}</span>
                                                    </a>
                                                </div>
                                            {/if}
                                        </div>
                                    </li>
                                {/if}
                            {/foreach}
                        </ul>
                    </div>
                </div>    
            </section>
            <!--end Accessories -->
        {/if}
        {if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}
        <!-- description & features -->
        {if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}
            {if isset($attachments) && $attachments}
            <!--Download -->
            <section class="page-product-box">
                <h3 class="page-product-heading">{l s='Download'}</h3>
                {foreach from=$attachments item=attachment name=attachements}
                    {if $smarty.foreach.attachements.iteration %3 == 1}<div class="row">{/if}
                        <div class="col-lg-4">
                            <h4><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">{$attachment.name|escape:'html':'UTF-8'}</a></h4>
                            <p class="text-muted">{$attachment.description|escape:'html':'UTF-8'}</p>
                            <a class="btn btn-default btn-block" href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">
                                <i class="icon-download"></i>
                                {l s="Download"} ({Tools::formatBytes($attachment.file_size, 2)})
                            </a>
                            <hr>
                        </div>
                    {if $smarty.foreach.attachements.iteration %3 == 0 || $smarty.foreach.attachements.last}</div>{/if}
                {/foreach}
            </section>
            <!--end Download -->
            {/if}
            {if isset($product) && $product->customizable}
            <!--Customization -->
            <section class="page-product-box">
                <h3 class="page-product-heading">{l s='Product customization'}</h3>
                <!-- Customizable products -->
                <form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
                    <p class="infoCustomizable">
                        {l s='After saving your customized product, remember to add it to your cart.'}
                        {if $product->uploadable_files}
                        <br />
                        {l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
                    </p>
                    {if $product->uploadable_files|intval}
                        <div class="customizableProductsFile">
                            <h5 class="product-heading-h5">{l s='Pictures'}</h5>
                            <ul id="uploadable_files" class="clearfix">
                                {counter start=0 assign='customizationField'}
                                {foreach from=$customizationFields item='field' name='customizationFields'}
                                    {if $field.type == 0}
                                        <li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
                                            {if isset($pictures.$key)}
                                                <div class="customizationUploadBrowse">
                                                    <img src="{$pic_dir}{$pictures.$key}_small" alt="" />
                                                        <a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >
                                                            <img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
                                                        </a>
                                                </div>
                                            {/if}
                                            <div class="customizationUploadBrowse form-group">
                                                <label class="customizationUploadBrowseDescription">
                                                    {if !empty($field.name)}
                                                        {$field.name}
                                                    {else}
                                                        {l s='Please select an image file from your computer'}
                                                    {/if}
                                                    {if $field.required}<sup>*</sup>{/if}
                                                </label>
                                                <input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />
                                            </div>
                                        </li>
                                        {counter}
                                    {/if}
                                {/foreach}
                            </ul>
                        </div>
                    {/if}
                    {if $product->text_fields|intval}
                        <div class="customizableProductsText">
                            <h5 class="product-heading-h5">{l s='Text'}</h5>
                            <ul id="text_fields">
                            {counter start=0 assign='customizationField'}
                            {foreach from=$customizationFields item='field' name='customizationFields'}
                                {if $field.type == 1}
                                    <li class="customizationUploadLine{if $field.required} required{/if}">
                                        <label for ="textField{$customizationField}">
                                            {assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
                                            {if !empty($field.name)}
                                                {$field.name}
                                            {/if}
                                            {if $field.required}<sup>*</sup>{/if}
                                        </label>
                                        <textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}
                                            {if isset($textFields.$key)}
                                                {$textFields.$key|stripslashes}
                                            {/if}
                                        {/strip}</textarea>
                                    </li>
                                    {counter}
                                {/if}
                            {/foreach}
                            </ul>
                        </div>
                    {/if}
                    <p id="customizedDatas">
                        <input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
                        <input type="hidden" name="submitCustomizedDatas" value="1" />
                        <button class="button btn btn-default button button-small" name="saveCustomization">
                            <span>{l s='Save'}</span>
                        </button>
                        <span id="ajax-loader" class="unvisible">
                            <img src="{$img_ps_dir}loader.gif" alt="loader" />
                        </span>
                    </p>
                </form>
                <p class="clear required"><sup>*</sup> {l s='required fields'}</p>  
            </section>
            <!--end Customization -->
            {/if}
        {/if}
        {if isset($packItems) && $packItems|@count > 0}
        <section id="blockpack">
            <h3 class="page-product-heading">{l s='Pack content'}</h3>
            {include file="$tpl_dir./product-list.tpl" products=$packItems}
        </section>
        {/if}

Вы должны его удалить, и заменить на новый что представлен ниже:

<!-- description and features -->
{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}
<div id="more_info_block" class="clear">
    <ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
        {if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
        {if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
        {if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
        {if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
        {if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
        {$HOOK_PRODUCT_TAB}
    </ul>
    <div id="more_info_sheets" class="sheets align_justify">
    {if isset($product) && $product->description}
        <!-- full description -->
        <div id="idTab1" class="rte">{$product->description}</div>
    {/if}
    {if isset($features) && $features}
        <!-- product's features -->
        <ul id="idTab2" class="bullet">
        {foreach from=$features item=feature}
            {if isset($feature.value)}
                <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
            {/if}
        {/foreach}
        </ul>
    {/if}
    {if isset($attachments) && $attachments}
        <ul id="idTab9" class="bullet">
        {foreach from=$attachments item=attachment}
            <li><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html'}">{$attachment.name|escape:'htmlall':'UTF-8'}</a><br />{$attachment.description|escape:'htmlall':'UTF-8'}</li>
        {/foreach}
        </ul>
    {/if}
    {if isset($accessories) AND $accessories}
        <!-- accessories -->
        <div id="idTab4" class="bullet">
            <div class="block products_block accessories_block clearfix">
                <div class="block_content">
                    <ul>
                    {foreach from=$accessories item=accessory name=accessories_list}
                        {if ($accessory.allow_oosp || $accessory.quantity_all_versions > 0 || $accessory.quantity > 0) AND $accessory.available_for_order AND !isset($restricted_country_mode)}
                            {assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
                            <li class="ajax_block_product{if $smarty.foreach.accessories_list.first} first_item{elseif $smarty.foreach.accessories_list.last} last_item{else} item{/if} product_accessories_description">
                                <p class="s_title_block">
                                    <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}">{$accessory.name|escape:'htmlall':'UTF-8'}</a>
                                    {if $accessory.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE} - <span class="price">{if $priceDisplay != 1}{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}{/if}</span>{/if}
                                </p>
                                <div class="product_desc">
                                    <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{$accessory.legend|escape:'htmlall':'UTF-8'}" class="product_image"><img src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'medium_default')|escape:'html'}" alt="{$accessory.legend|escape:'htmlall':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" /></a>
                                    <div class="block_description">
                                        <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{l s='More'}" class="product_description">{$accessory.description_short|strip_tags|truncate:400:'...'}</a>
                                    </div>
                                    <div class="clear_product_desc"> </div>
                                </div>
                                  
                                <p class="clearfix" style="margin-top:5px">
                                    <a class="button" href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
                                    {if !$PS_CATALOG_MODE && ($accessory.allow_oosp || $accessory.quantity > 0)}
                                    <a class="exclusive button ajax_add_to_cart_button" href="{$link->getPageLink('cart', true, NULL, "qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add")|escape:'html'}" rel="ajax_id_product_{$accessory.id_product|intval}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
                                    {/if}
                                </p>
                                  
                            </li>
                        {/if}
                    {/foreach}
                    </ul>
                </div>
            </div>
        </div>
    {/if}
  
    <!-- Customizable products -->
    {if isset($product) && $product->customizable}
        <div id="idTab10" class="bullet customization_block">
            <form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
                <p class="infoCustomizable">
                    {l s='After saving your customized product, remember to add it to your cart.'}
                    {if $product->uploadable_files}<br />{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
                </p>
                {if $product->uploadable_files|intval}
                <div class="customizableProductsFile">
                    <h3>{l s='Pictures'}</h3>
                    <ul id="uploadable_files" class="clearfix">
                        {counter start=0 assign='customizationField'}
                        {foreach from=$customizationFields item='field' name='customizationFields'}
                            {if $field.type == 0}
                                <li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
                                    {if isset($pictures.$key)}
                                    <div class="customizationUploadBrowse">
                                        <img src="{$pic_dir}{$pictures.$key}_small" alt="" />
                                        <a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html'}" title="{l s='Delete'}" >
                                            <img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
                                        </a>
                                    </div>
                                    {/if}
                                    <div class="customizationUploadBrowse">
                                        <label class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your computer'}{/if}{if $field.required}<sup>*</sup>{/if}</label>
                                        <input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />
                                    </div>
                                </li>
                                {counter}
                            {/if}
                        {/foreach}
                    </ul>
                </div>
                {/if}
                {if $product->text_fields|intval}
                <div class="customizableProductsText">
                    <h3>{l s='Text'}</h3>
                    <ul id="text_fields">
                    {counter start=0 assign='customizationField'}
                    {foreach from=$customizationFields item='field' name='customizationFields'}
                        {if $field.type == 1}
                        <li class="customizationUploadLine{if $field.required} required{/if}">
                            <label for ="textField{$customizationField}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field} {if !empty($field.name)}{$field.name}{/if}{if $field.required}<sup>*</sup>{/if}</label>
                            <textarea name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input">{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
                        </li>
                        {counter}
                        {/if}
                    {/foreach}
                    </ul>
                </div>
                {/if}
                <p id="customizedDatas">
                    <input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
                    <input type="hidden" name="submitCustomizedDatas" value="1" />
                    <input type="button" class="button" value="{l s='Save'}" onclick="javascript:saveCustomization()" />
                    <span id="ajax-loader" style="display:none"><img src="{$img_ps_dir}loader.gif" alt="loader" /></span>
                </p>
            </form>
            <p class="clear required"><sup>*</sup> {l s='required fields'}</p>
        </div>
    {/if}
  
    {if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}
    </div>
</div>
{/if}
{if isset($packItems) && $packItems|@count > 0}
    <div id="blockpack">
        <h2>{l s='Pack content'}</h2>
        {include file="$tpl_dir./product-list.tpl" products=$packItems}
    </div>
{/if}
 
{if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}

Вот и все. С редактированием файла темы закончили. Следующим шагом будет редактирование файла стиля.

Модификация файла стиля CSS

---

Открываем файл global.css, находится он тут: /themes/default-bootstrap/css/global.css. После открытия файла добавляем код что представлен ниже:

.idTabs {
list-style-type:none;
margin-top:20px;
}
 
ul.idTabs li {
float:left;
margin-right:-1px;
}
 
.idTabs a {
color:#555454;
text-transform:uppercase;
font-family:"Open Sans",sans-serif;
font-weight:600;
font-size:18px;
line-height:60px;
position:relative;
border:1px solid #d6d4d4;
background:#fbfbfb;
margin:0 0 20px;
padding:14px 20px 17px;
}
 
#more_info_sheets .product_desc .block_description {
float:left;
margin-left:10px;
width:420px;
}
 
#more_info_sheets .product_desc .clear_product_desc {
clear:both;
height:0;
line-height:0;
}
 
.idTabs .selected,#header .sf-menu > li.sfHover > a,#header .sf-menu > li > a:hover,#header .sf-menu > li.sfHoverForce > a {
color:#fff;
background: #553D3D;
border-bottom-color: #000000;
}

Но это еще не все, на странице товара у нас еще есть вкладка «Отзывы», и пока что она выглядит не совсем так как нам нужно.

Модификация модуля «Отзывы»

---

Если Вы используете какие то сторонние модули что добавляют вкладки на страницу товара, Вам нужно будет изменить немного файлы модулей чтоб вкладки отображались в нормальном виде. Ничего сложного в этом нету, я Вам покажу как это сделать в модуле «Отзывы». Открываем файл: /themes/default-bootstrap/modules/productcomments/tab.tpl, в файле ищем код

<h3 id="#idTab5" class="idTabHrefShort page-product-heading">{l s='Reviews' mod='productcomments'}</h3>

Изменяем его на представленный ниже:

<li><a href="#idTab5" class="idTabHrefShort page-product-heading">{l s='Reviews' mod='productcomments'}</a></li>

Видео урок

---

Вот и всё! Если у Вас есть вопросы задавайте их в комментариях.