How to Create Custom Product Tab in Prestashop

How To Create A Custom Product Tab In Prestashop

To create a custom product tab we will use the following hooks: displayAdminProductsExtra and actionProductUpdate.

displayAdminProductsExtra is required to output content into the tab, such as, for instance, a form to load images or some personal custom fields etc.
actionProductUpdate – is called when the product is changed, so at this moment we can fetch data from our tab and process it.

In this article we will create a sample module Belvg_Sample to serve as an example for how to create a custom tab and output its content for a product page. You can download the ready-made module at the end of the article.

In our tab we will have only element textarea, but, actually, nothing prevents us from creating more complex structures;)

public function install() {
        $sql = array();

        Creating a table for data storage
        $sql[] = 'CREATE TABLE IF NOT EXISTS `'._DB_PREFIX_.'belvg_samplemodule` (
                  `id_belvg_samplemodule` int(10) unsigned NOT NULL AUTO_INCREMENT,
                  `id_product` INT( 11 ) UNSIGNED NOT NULL,
                  `textarea` TEXT NOT NULL,
                  PRIMARY KEY (`id_belvg_samplemodule`),
                  UNIQUE  `BELVG_SAMPLE_UNIQ` (  `id_product` )
                ) ENGINE='._MYSQL_ENGINE_.' DEFAULT CHARSET=utf8';

        if (!parent::install() OR 
            !$this->registerHook('displayAdminProductsExtra') OR
            !$this->registerHook('actionProductUpdate') OR
            !$this->registerHook('displayFooterProduct') OR

public function install() {

$sql = array();

Creating a table for data storage

$sql[] = 'CREATE TABLE IF NOT EXISTS `'._DB_PREFIX_.'belvg_samplemodule` (

`id_belvg_samplemodule` int(10) unsigned NOT NULL AUTO_INCREMENT,

`id_product` INT( 11 ) UNSIGNED NOT NULL,

`textarea` TEXT NOT NULL,

PRIMARY KEY (`id_belvg_samplemodule`),

UNIQUE `BELVG_SAMPLE_UNIQ` ( `id_product` )

) ENGINE='._MYSQL_ENGINE_.' DEFAULT CHARSET=utf8';

if (!parent::install() OR

!$this->registerHook('displayAdminProductsExtra') OR

!$this->registerHook('actionProductUpdate') OR

!$this->registerHook('displayFooterProduct') OR

   !Configuration::updateValue('sample_module_textarea', '') OR
            !$this->runSql($sql)
        ) {
            return FALSE;
        }

        return TRUE;
    }

!Configuration::updateValue('sample_module_textarea', '') OR

!$this->runSql($sql)

) {

return FALSE;

}

return TRUE;

}

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Vlad

//Preparing data for the form
public function hookDisplayAdminProductsExtra($params) {
        $id_product = Tools::getValue('id_product');
        $sampleObj = Belvg_Sample::loadByIdProduct($id_product);
        if(!empty($sampleObj) && isset($sampleObj->id)){
            $this->context->smarty->assign(array(
                'belvg_textarea' => $sampleObj->textarea,
            ));
        }

        return $this->display(__FILE__, 'views/admin/sample.tpl');
    }

//Saving Data
public function hookActionProductUpdate($params) {
        $id_product = Tools::getValue('id_product');
        $sampleObj = Belvg_Sample::loadByIdProduct($id_product);
        $sampleObj->textarea = Tools::getValue('belvg_sample');
        $sampleObj->id_product = $id_product;

        if(!empty($sampleObj) && isset($sampleObj->id)){
            $sampleObj->update();
        } else {
            $sampleObj->add();
        }
    }

Sample.tpl
{if isset($belvg_textarea)}
<!-- Belvg_SampleModule -->
	<fieldset style="border:none;">
        <textarea name="belvg_sample" rows="10" cols="45">{$belvg_textarea}</textarea>
    </fieldset>
