How to enable homepage tabs in PrestaShop 8 and 1.7

Do you remember PrestaShop 1.6 and it's homepage tabs? If not, screenshot below shows them. Unforutnately new classic theme in PrestaShop 8.x and 1.7 does not support this feature anymore. In this tutorial I want to show you how easily you can activate this option. Other guides related to this tutorial will show how to display homepage featured products, new products there. Image below shows feature that we will activate in brand new PrestaShop 8.x amd 1.7 in "classic" theme. The same guide can be used of course in other templates too.

If you dont want to modify your PrestaShop files you can order module that will create all these things described in this guide automatically.  In addition, homepage tabs module can be places between other modules on your homepage (this tutorial allows to display tabs below or above other modules only).
Module is for PrestaShop 8.x and 1.7

How to create homepage Tabs in PrestaShop 8 and 1.7?

Firstly we have to create new hooks in our shop to properly support this feature. We will create hooks displayHomeTab and displayHomeTabContent. First hook is responsible for title of the tab, second one is responsible for tabs' contents. We will create these hooks with free module hooks manager. The second step will be related to easy template modifications. So, we can start - lets go :-)

displayHomeTab and displayHomeTabContent hooks

To create new hooks please install free module hooks manager that supports PrestaShop 8.x and 1.7. After installation please open module configuration page and you will see there two sections. First "add new hook" and second with list of "available hooks". Please fill out "add new hook" form with settings like i show on example below. Do it for two hooks:

- displayHomeTab

- displayHomeTabContent

In effect you should see your new hooks on list of "Available hooks":

Modification of theme index.tpl file

Now its time to alter theme file. We have to add there code that will create homepage tabs feature. Path to file (for 'classic' theme) is:

/themes/classic/templates/index.tpl. Please open this file and replace its contents with:

{extends file='page.tpl'}
    {block name='page_content_container'}
      <section id="content" class="page-home">
        {block name='page_content_top'}{/block}      
        {block name='page_content'}
          {$HOOK_HOME nofilter}
          {assign var='HOOK_HOME_TAB_CONTENT' value=Hook::exec('displayHomeTabContent')}
          {assign var='HOOK_HOME_TAB' value=Hook::exec('displayHomeTab')}
          {if isset($HOOK_HOME_TAB_CONTENT) && $HOOK_HOME_TAB_CONTENT|trim}
            <div class="tabs">
                {if isset($HOOK_HOME_TAB) && $HOOK_HOME_TAB|trim}
                    <ul id="home-page-tabs" class="nav nav-tabs clearfix">
            			{$HOOK_HOME_TAB nofilter}
            		</ul>
            	{/if}
             	<div class="tab-content" id="tab-content">{$HOOK_HOME_TAB_CONTENT nofilter}</div>
             </div>
          {/if}
        {/block}
      </section>
    {/block}

Modified code contains snippet that will display homepage tabs once you will use some modules in these hooks. Homepage tabs section without modules will be empty, so you will not see there products etc. It's because now it is time to associate modules with homepage tabs feature that we created.

JS modifications + CSS tweak

By default tabs are not selected. Also first tab is not selected. To select first tab automatically we have to alter themes/classic/assets/js/custom.js file. At the end of this file please paste this code:

$(document).ready(function(){
	$('#home-page-tabs li:first, #index .tab-content .tab-pane:first').addClass('active in');
});

After that please open file: /themes/classic/assets/css/theme.css and at the end paste code: 

#index .tabs {padding:0px}
#index #home-page-tabs {margin:0px 10px; padding:10px 0px 0px 0px;}

Effects of modifications

How to associate modules with homepage tabs in PrestaShop 8.x / 1.7?

I created free modules that you can use in your PrestaShop 8.x / 1.7. Links to download are available below. Just download, install and configure modules. They will appear inside "homepage tabs" feature.

1. Free homepage popular tab module for PrestaShop 8.x / 1.7
2. Free homepage best sellers tab module for PrestShop 8.x / 1.7
3. Free homepage new products tab module for PrestShop 8.x / 1.7
4. Free homepage on sale products tab module for PrestaShop 8.x / 1.7
5. Homepage featured products pro module (paid)