[TUTORIAL] Homepage tabs in PrestShop 1.7

[vekia]

Standard classic theme in new PrestShop 1.7 does not have "homepage tabs" feature. 

In this guide i want to show you how to create homepage tabs in PrestaShop 1.7

The final effect will be similar to homepage tabs that were available in default-bootstrap template (click to see example)

 

this tutorial contains also free modules:

- homepage popuplar tab

- homepage bestsellers tab

- homepage new products tab

- homepage 'on sale' products tab

 

 

 

Effects of modification

[nadie]

Hi Vekia,
 
I have translated your guide to Spanish:: http://victor-rodenas.com/2017/01/03/mostrar-bloque-de-productos-destacados-y-mejores-ventas-en-pestanas-en-prestashop-1-7/
 
All credits for Vekia !

Thanks !
 
Sorry for my English

[deniss13]

Thank you Vekia, i tried your guide for my custom 1.7 theme but it is displaying it all over another without tabs, can you please explain how to implement it in custom theme without custom modules?

[vekia]

Thank you Vekia, i tried your guide for my custom 1.7 theme but it is displaying it all over another without tabs, can you please explain how to implement it in custom theme without custom modules?

 

hello

guide enables feature called "homepage tabs". once you will have it, you need to use modules to build homepage tab items, for exmaple my free plugins:

1. popular products: https://mypresta.eu/modules/front-office-features/homepage-tab-popular-products.html
2. best sellers: https://mypresta.eu/modules/front-office-features/homepage-tab-best-sellers.html

[vekia]

another free module is ready for this free tutorial

here it is: homepage tab on sale products

[Daniele0884]

For to see correct modify, I have clear chace in prestashop and browser, after install modules.

Edited April 13, 2018 by Daniele0884 (see edit history)

[vekia]

Hello

you mean that you had a problem with the modificaiton and cache clear helped you?

what kind of issue you have? ( you do not saw the changes probably, right?)

[Daniele0884]

6 hours ago, vekia said:

Hello

you mean that you had a problem with the modificaiton and cache clear helped you?

what kind of issue you have? ( you do not saw the changes probably, right?)

Hello Milos,

exactly without clear cache in prestashop and browser, the changes are not corrert.

It showed 3 product for row, and not 4, with 1 position clear.

And when I was go to homepage first time, I did't see the product miniatures, if i did't touch one tabs name.

But after i has clear caches, all modify have work well!

Thanks

[Hessam]

On 1/17/2017 at 12:43 PM, vekia said:

another free module is ready for this free tutorial

here it is: homepage tab on sale products

 

does it really work on pretashop version 1.7.4? (and simple classic template)
After I tried to add this module and its hoods to my index.tpl, when I refresh the HOME page, the page becomes emtpy! (something are going wrong!)

Edited July 18, 2018 by Hessam (see edit history)

[backamblock]

On 13.4.2018 at 5:22 PM, vekia said:

Hello

you mean that you had a problem with the modificaiton and cache clear helped you?

what kind of issue you have? ( you do not saw the changes probably, right?)

 

Hello, i have an issue as well. without debug mode it is the same blank page, with degut enabled these are the errors.

It does not matter which of the 4 modules is enabled or denabled, this fault shows with each of them.

my presta is 1.7.4.1

 

i have looked into the files mentioned in the error message, but as i am not a programmer, i did not find anything that looked suspicious.

 

Please help

 

(1/1) SmartyException
Source: Missing name

in smarty_template_source.php line 167
at Smarty_Template_Source::load(object(SmartyDevTemplate))
in smarty_internal_template.php line 160
at Smarty_Internal_Template->__construct(null, object(SmartyDev), null, 'homeonsaletab|1|2|2|1', null, null, null)
in Smarty.class.php line 955
at Smarty->createTemplate(null, 'homeonsaletab|1|2|2|1', null, object(Smarty_Data))
in Module.php line 2302
at ModuleCore->getCurrentSubTemplate(null, 'homeonsaletab|1|2|2|1', null)
in Module.php line 2347
at ModuleCore->isCached('modules/homeonsaletab/views/templates/hook/homeonsaletab.tpl', 'homeonsaletab|1|2|2|1')
in homeonsaletab.php line 287
at homeonsaletab->hookdisplayHomeTabContent(array('cookie' => object(Cookie), 'cart' => object(Cart), 'altern' => 1))
in Hook.php line 924
at HookCore::coreCallHook(object(homeonsaletab), 'hookdisplayHomeTabContent', array('cookie' => object(Cookie), 'cart' => object(Cart), 'altern' => 1))
in Hook.php line 328
at HookCore::callHookOn(object(homeonsaletab), 'displayHomeTabContent', array('cookie' => object(Cookie), 'cart' => object(Cart), 'altern' => 1))
in Hook.php line 860
at HookCore::exec('displayHomeTabContent')
in 34190b1d96fe69e0ffc93b708bacedc74b5500a3_2.file.index.tpl.php line 47
at Block_11293529065b59298c1e6143_93801928->callBlock(object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 247
at Smarty_Internal_Runtime_Inheritance->callBlock(object(Block_11293529065b59298c1e6143_93801928), object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 183
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_11293529065b59298c1e6143_93801928))
in smarty_internal_runtime_inheritance.php line 157
at Smarty_Internal_Runtime_Inheritance->instanceBlock(object(SmartyDevTemplate), 'Block_11293529065b59298c1e6143_93801928', 'page_content', 0)
in 34190b1d96fe69e0ffc93b708bacedc74b5500a3_2.file.index.tpl.php line 91
at Block_6430015485b59298c1e5128_54375821->callBlock(object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 247
at Smarty_Internal_Runtime_Inheritance->callBlock(object(Block_6430015485b59298c1e5128_54375821), object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 183
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_6430015485b59298c1e5128_54375821), object(Block_12489235745b59298c1f6ec1_71714490))
in smarty_internal_runtime_inheritance.php line 185
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_12489235745b59298c1f6ec1_71714490))
in smarty_internal_runtime_inheritance.php line 157
at Smarty_Internal_Runtime_Inheritance->instanceBlock(object(SmartyDevTemplate), 'Block_12489235745b59298c1f6ec1_71714490', 'page_content_container', 1)
in 2e1b980545b29c8c7651205dca98143b9d11fb09_2.file.page.tpl.php line 181
at Block_12249287225b59298c1f3779_02997390->callBlock(object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 247
at Smarty_Internal_Runtime_Inheritance->callBlock(object(Block_12249287225b59298c1f3779_02997390), object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 183
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_12249287225b59298c1f3779_02997390), object(Block_807171135b59298c1ff562_05278601))
in smarty_internal_runtime_inheritance.php line 185
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_807171135b59298c1ff562_05278601))
in smarty_internal_runtime_inheritance.php line 157
at Smarty_Internal_Runtime_Inheritance->instanceBlock(object(SmartyDevTemplate), 'Block_807171135b59298c1ff562_05278601', 'content', 2)
in 6602ac0a0c63c90fa53e4cf6ca24d87a47adbac0_2.file.layout-full-width.tpl.php line 101
at Block_15915742565b59298c1fe743_59243324->callBlock(object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 247
at Smarty_Internal_Runtime_Inheritance->callBlock(object(Block_15915742565b59298c1fe743_59243324), object(SmartyDevTemplate))
in smarty_internal_runtime_inheritance.php line 183
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_15915742565b59298c1fe743_59243324), object(Block_9135087485b59298c20db00_59054026))
in smarty_internal_runtime_inheritance.php line 185
at Smarty_Internal_Runtime_Inheritance->process(object(SmartyDevTemplate), object(Block_9135087485b59298c20db00_59054026))
in smarty_internal_runtime_inheritance.php line 157
at Smarty_Internal_Runtime_Inheritance->instanceBlock(object(SmartyDevTemplate), 'Block_9135087485b59298c20db00_59054026', 'content_wrapper')
in 1a43c9a5a50eed668146646c6bf0f9329b2b21dc_2.file.layout-both-columns.tpl.php line 87
at content_5b59298c215d29_72190935(object(SmartyDevTemplate))
in smarty_template_resource_base.php line 123
at Smarty_Template_Resource_Base->getRenderedTemplateCode(object(SmartyDevTemplate))
in smarty_template_compiled.php line 114
at Smarty_Template_Compiled->render(object(SmartyDevTemplate))
in smarty_internal_template.php line 206
at Smarty_Internal_Template->render()
in smarty_internal_template.php line 365
at Smarty_Internal_Template->_subTemplateRender('layouts/layout-both-columns.tpl', null, 'layouts/layout-full-width.tpl', 0, 31536000, array(), 2, false, null, null)
in smarty_internal_runtime_inheritance.php line 127
at Smarty_Internal_Runtime_Inheritance->endChild(object(SmartyDevTemplate), 'layouts/layout-both-columns.tpl')
in 6602ac0a0c63c90fa53e4cf6ca24d87a47adbac0_2.file.layout-full-width.tpl.php line 42
at content_5b59298c2007d2_28154643(object(SmartyDevTemplate))
in smarty_template_resource_base.php line 123
at Smarty_Template_Resource_Base->getRenderedTemplateCode(object(SmartyDevTemplate))
in smarty_template_compiled.php line 114
at Smarty_Template_Compiled->render(object(SmartyDevTemplate))
in smarty_internal_template.php line 206
at Smarty_Internal_Template->render()
in smarty_internal_template.php line 365
at Smarty_Internal_Template->_subTemplateRender('layouts/layout-full-width.tpl', null, 'layouts/layout-full-width.tpl', 0, 31536000, array(), 2, false, null, null)
in smarty_internal_runtime_inheritance.php line 127
at Smarty_Internal_Runtime_Inheritance->endChild(object(SmartyDevTemplate), 'layouts/layout-full-width.tpl')
in 2e1b980545b29c8c7651205dca98143b9d11fb09_2.file.page.tpl.php line 33
at content_5b59298c1f9b92_34854007(object(SmartyDevTemplate))
in smarty_template_resource_base.php line 123
at Smarty_Template_Resource_Base->getRenderedTemplateCode(object(SmartyDevTemplate))
in smarty_template_compiled.php line 114
at Smarty_Template_Compiled->render(object(SmartyDevTemplate))
in smarty_internal_template.php line 206
at Smarty_Internal_Template->render()
in smarty_internal_template.php line 365
at Smarty_Internal_Template->_subTemplateRender('page.tpl', null, 'layouts/layout-full-width.tpl', 0, 31536000, array(), 2, false, null, null)
in smarty_internal_runtime_inheritance.php line 127
at Smarty_Internal_Runtime_Inheritance->endChild(object(SmartyDevTemplate), 'page.tpl')
in 34190b1d96fe69e0ffc93b708bacedc74b5500a3_2.file.index.tpl.php line 30
at content_5b59298c1efaf2_27996461(object(SmartyDevTemplate))
in smarty_template_resource_base.php line 123
at Smarty_Template_Resource_Base->getRenderedTemplateCode(object(SmartyDevTemplate))
in smarty_template_compiled.php line 114
at Smarty_Template_Compiled->render(object(SmartyDevTemplate))
in smarty_internal_template.php line 206
at Smarty_Internal_Template->render(false, 0)
in smarty_internal_templatebase.php line 232
at Smarty_Internal_TemplateBase->_execute(object(SmartyDevTemplate), null, 'layouts/layout-full-width.tpl', null, 0)
in smarty_internal_templatebase.php line 116
at Smarty_Internal_TemplateBase->fetch('index.tpl', null, 'layouts/layout-full-width.tpl', null, false, true, false)
in SmartyDev.php line 41
at SmartyDev->fetch('index.tpl', null, 'layouts/layout-full-width.tpl')
in FrontController.php line 679
at FrontControllerCore->smartyOutputContent('index.tpl')
in FrontController.php line 663
at FrontControllerCore->display()
in Controller.php line 275
at ControllerCore->run()
in Dispatcher.php line 428
at DispatcherCore->dispatch()
in index.php line 28

 

Edited July 26, 2018 by backamblock (see edit history)

[Daniele0884]

Why in the active tab name, the background color is not show when I open my website. After, if I select one time any tabs, the background of active tab, background is show. See screenshot

Any solution?    My website miofantasy.it

Thanks

[Knowband Plugins]

Hi,

Add the following CSS in the themes/classic/assets/css/custom.css (At the end of the file)

#index #home-page-tabs .nav-item.active a {
    background: #F42772;
    color: #ffffff;
    border-bottom-color: #d710e5!important;
    font-size: 118%;
}

#index #home-page-tabs .nav-item.active a {
    color: #fff;
}

Refresh the cache from the admin & also the browser cache & check again. 

Hope it will fix the issue.

[Daniele0884]

2 hours ago, Knowband Plugins said:

Hi,

Add the following CSS in the themes/classic/assets/css/custom.css (At the end of the file)

#index #home-page-tabs .nav-item.active a {
    background: #F42772;
    color: #ffffff;
    border-bottom-color: #d710e5!important;
    font-size: 118%;
}

#index #home-page-tabs .nav-item.active a {
    color: #fff;
}

Refresh the cache from the admin & also the browser cache & check again. 

Hope it will fix the issue.

Thank you very much!   It Work!

[Zohaib-fk]

Hi Vekia,

Thanks for an article and free modules.

I did the modifications in below files and install the modules as per article.

I can see the tabs on the home page below default "POPULAR PRODUCTS". Attached Image

I have 2 designs on one page first with default products without tabs and another is with different tabs.

Please check my website URL => http://www.presta-addons-modules.com/en/

I was expecting one design with products listing in different tabs.

Any idea?

Modified Files List

themes/classic/templates/index.tpl
themes/classic/assets/js/custom.js
themes/classic/assets/css/theme.css
themes/classic/assets/css/custom.css

Edited May 31, 2021 by Zohaib-fk
Post Updated (see edit history)

[Zohaib-fk]

I got the solution, want to share with the community.

We need to unhook the default module name "Featured Products" and clear cache from performance area in back-office.

If we want to change title to show in all capital letters, we need to edit below files and change value as shown in below code.

modules/homefeatured/views/templates/hook/tab.tpl
modules/homebestsellerstab/views/templates/hook/tab.tpl
modules/homenewtab/views/templates/hook/tab.tpl

<li class="nav-item"><a data-toggle="tab" href="#homefeatured" class="homefeatured nav-link">{l s='POPULAR' mod='homefeatured'}</a></li>

 

[michele]

this module don't work with 1.7.4 :(

[ukbaz]

Hi 

I have it working in Version 1.7.4.4 all tabs working correctly. However the tabs display immediately above the footer and below all other page content. See attached image.

In previous versions of Prestashop it was possible to use the 'standard tabs' below the slide, but above other homepage content. 

How can I get the tabs to display below the home page slider, an above the rest of the page?

Thanks

Baz

[sebastiangoyke]

HI ukbaz,

 

sens me your index.tpl file pls

[ukbaz]

Hi Sebastian

Thanks for the reply - I've attached it!

Baz

index.tpl

[selin]

On 1/3/2017 at 1:45 PM, vekia said:

Standard classic theme in new PrestShop 1.7 does not have "homepage tabs" feature. 

- homepage popuplar tab

- homepage bestsellers tab

- homepage new products tab

- homepage 'on sale' products tab

Effects of modification

 

Hi Vekia;

thanks for your sharing but I don't understand; is there a hometabs module for 1.7? what are these separately?

- homepage popuplar tab, - homepage bestsellers tab, - homepage new products tab, - homepage 'on sale' products tab

I want home featured, new products and price drops?

 

Edited December 13, 2018 by selin (see edit history)

[selin]

also,

this screen on the hompage

Featured products tab - v1.2.0 -MyPresta.eu

[kajos]

Hi,

On my testshop i have installed te hometab solution but de layout also show de short discription instaed of only the title.

See https://dwn.dierenwebshop.nl/nl/ 

[lormax]

Hi Vekia 😊

Is it possible to associate products with the same tag in common to a tab?

example: there are 10 products that are in different categories but have the same TAG in common. Is it possible to show them all in a tab on the homepage?

On 1/10/2017 at 9:01 PM, vekia said:

 

hello

guide enables feature called "homepage tabs". once you will have it, you need to use modules to build homepage tab items, for exmaple my free plugins:

1. popular products: https://mypresta.eu/modules/front-office-features/homepage-tab-popular-products.html
2. best sellers: https://mypresta.eu/modules/front-office-features/homepage-tab-best-sellers.html