<div class="clear">&nbsp;</div>
<!-- /Belvg_SampleModule -->
{/if}

//Preparing data for the form

public function hookDisplayAdminProductsExtra($params) {

$id_product = Tools::getValue('id_product');

$sampleObj = Belvg_Sample::loadByIdProduct($id_product);

if(!empty($sampleObj) && isset($sampleObj->id)){

$this->context->smarty->assign(array(

'belvg_textarea' => $sampleObj->textarea,

));

}

return $this->display(__FILE__, 'views/admin/sample.tpl');

}

//Saving Data

public function hookActionProductUpdate($params) {

$id_product = Tools::getValue('id_product');

$sampleObj = Belvg_Sample::loadByIdProduct($id_product);

$sampleObj->textarea = Tools::getValue('belvg_sample');

$sampleObj->id_product = $id_product;

if(!empty($sampleObj) && isset($sampleObj->id)){

$sampleObj->update();

} else {

$sampleObj->add();

}

Sample.tpl

{if isset($belvg_textarea)}

<textarea name="belvg_sample" rows="10" cols="45">{$belvg_textarea}</textarea>

</fieldset>

{/if}

By default, the name of the new tab coincides with the module name, so, if we hadn’t changed anything our tab would have the name Module Belvg_samplemodule, which is not very good. To fix this, we need to create the config.xml file in the module root folder where the node displayName defines the displayed name

<?xml version="1.0" encoding="UTF-8" ?>
    <module>
        <name>belvg_samplemodule</name>
        <displayName><![CDATA[Belvg Sample]]></displayName>
        <version><![CDATA[1.0.0]]></version>
        <description><![CDATA[Works with displayAdminProductsExtra and actionProductUpdate]]></description>
        <author><![CDATA[BelVG]]></author>
        <tab><![CDATA[front_office_features]]></tab>
        <is_configurable>0</is_configurable>
        <need_instance>1</need_instance>
        <limited_countries></limited_countries>
    </module>

<?xml version="1.0" encoding="UTF-8" ?>

<name>belvg_samplemodule</name>

<is_configurable>0</is_configurable>

<need_instance>1</need_instance>

<limited_countries></limited_countries>

</module>

As you see, there is nothing complicated here. You just need to understand the algorithm and follow the instructions:

Create a module and register it in the below hooks: displayAdminProductsExtra and actionProductUpdate. This is a minimum required number of hooks for back-end data output and data saving.
Create a table to store personal data
Create a class to work with this table
Create tpl files to output information in the admin panel and front-end
Change the tab name in config.xml

Product Tabs

Take your online store to the next level with BelVG module

Download here

Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Vlad

Tags:

70 Comments

Hi jLuis,
Unfortunately, we lost all the archives and backups due to server issues. Sorry, now there is nothing we can do to help you.

Hi @Alex Simonchik ,
great thanks for the tutorial , it seems intresting , just when i can’t dowload the module .
How can i dowload it ??
thanks

thanks for answer Alex

Hi Stimu,

Unfortunately, we had some server issues and all the archives got lost. Sorry, but there is nothing we can do to help you now.

Regards

Hello for all,
I can’t download this module,
there is one who can help me or send me this compressed version of this module?

thanks for all

Dear Anjali,

if it works on 1.7.1.2 it should work on 1.7.2.4 as well.
Probably, there is a bug somewhere. The better option is to check everything once more.
In case you need any help from our team please drop us an email at [email protected]. We’ll be happy to assist.

Hello Alex Simonchik,
I tried clear installation of prestashop 1.7.2.4 version, but no change!!
Not even the Modules tab appear while editing product details .However the Belvg_Sample module lists under the DisplayAdminProductsExtra hook in positions.
What should i do?

Anjali, there is no difference in this part between Prestashop 1.7.1.2 and 1.7.2.4.
Most likely something went wrong after an update. Have you tried to use this way with the clear installation of the version 1.7.2.4?

Hello Iryna Kandrashova,
I tried it out on Prestashop 1.7.1.2 and it worked for me. But when i updated prestashop to 1.7.2.4 it didn’t.
I want to use the hook DisplayAdminProductsExtra . The modules appear under this hook in positions, but the modules tab and configuration not displaying in admin end of products. Could you please help me?

Dear Anjali,

this article, as well as the module, is for Prestashop 1.6, not for 1.7 version.

Hello ,
The Belvg_Sample module not working in the latest version of prestashop (1.7.2.4).
The Modules tab that appear in admin side of product,while editing products, along with the other tabs : Basic settings,Quantities etc is also not available in prestashop 1.7.2.4.
Can you explain why?
Thank you.

Hello, Priska!
That’s good! Subscribe to our blog to stay tuned.
Kind regards,
Iryna

Dear guys,

Found it! Language was on TRUE in class file. Sorry for inquiring.

Best wishes,
Priska

Dear guys,

I tried it out on Prestashop 1.7. It worked one day and the next I got the message that my DB doesn’t exist. Fact is that I have created one static DB manuall with the name ps_unique_item_lang plus one that I’m working with with your file that is called ps_unique_item. Now with add() or insert(), the add-hook tries to generate an entry in a DB ps_unique_item_lang too and not only into ps_unique_item. Can you explain why?

Best wishes,
Priska

Antonio, in this case, you better contact our Support Team [email protected] and they will do their best to help you!

Hello,
Can you help me to do so? I really do not know how to do it.
I also tried adding a new hook in the file (belvg_samplemodule)
But I always get an error.
If for you, I can also pay for the assistance

Hi Antonio! You will need to edit product-list.tpl file and add a function that generates a custom field. Or you may connect to the hook, which is on the list and implement the hook method in a module.

Please, I would like to show the field also on the page product-list.tpl
Please tell me how to do it?

Hi Loule,
Thank you for your comment. You can get in touch with our Support Team ([email protected]) to make an estimation for that kind of customization.

Hello
thanks for this very helpful sample.
but could you help us to manage “FILES” input filelds ?
for example I wan to ad an extra single Image field to my product or a pdf field or some other attached files.
I want to use input type=”file” in the form but I can’t get and store the result. could you add an example to manage files ?
regards

Hi, thanks for sharing this tutorial, what I’ve noticed is that on the new tab there isn’t any “save” and “save & stay” buttons, I’m pretty sure they can be inserted there by useing the helper form class, I’ve done some research but there isn’t any example for this very case.
is there something I’m missing, I don’t like the idea to add them directly into the tpl, because I should copy the same structure from a rendered form, and the look and feel must be checked to match the other buttons… therse should be something more “automagic”.

Hello,
Please can you tell me how can I show the custom field below the price line?

Do you have a solution for the content of the custom tab being deleted when an update on the product is saved automatically by any chance? I.e. if we change the product quantity, the change is saved automatically and the content of the custom tab is then deleted, the value in the table is deleted. Thanks

Hi,

Is it possible to show the product info we have from the tab in the cart summary along with the product name, desc etc?

Thanks

Thank you so much. I am learning PS, I cannot figured out how these stuff are working together.

Thanks Alex, great tutorial

Sir ,i have a query regarding product availability as per postal code entered by buyer..is there any solution for that?..i’m using prestashop 1.5

same for me, when you update the product the content of the custom tab disappear

anyway thanks for the mudole

It’s working for 1.6 but when you update the status of the product from the product list, the content of this custom tab disappear.

Hello,
this module is realy helpfull.

Thanks

Hello,

It is a tutorial and you can contact our support team at [email protected] for the solution.

Anders,

It depends on your theme. Generally we use our own css file for every module.

David,

Thank you for your comment)

Hello

I install BVLG Sample Module in Prestashop 1.6X. The installation of module done successful. Now this module apper in product page in just above footer.

Is it possible that can i show this module under image area. because information which i need to provide to my client’s for that i need this module to be hook under image area.

I hope if you can provide me a solution as soon as possible.

Thank you

Yep, i used google, and found an answer :)
displayProductButtons that the hook :)

How do you add a css to the modul, one that will be combined in the all.css file?

That’s for this modul, it’s great just what i needed. I wanted to show “shipping starting from”

I have already changed the hook to the right column, but how do you post it right under the price? Can you do that?

Thanks so much for solution ;)

Prestarocket,

Thanks for the advice! Using method hookActionProductSave() is actually better. We will take this into account while adapting this article for Prestashop v1.6.

Hello Alex,

Why not using hookActionProductSave ?
With this hook, you can add errors to the controller ($this->context->controller->errors[])

+
@prestarocket

Nelson,

This is not exactly like this, because it is just an example. So, if you want to add 2 fields you can use this module as a basis. But in your case you also need import and ERP which makes the process more difficult.

Hi.

I need one clarification, i read the comments and the text but i am not a programmer and my knowledge is limitated.

I need to add 2 extra fields, basically one is the “Manufacturers URL” where i put the link to the brand product page URL and in the product frontpage there is a text “Manufacturers Page” near the reference of the product where the client can click and open the product page in a new tab.

