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:

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.

The post How to create new homepage tabs in Prestashop 1.6 appeared first on NemoPS.