Developer Tips: Adding Tabs to Product Page in Prestashop

My name is Denis and I decided to make my developer contribution to BelVG blog. Currently I’m writing modules for Prestashop, and as far as a lot of developers have to deal with the same Prestashop template inconveniences, I want to share some ideas I came out with while working on Subscription module.

With its assistance customers will be able to subscribe to products automatic purchase and delivery (e.g. bottled water for office needs, coffee, magazines, newspapers, etc.). Apparently, each product that is available for subscription, requires its own individual configuration.

Unfortunately, Prestashop Back Office doesn’t offer options of adding new tabs to the editing product page, which will be used to configure products, necessary for the module operation. It turned out that in order to create a new tab, you need to add the following HTML code into DOM structure:

Tab Header

Tab Content

25

As long as we can’t change the template page with module installation, we have to use JavaScript, written in the familiar to PrestaShop library jQuery:

‘);//Insert a new tab after existing ones

I placed this code into the script belvg.subscriptions.admin.js

While installing the module, do not forget to register the BackOfficeFooter hook:



18 comments

  1. does it add extra tab in back office? I am looking how to add additional tabs with more information on a given product page, for example to add new tab “Additional Info” so provide more info for customer. Each Tab can contains many Attributes ( Attribute here is text area field that like Description, Short Description of PrestaShop Default).

    

  2. Alex,

    Yes, steps described above will help you to add extra tabs to your back office. I use the example of Subscriptions, and this is precisely the pattern (logic) for you to add a new Additional Info tab.

    In order to insert attributes to your Additional Info tab, edit the given belvg_html code according to your data.

  3. Sorry I mistyped, I mean to add extra tabs to the Product page, allowing to provide more information about product.

    Since there are fixed tabs on product page of PrestaShop, this is limitation, as I want to add more tabs with more information.

  4. Alex,

    You want to know how to add extra tabs to your front office. I think many users would like to do it, so you gave me a good idea for my future article. Expect to read it some day this week.

  5. hello alex, can you tell me specifically Don insert the code, I mean the specific file, not mastered much prestasho, tell me the route entera.gracias

  6. Hi Denis,
    I want to add a new tab in the admin panel.
    Below this tab want a subtab.
    When you will click on that sub tab, a form will open and you have to put some data and that data will store in database.
    My question is that if I’ll do this then which file and class file I have to edit?
    Have you any idea?
    If you have then please share it.
    Thank You

  7. Pradyuman,

    I could give you an answer.

    If done correctly, you need to create a module and follow the instructions Denis described in the article. So we get the Tab. To create subtabs in it, use this sourse http://jqueryui.com/demos/tabs/. Saving the data requires knowledge of Ajax.

    You can also see how tabs are created on admin/tabs/AdminProducts.php-> displayForm (). Add tabs by editing core files.

  8. Hi,can any one tell to me is there any possibility to add extra tabs in product page.It is very urgent to me.Please reply the possibility and if possible how can i add?

    Thanks in advance…

  9. Hari,

    Consider purchasing our Product Tabs module. It will help you create and add extra tabs on the product page. This extension allows you to display additional information about most important and newsworthy products in the store as well. Feel free to contact our support team here or via support@belvg.com with any further questions.

    Best regards.

  10. Why you don’t use the hook “displayAdminProductsExtra” ?

    This hook does exactly what you are doing, in combination with the hook “actionProductUpdate”.

  11. Prestadget,

    the thing is, information in this article concerns Prestashop version 1.4. When I was writing it, version 1.5 had not been released.

  12. Hi

    I want to create a tab under catalog tab to make a functionality just like the manufacturers.
    How can i do it? I am using prestashop 1.5.

    Please help

  13. This article concerns only Prestashop 1.4 version, but I will think of writing an article on how to add tabs in Prestashop 1.5. Stay tuned!

  14. Hi Denis, good article.
    I need from extra tab but just as Pradyuman says: “When you will click on that sub tab, a form will open and you have to put some data and that data will store in database.”
    Have You any ideas how to make it but for PrestaShop 1.6.1.6? Can You help?

    Thank You in advance!

Post a new comment

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