How To Create A Custom Product Tab In Prestashop

Feb 19, 20132544Alex Simonchik
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;)

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

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

  1. 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.
  2. Create a table to store personal data
  3. Create a class to work with this table
  4. Create tpl files to output information in the admin panel and front-end
  5. Change the tab name in config.xml


70 Comments

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

  2. Hello Michael,

    Thanks a lot for your comment.

    What Prestashop version do you use?

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

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

  5. 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 support@belvg.com so that we could resolve your issue?

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

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

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

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

    Congrats!

  10. George,

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

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

  12. Ritesh,

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

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

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

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

    Thanks

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

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

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

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

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

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

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

  23. Michelle,

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

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

Post a new comment

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