How to enable homepage tabs in PrestaShop 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 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 1.7 in "classic" theme. The same guide can be used of course in other templates too.

homepage tabs for prestashopIf 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 1.7

homepage tabs in prestashop 1.6

 

How to create homepage Tabs in PrestaShop 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 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

 

create new hooks in prestashop 1.7

 

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

hooks manager new 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

homepage tabs in prestashop 1.7

 

How to associate modules with homepage tabs in PrestaShop 1.7?

I created free modules that you can use in your PrestaShop 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 1.7
  2. Free homepage best sellers tab module for PrestShop 1.7
  3. Free homepage new products tab module for PrestShop 1.7
  4. Free homepage on sale products tab module for PrestaShop 1.7
  5. Homepage featured products pro module (paid)
author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim