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
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:
|
1 2 3 4 5 |
var id_step = $('.tab-page').length+1; //Get ID of a new tab var belvg_html = 'Tab Content'; //Install tab Content var belvg_header = 'Tab Header '; //Install Tab Header $('.tab-page:last'). after(' |
‘+id_step+’. ‘+belvg_header+’
‘+belvg_html+’
‘);//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:
|
1 |
$this->registerHook('backOfficeFooter') |
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
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!
Thanks Denis for your totorial.
But,i didn’t know where add this code. Can you give us the file as you did in the example http://blog.belvg.com/developer-tips-creating-a-tab-on-the-frontend-product-page-in-prestashop.html
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!
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
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.
Why you don’t use the hook “displayAdminProductsExtra” ?
This hook does exactly what you are doing, in combination with the hook “actionProductUpdate”.
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 [email protected] with any further questions.
Best regards.
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…
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.
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
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
Nguyen,
You are welcome!
That’s a good ideas.
Thanks!
Alex,
You wondered how to add tabs to front office product page. Here is the article for you
http://blog.belvg.com/developer-tips-creating-a-tab-on-the-frontend-product-page-in-prestashop.html
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.
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.
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.
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).