How to create new homepage tabs in Prestashop 1.6

In this quick tip we will see how easy it is to create new tabs for the homepage in Prestashop 1.6, by simply enabling two hooks in a module.

The basics

First, we need a skeleton. That is, a basic module to work with. You can choose an existing one, or follow along in creating a simple new module for this sole purpose. In the first case, you can jump directly to the next section.

We will not extensively see how to create a Prestashop Module from scratch; therefore, if you need more information about the topic you can have a look at the official Prestashop documentation on creating a Prestashop Module.

That said, let’s create the module’s folder. Inside modules/, create one named pshometabs (or whatever name you prefer, as long as you remind it later on). Then, inside it, create a file named phometabs.php. We will not add any icon to the module, as it’s only meant to demonstrate the procedure. Open up the file and paste the following after an opening php tag:



if (!defined('_PS_VERSION_'))
	exit;

class psHomeTabs extends Module
{
	
	public function __construct()
	{
		$this->name = 'pshometabs';
		$this->tab = 'front_office_features';
		$this->version = '1.0';
		$this->author = 'Nemo';
		$this->need_instance = 0;

	 	parent::__construct();

		$this->displayName = $this->l('PS new homepage tabs');
		$this->description = $this->l('Adds a new block to the homepage tabs.');
		$this->confirmUninstall = $this->l('Are you sure you want to delete this module?');
	}
	
	public function install()
	{
		if (!parent::install())
			return false;
		return true;
	}
	
}

And these are only the barebones of a Prestashop Module. It’s not doing anything of course, so let’s register some hooks for the home tabs.

Registering hooks for the home tabs

First off, we need to support both of the hooks needed for home tabs. They are two, because one displays the label (e.g. Top sellers) and the other the content. Therefore, add the following content to the module’s class:

	public function hookDisplayHomeTab($params)
	{
		return $this->display(__FILE__, 'tab.tpl');
	}

	public function hookDisplayHomeTabContent($params)
	{
		return $this->display(__FILE__, 'tab_content.tpl');
	}

We could as well be done with php and focus on templating now, but to make our life easier (instead of having to manually register hooks from Modules -> Positions in the back office), let’s do it in the install() method:

	public function install()
	{
		if (!parent::install() OR
			!$this->registerHook('displayHomeTab') OR
			!$this->registerHook('displayHomeTabContent'))
			return false;
		return true;
	}

Save, login to the back office and test if the module is correctly installing. If it is, move on to creating template files.

Creating the hooks template files

At this point, we need to display something. But what? Indeed, we need to know what displays where, and if you didn’t guess it already by the name, hookDisplayHomeTab is for the label, while hookDisplayHomeTabContent is, needless to say, for the content. Therefore, we need to write the proper label code within the tab.tpl file, and content inside tab_content.tpl. Of course, these files can have other names as well, as long as everything is consistent.

Create the following folder structure inside the module’s folder: views/templates/hook/. Inside this last one, start by adding the file named tab.tpl, and open it, pasting the following inside

<li><a data-toggle="tab" href="#pshometabs" class="pshometabs">{l s='New Tab' mod='pshometabs'}</a></li>

Please notice the content needs to have this exact structure if you use the default Prestashop 1.6 template. So you need it to contain a list item, and an anchor tag with the data-toggle attribute, as well as href pointing to the id of the content (which we don’t have yet). Again, names are extremely important at this stage, make sure there are no duplicates or things won’t work properly.

Lastly, create tab_content and paste the following:

<ul id="pshometabs" class="pshometabs tab-pane">
	<li>
		{l s='This is a test message.' mod='pshometabs'}
	</li>
</ul>

Once more, to be consistent with the default theme, use an ul element with the related id used in the tab part. Make sure it has tab-pane as class, at least. And of course, an li as child, which can contain virtually anything you want.

Save and refresh, if you did everything correctly, after installing it the new tab will appear in the homepage:

How to create new homepage tabs in Prestashop 1.6 - Final Result

Side notes on the template files

The previous code is meant to work with the default Prestashop 1.6 template. If you use a custom one, I strongly advise you to check how modules hooked to the homepage tabs are buil in the theme folder, modules (e.g. homefeatured). Then, mimic the same structure for the tab and tab content templates.

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • Alberto Salazar

    Hello , I have the same problem and I think I’m missing codes etc , you kindly upload an example in zip format, or send email by alberto.reparo@gmail.com

    thanks

  • JD Dishan

    hi I got errors on the front end; “No template found for module pshometabs” what is this help me

  • http://notfrom.wordpress.com/ NotFromBrooklyn

    It would be nice if you explained how to add content to the new tab, just for us the total newbs of prestashop.

  • sar

    Hi, I have successfully installed the module and create the tab. But I want a multiple tabs instead of only one. I can create 3 tabs but the content I am not sure how to do different content on each tab. Please help me.
    Cheers

  • Kemosade

    Great post , you win a staunch follower .I would like to swap the positions of new arrivals by Popular and that this default load at startup. You can help me . Sorry for my bad English I’m learning .

    • NemoPS

      For the position, try swapping them on the hookHomeTab hook (modules > positions). As for the other question, the first one will be automatically selected :)

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: