Dynamic Product Tabs in PrestaShop 1.6

Monday, 1 May 2017 19:30/ Posted by Misha Pyskur in Prestashop 1.6

If you want add Dynamic Product Tabs in PrestaShop 1.6 like in PrestaShop 1.5 you need to make few changes in prestashop template.

At first open file: /themes/default-bootstrap/js/product.js

And find this code:

$(document).ready(function()
{

After this rows paste this code: 

var tabs = [];
$.each( $('#product .page-product-box'), function (index) {
$(this).attr('data-tab', 'tab_'+index);
if( index == 0 ){
$(this).addClass('selected');
$(this).find('.page-product-heading').addClass('selected');
}

$(this).find('.page-product-heading').attr('data-tab', 'tab_'+index);
tabs[index] = $(this).find('.page-product-heading');
$(this).find('.page-product-heading').remove();
});

$("<div class='tabs_head'></div>").insertAfter('.primary_block');

$.each( tabs, function (index, value) {
$('.tabs_head').append(value);
});

$('#product .tabs_head .page-product-heading').live('click', function () {
$('#product .page-product-box').removeClass('selected');
$('#product .tabs_head .page-product-heading').removeClass('selected');

$(this).addClass('selected');
$('#product .page-product-box[data-tab='+$(this).attr('data-tab')+']').addClass('selected');
});

Also open this file: themes/default-bootstrap/css/product.css

And in the end of the file paste this code:

#product .tabs_head .page-product-heading{
display: inline-block;
cursor: pointer;
border-right: 0;
}

#product .tabs_head .page-product-heading:last-child{
border-right: 1px solid #d6d4d4;
}

#product .tabs_head .page-product-heading.selected{
background: #fff;
}

#product .page-product-box{
position: absolute;
top: -9999px;
}

#product .page-product-box.selected{
position:inherit;
}

And after changes you will get product page with dynamic product tabs: