We will develop the module that creates a new tab on the Frontend product page. If everything is done correctly, a new tab will appear on the product page.
All modules use the same basic structure, provided by Prestashop developers. The extension must consist of the following files:
-
- module_name.php – the main file that contains module class with all necessary methods (installation, module removal, etc.) and configuration
- index.php – if the module has a separate page on the frontend, it is better to use this file; if the module has no frontend, you need to set redirections to the home page in this file (for store security)
- logo.gif – module logo
Besides above-mentioned files, our module will have two more template files:
1. productTab.tpl – this template will contain the HTML-code of a new tab button
2. productTabContent.tpl – the HTML-code template of new tab content
So, let’s start working on the module ProductTab.
First, we create the folder named “producttab” with the following files:
– producttab.php
– config.xml
– index.php
– logo.gif
We will create one more “tpl” folder. In here we’ll put productTab.tpl and productTabContent.tpl files.
PrestaShop Modules
Take your online store to the next level with BelVG PrestaShop Modules
Visit the storeThe final module structure is:
- tpl / productTabContent.tpl
- tpl / productTab.tpl
- tpl / index.php – stub file, it can be left blank
- producttab.php
- index.php
- logo.gif
Follow the next steps closely
1. Set the redirection to the main store page in index.php file:
|
1 |
<!--?php header("Location: ../"); exit; ?--> |
2. Program the main producttab.php file:
|
1 |
<!--?php // Disable direct addressing to the script: if (!defined('_PS_VERSION_')) exit; //Create module class: class producttab extends Module { //Class constructor that contains its configuration: public function __construct() { $this->name = "producttab"; //Module name $this->tab = "front_office_features"; //Tab with the module in Prestashop back-office modules list $this->version = "1.0"; // Module version $this->author = "BelVG"; // Module author parent::__construct(); $this->displayName = $this->l("Product Tab"); // Module title $this->description = $this->l("Module creates a new tab on the frontend product page "); // Module description } //Module installation-method: public function install() { return (parent::install() AND $this->registerHook('productTab') //Register productTab hook that will display the tab button AND $this->registerHook('productTabContent') //Register productTabContent hook that will display the tab content ); } //Module deinstallation-method: public function uninstall() { return (parent::uninstall() AND $this->unregisterHook('productTab') AND $this->unregisterHook('productTabContent')); // Delete all hooks, registered by the module } //Method will be called while performing the "ProductTab" hook (tab buttons generation): public function hookProductTab($params) { global $smarty; //Call the template containing the HTML-code ?? our button return $this->display(__FILE__ , 'tpl/productTab.tpl'); } public function hookProductTabContent($params) { global $smarty; //Transfer the new tab content into template via smatry //( it is optional as far as the content can be assigned directly in the template) $contant = 'Content New Tab'; $smarty->assign('contant', $contant); // Call the template containing the HTML-code of our new tab content: return $this->display(__FILE__ , 'tpl/productTabContent.tpl'); } } ?--> |
3. Make up the tab button template of the productTab.tpl:
- {l s=’Product Tab’ mod=’producttab’}
4. Make up the template of the productTabContent.tpl content
{*call script that sends producttab.php content to this template :*} {$contant}
The module producttab is created.
Compress the producttab folder to *.zip archive. Go to the back office and upload the producttab.zip to the Modules tab. Then open Front Office Features tab and install the module by clicking on the Install button.
If you wonder how to add extra tabs to Prestashop back office, read this post.
PrestaShop Development
Take your online store to the next level with BelVG PrestaShop Development
Visit the page
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
Hello sir..
I’m using PS version 1.5.4.1
If I click on a thumbnail, the customization editing page need to open in light box..so please give me the solution
Hello Denis,
I’m using prestashp 1.4.9.0 version and in this we are not getting the productTab.tpl and productTabContent.tpl files. so can u please help me
Josh,
This module works only with Prestashop version 1.4*.
THanks for your contributions. Does this work with v 1.5.2 of prestashop yet?
Простите не понимаю в программирование, а как можно сделать модуль на две закладки, и будут ли видны эти закладки когда я буду импортировать товар?
François,
Thanks for appreciating the move :) Good luck with the back office content management!
Nice! Well done ;) Though i would have liked to benefit from it, how could i say… for free ^^
Anyway, clever move with that Denis. I thinks you will get a lot of positive response to that. And i’ll try to work out how you did the back office content management thing… :)
Alex and François,
I have developed a Prestashop module that adds extra tabs to product pages in frontend. Eventually, you inspired me to to that =)
Here is the link to it. http://module-presta.com/product-tabs.html
Alex,
You are right.
I just read Prestashop Developer Guide, page5 (table “Product sheet”) list all hooks available, the hook we need called ‘productTab’, and the content of extra tabs is handled by the ‘productTabContent’ hook. Is it correct?
Thanks Denis! ;)
François,
I’m still thinking of developing a module with unique content on each product page and content managable in back office. Your comments would be appreciated. If i release this module, I will let you know.
Well thanks Denis for the work, and Alex for the right questions… Had been looking to solve those problems since you published this. I think having a module with unique content on each product page and content managable in back office would be awesome. And if by any chance i can come up with another interesting stuff you could add, well i know what to do ;)
Thanks again!
Alex,
That’s a great point you make. I will cover these issues pretty soon.
I think that our cooperative work (your proper questions and my following corrections & fixes) definitely leads to the release of a free module with all functions described by you.=)
Denis,
one note: it add the same new tab for all products, in all categories. It would be great if will possible to add extra tab with a different content for each product.
And if we can add extra tabs to specific product(not for all products), similarly with “Data sheet” tab that can be added when requres.
Alex,
I have fixed the code, so now it should work better. I also attached the producttab .zip to show you how it looks (at the end of the article).
1) What should be content of config.xml file?
Don’t worry about config.xml file. It is generated automatically.
2) The module works with any PS version? (I’m using 1.4.7.0)
Yes, it works with your PS version as well as with 1.3*.
3) Does this module allow manage it from its control panel, i.e. specify Tab name, insert text, edit with TinyMCE?
I will tell more about tab content editing with TinyMCE in my future article next week.
Ok, I find error: in producttab.php the name of the class should be same as the module’s name, so instead of
$this->name = “blocksconstructor”; //Module name
it need be
$this->name = “producttab”; //Module name
Now module was installed correctly and have Disable & Reset links. But it didn’t add tabs on the front Product page, it show
“No template found for module productTab.tpl” next to ‘More Info’ tab
and
“No template found for module productTabContent.tpl” at the bottom of text description.
I think something wrong with my productTab.tpl and productTabContent.tpl But ddoes this module allow manage it from its control panel, i.e. specify Tab name, insert text, edit with TinyMCE same as in default ‘More Info’ tab?
sorry brackets chars not displayed, so I’ve substituted with parentheses:
(is_configurable)0(/is_configurable)
(need_instance)0(/need_instance)
I created module, and installed on 1.4.7.0 but here is some problems: on the top module section of Back Office it show green icon “Module installed successfully’, but below in list in ‘Front Office Features’ it show module not installed(red cross icon), and no Disable or Reset links, only Delete.
It doesn’t appear in Back Office on Product page also.
Which settings should have config.xml file for these two lines, 0 or 1?
0
0
Mine is set ‘0’ both.
Thank you.
Thank you for excellent tutorial, Denis.
Two questions: about productTab.tpl and productTabContent.tpl: is the code specified in p.3 and p.4 the only content that should have these templates?
What should be content of config.xml file?
Also, the module works with any PS version? (I’m using 1.4.7.0)