PrestaShop, with its powerful and flexible framework, allows developers to customize various aspects of the platform to meet specific business requirements. One such customization is adding a custom tab in the back office product page. In this blog, we will walk through the step-by-step process to achieve this by creating a sample module called kbcustommodule.
We can create the custom Tab in the back office product page in two ways:
- Using Symfony components.
- Using displayAdminProductsExtra Hook
Method 1:
This tutorial is applicable for PrestaShop version 8.1 and above, utilizing Symfony components.
Step 1: Create Your Module
kbcustommodule/
|– composer.json
|– config/
| |– services.yml
|– src/
| |– Form/
| | |– Modifier/
| | | |– ProductFormModifier.php
| | |– Type/
| | | |– CustomTabType.php
|– kbcustommodule.php
Start by creating a folder named kbcustommodule under the modules directory of your PrestaShop installation. Inside this folder, create the kbcustommodule.php file, which will contain the main class for your module. The module class initializes the module and registers the required hooks.
Here’s an example of the kdcustommodule.php file:
Run the command composer dump-autoload in your module’s root directory to enable namespace autoloading.
Step 2: Define Services
Create a services.yml file under the config directory of your module (kbcustommodule/config/services.yml). This file defines the Symfony services required for form customization.
Step 3: Create the Custom Tab Form Type
Create a CustomTabType class in the src/Form/Type folder of your module. This class defines the fields that will appear in the custom tab.
Step 4: Create the ProductFormModifier Class
The ProductFormModifier class defines how the custom tab integrates with the existing product form.
Final Step: Install and Test
- Install the module via the back office or manually place it in the modules directory and enable it.
- Navigate to the back office product page. You should see a new tab labeled “Custom Tab” with a field labeled “Custom Field.”
- Test the functionality by adding data to the custom field and ensuring it saves correctly.
After successfully installation of the above module. You will get the result as follows.
Method 2:
The displayAdminProductsExtra hook allows you to add custom content or tabs to the product edit page in the Back Office. This method avoids the complexity of defining Symfony services and is easier for developers not familiar with Symfony.
Step 1: Create the Module
Start by creating a basic module structure. For example:
Kbcustommodule/
|– config/
|– translations/
|– views/
| |– templates/
| |– admin/
| |– products/
| |– custom_tab.tpl
|– Kbcustommodule.php
Step 2: Define the Module Class
In the Kbcustommodule.php file, define your module and register the displayAdminProductsExtra hook.
Step 3: Create the Template File
In the views/templates/admin/products/custom_tab.tpl file, define the HTML and content for your custom tab.
Step 4: Save the Data
To save the custom data, use the actionAdminControllerSetMedia hook along with JavaScript or PHP. Alternatively, you can use the actionProductUpdate hook in PHP.
Example in Kbcustommodule.php:
Step 5: Add the Field to the Database
Modify the database to store your custom data. For example:
————————————————————————
ALTER TABLE ps_product ADD custom_field TEXT NULL;
————————————————————————
After successfully installation of the above module. You will get the result as follows
For further assistance, feel free to reach out or leave a comment below. Or you can also reach out to us on Knowband Helpdesk.