Developer Tips: Creating a Tab on the Frontend Product Page in Prestashop

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.

Product-Tab

All modules use the same basic structure, provided by Prestashop developers. The extension must consist of the following files:

    1. module_name.php – the main file that contains module class with all necessary methods (installation, module removal, etc.) and configuration
    2.  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)

  1. 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.

The 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:

2. Program the main producttab.php file:

3. Make up the tab button template of the productTab.tpl:

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.



20 comments

  1. 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)

  2. 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.

  3. sorry brackets chars not displayed, so I’ve substituted with parentheses:

    (is_configurable)0(/is_configurable)
    (need_instance)0(/need_instance)

  4. 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?

  5. 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.

  6. 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.

  7. 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.=)

  8. 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!

  9. 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.

  10. 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?

  11. 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… :)

  12. François,

    Thanks for appreciating the move :) Good luck with the back office content management!

  13. Простите не понимаю в программирование, а как можно сделать модуль на две закладки, и будут ли видны эти закладки когда я буду импортировать товар?

  14. 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

  15. 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

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *