Табы для стандартного шаблона Prestashop 1.6.X, как в шаблоне для PrestaShop 1.5.X

Всем привет! Как то на днях обратился клиент с просьбой сделать табы (закладки) в стандартном шаблоне Prestashop 1.6.0.11. Данные табы должны выглядеть согласно стандартному шаблону, но работать как в шаблонах на Prestashop 1.5.X.

И так преступим:

1. Всегда делайте бэкапы(резервные копии) Базы данной (далее — БД).

2. Создавайте резервные копии файлов, которые будете изменять, были случае когда надеешься на бэкапы хостера, а они не накатываются. Так что принудительно копируем все необходимые файлы на вашу рабочую станцию(ПК).

Теперь преступим непосредственно к правке нашего шаблона Prestashop 1.6.0.11 (Могут быть и другие версии, главное свыше 1.6.Х.Х). Шаблон файла со страницей товара и нам необходимыми табами (закладками) называется product.tpl. Данный файл располагается здесь:

/themes/default-bootstrap/product.tpl

Для удобства редактирования данного файла, лучше открыть его через Notepad++, Dreamviewer, но не блокнот. Так как нам необходима подсветка синтаксиса и нумерация строк.

И так мы открыли для редактирования product.tpl, ищем строки:

{if isset($features) && $features}

Это приблизительно 450 строка в Notepad++, все копируем до строки приблизительно 650, которая содержит информацию:

<section id="blockpack"> <h3 class="page-product-heading">{l s='Pack content'}</h3> {include file="$tpl_dir./product-list.tpl" products=$packItems} </section> {/if}

А если быть подробнее, то это вот этот код:

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

На данном этапе по редактированию product.tpl мы закончили работы.

Следующий шаг — это редактирование файла со стилями.

Открываем файл 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;
}

Осталось теперь отредактировать только модуль «Отзывы(комментарии пользователей)», так как процесс отображения его иной по сравнению с другими модулями.

Это касается и других сторонних модулей, которые необходимо отобразить в закладках.

И так приступим.

Добавление модуля «Отзывы» в закладки(табы).

1. Открываем файл по следующему пути:

/themes/default-bootstrap/modules/productcomments/tab.tpl

2. Открываем его на редактирование в NotePad++

3.Ищем строку со следующим кодом:

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

4. И заменяем его на следующий код:

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


Результат можно посмотреть здесь:

Возникнут вопросы, обязательно обращайтесь. Помогу чем смогу:)
22.04.2015 22:01
2507

2 комментария

олег
31.08.2015 15:44
07.09.2015 14:54
Просьба, в дальнейшем писать все пожелания на форуме: Ваши предложения по публикациям
Насчет статьи, так там про тоже самое. Только немного отличается. Я так же брал стандартные фишки из старой версии PRestashop. Выше описан вполне рабочий вариант.
Загрузка...