Also i want to have a field that is SRPr (Recommended Street Retail price), that appears also near the reference.

Questions:

1) Can i do this with this Module? Maybe making 2 instalations and changing something in the code to do it? Where in the code?
2) Can i Hook the information near the reference and make it non editable text, has the modules when installs becomes editable by the user.

Michelle,

Sorry did not quite understand what you mean: did you follow the instruction but something went wrong?

Jason,

Report customization is quite a challenging task for an unexperienced user. We will try to make a post where will highlight general steps of this process, but still it is better to leave this for professionals.

Prestashop version 1.5.6 –
There is a Customize tab already available and would be perfect if it would except the type of text that I need. Unfortunately, it throws an error. No code, just an error.
It excepts a short sentence, but what I need is a copy of a customization for a wedding invitation and this is what it looks like…
1165-19-c24Traditional – Parents InvitingA[bride parent names] along with[groom parent names]request the honour of your presenceat the marriage of their children[bride name]- and -[groom name]on [date][year]at [ceremony time][ceremony location][ceremony city], [ceremony prov/state]Cocktails, Dinner, and Dancingat [reception time]at [reception location][reception address], [reception city], [reception prov/state]…
I do not need any code interpretation. Just need this to post as text, exactly like it is.
Am at a loss. do not know what to do.
Can you help me?

Alex,

Thank you for this wonderful tutorial. I have the same question with Tom, if I wanna import many products with this customed field, how do I modify the importing controller(s) to include this field?
Thank you so much.

kahn,

Thank you for your comment. You need to create one more field in the database (in order to save the second field) and duplicate the logic for it to be saved/displayed on the front end.

Its really very nice tutorial for beginners like me :)

I want to know one more thing, what I should do if I have to add more than 1 textarea?

Tom,

Here you can read more about adding new attributes.

To be able to use these fields in standard export you would need to considerably customize the export module. Which, I think, is a good topic for my next blog post, so, please, stay tuned))

Łukasz,

You can read the continuation here.

As well as the information of the tab/mobule being searchable, I cant see it within the exported CSV… I need to be able to import large amounts of products with these additional fields/information… is this possible ?

This looks decent! How does this work within the search… I cant see a “weight” option within the “Preferences > search” for this module

Thanks

What about validation?
How to display error after saving?

Koko,

Do you want to create a tab with a field that has the “file” input type? In that case take a look at this module: http://module-presta.com/background-switcher.html. We have already developed such a possibility
PS Files upload is, however, way more complex job than simply saving them in a database.

Hi Alex,

Thanks a lot for this. It’s very clear and definitely helpful !

Now, is it possible to upload an image (just one, for page layout) ?

Thanks again.

Alberto,

BELVG_SAMPLE_UNIQ – is the index name for the filed id_product in the database. It is recommended to add indexes for the table fields which will be involved into the JOIN operations.
!Configuration::updateValue(‘sample_module_textarea’, ”) OR – this construction means that if the constant ‘sample_module_textarea’ in the field Configuration is not updated, then the installation of the module will fail. Configuration::updateValue – updates the variable in the table Configuration

Ritesh,

To display content on the homepage use the hook Home. You can take the standard module Homefeatured as an example.

Hi !

First, thanks for your tuto ! it is really helpful ;)
Second, I am trying to modify the module a bit, in order to add some more functionality, however, for the moment I am not able to have a succesfull installation after I make the changes…

I wanted to ask you some stuff about your code:
– For what is this: UNIQUE BELVG_SAMPLE_UNIQ ( id_product )
– and this ? !Configuration::updateValue(‘sample_module_textarea’, ”) OR

Thanks in advance

how to create a tab panel module and show this module on home page

George,

The answer to your question is actually what the article is exactly about. Would you kindly clarify what difficulties you encounter?

How we can make a custom field in the product on 1.5.4.1?

thank you

Thanks thanks a lot for your post. It really saved my a lot of time and helped to understand prestashop better.

Congrats!

Boxy,

Please, follow our blog, in the nearest future we will describe how to add multi-languages to the fields of this tab. unfortunately, it is impossible to briefly describe this process here in the comments since it requires remaking the module and database.

I was wondering. suppose I have a current module installed in the modules. suppose the module name is abc and the mail file is abc.php. in that I make a function
public function hookDisplayAdminProductsExtra($params)
{
$this->_html .= ‘

bla
bla
bla

}

and I have a function xyz()

why dosent it update in the tab but this will work in the module page is I go through modules.

I mean why follow so complicated procedure just to update values in database.

Hi Alex,
Thanks for this very nice article, everything works as expected.
I’m just wondering how to make this module multi-languages.
What I mean is having the flags displayed beside the text area in the BO so we can provide a different text on the FO depending on the language of the user.
Could you give me a hint?
If it’s to much to ask, I’ll understand, you’ve already been very helpful.
Thanks again

As you can see on the screen, the archive from the article worked for us. We installed the module on the 1.5.3.1 PS version.

This screen indicates that there were no problems with the front end.

So your problem is a real head-scratcher :) Would you kindly send your FTP and admin accesses to [email protected] so that we could resolve your issue?

I tried installing this sample module on 1.5.3.1 and though it installed successfuly – when I go to the ‘catalog’ and edit a product or try add a new product – the tab isnt there?

Lily,

http://blog.belvg.com/developer-tips-creating-a-tab-on-the-frontend-product-page-in-prestashop.html – there you go. It’s about Presta 1.4, actually, however, in 1.5 version hooks didn’t change in this very part, so feel free to use the article.

Hey Alex.

Thanks a lot for this. Its amazing, it really helped me to understand how this works.

Now I have to figure out how to display the tab info in a tab on the FO products page. I’d really appreciate if you can give me any guideline…

Best regards.

Hello Michael,

Thanks a lot for your comment.

What Prestashop version do you use?

Hey Alex,

Thanks for the article. It’s definitely helpful to get an understanding of how all the works. I did try the example as well as install the sample module provided, but the new tabs did not appear.

If I override the AdminProductsController and manually add the tabs to the ‘$this->available_tabs’ array, the tabs show up.

However, by creating a module and registering the hook ‘displayAdminProductsExtra’, the new tab doesn’t appear.

Did you have any further ideas on what could be preventing this from working.

Thanks.

Great website by the way, very very helpful.

How To Create A Custom Product Tab In Prestashop

Product Tabs

Table of contents:

70 Comments

Post a new comment Cancel

How To Create A Custom Product Tab In Prestashop

Get interesting stuff and updates to your email inbox

Product Tabs

Table of contents:

70 Comments

Post a new comment Cancel