{"id":828484,"date":"2024-12-20T06:10:18","date_gmt":"2024-12-20T06:10:18","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=828466\/"},"modified":"2024-12-20T10:40:15","modified_gmt":"2024-12-20T10:40:15","slug":"creer-un-onglet-personnalise-dans-la-page-produit-du-back-office-de-prestashop","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/creer-un-onglet-personnalise-dans-la-page-produit-du-back-office-de-prestashop\/","title":{"rendered":"Comment cr\u00e9er un onglet personnalis\u00e9 dans la page produit du back-office de PrestaShop"},"content":{"rendered":"

PrestaShop, with its powerful and flexible framework, allows developers to customize various aspects of the platform to meet specific business needs. One such customization is adding a custom tab in the product page of the back office. In this blog, we will walk through the step-by-step process to achieve this by creating a sample module called kbcustommodule.<\/span><\/span><\/p>\n

We can create the custom tab in the back office product page in two ways:<\/span><\/span><\/strong><\/p>\n

    \n
  1. Using Symfony components.<\/span><\/span><\/li>\n
  2. Using the displayAdminProductsExtra hook<\/span><\/span><\/li>\n<\/ol>\n

    Method 1:<\/span><\/span><\/strong><\/h2>\n

    This tutorial is applicable to PrestaShop version 8.1 and above, using Symfony components.<\/span><\/span><\/p>\n

    Step 1: Create your module<\/span><\/span><\/strong><\/h3>\n

    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. In this folder, create the kbcustommodule.php file, which will contain the main class of your module. The module class initializes the module and registers the required hooks. Here is an example of the kdcustommodule.php file:<\/span><\/span><\/p>\n

    \"Create<\/p>\n

    Run the composer dump-autoload command in your module’s root directory to enable namespace autoloading.<\/span><\/span><\/p>\n

    Step 2: Define the services<\/span><\/span><\/strong><\/h3>\n

    Create a services.yml file under your module’s config directory (kbcustommodule\/config\/services.yml). This file defines the Symfony services needed to customize the form.<\/span><\/span><\/p>\n

    \"Create<\/p>\n

    Step 3: Create the Custom Tabbed Form Type<\/span><\/span><\/strong><\/h3>\n

    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.<\/span><\/span><\/p>\n

    \"Create<\/p>\n

    Step 4: Create the ProductForm classEdit<\/span><\/span><\/strong><\/h3>\n

    The ProductFormModifier class defines how the custom tab integrates with the existing product form.<\/span><\/span><\/p>\n

    \"Create<\/p>\n

    Final step: install and test<\/span><\/span><\/strong><\/h3>\n
      \n
    1. Install the module via the back office or manually place it in the modules directory and activate it.<\/span><\/span><\/li>\n
    2. Navigate to the product page in the back office. You should see a new tab called \u201cCustom Tab\u201d with a field called \u201cCustom Field\u201d.<\/span><\/span><\/li>\n
    3. Test the functionality by adding data to the custom field and ensuring it is saved correctly.<\/span><\/span><\/li>\n<\/ol>\n

      After successfully installing the above module, you will get the following result.<\/span><\/span><\/p>\n

      \"Google<\/p>\n

      \n

      Integrate Google Tag Manager into Prestashop<\/span><\/span><\/h3>\n

      SHOP<\/span><\/span><\/span><\/a><\/p>\n<\/div>\n