Tutoriel

Ajouter un onglet dans l'admin de Prestashop

Vous souhaitez ajouter une nouvelle section personnalisée dans le back-office de votre boutique PrestaShop ? Que ce soit pour afficher des statistiques, des paramètres spécifiques ou un module dédié, il est possible d’ajouter un nouvel onglet (menu) dans l’administration grâce à la classe Tab.

Dans ce tutoriel, nous allons voir comment créer pas à pas un onglet de menu nommé “Commentaires CMS” sous une catégorie principale “Prestamint”, avec une icône “comment” (Material Icon), et une page simple affichant le texte “Mon contenu”.

1. Principe de fonctionnement

Dans PrestaShop, chaque onglet du menu d’administration correspond à une entrée de la table ps_tab. Ces onglets sont créés, modifiés ou supprimés automatiquement lors de l’installation/désinstallation d’un module.

Pour ajouter un onglet, il faut donc :

Créer un module contenant le code d’installation de l’onglet ;
Déclarer la classe contrôleur qui affichera la page ;
Définir le nom de la catégorie principale et le nom de l’onglet enfant ;
Associer une icône Material Design à l’onglet ;
Afficher un contenu simple (texte, tableau, configuration, etc.).

2. Exemple complet de code

Nous allons créer un module appelé prestamintcomments qui ajoutera un nouvel onglet dans le menu d’administration.

Arborescence du module

prestamintcomments/
├── prestamintcomments.php
└── controllers/
‎‎‎‎‎‎‎‎ㅤ‎‎‎‎‎‎‎‎ㅤ└── admin/
‎‎‎‎‎‎‎‎ㅤ‎‎‎‎‎‎‎‎ㅤ└── AdminPrestamintCommentsController.php

/prestamintcomments/prestamintcomments.php

<?php

if (!defined('_PS_VERSION_')) {
    exit;
}

class Prestamintcomments extends Module
{
    public function __construct()
    {
        $this->name = 'prestamintcomments';
        $this->tab = 'front_office_features';
        $this->version = '1.0.0';
        $this->author = 'Prestamint';
        $this->need_instance = 0;
        $this->ps_versions_compliancy = ['min' => '8.1', 'max' => _PS_VERSION_];
        $this->bootstrap = true;
        parent::__construct();
        $this->displayName = $this->l('Commentaires CMS');
        $this->description = $this->l('Ajoute une fonctionnalité de commentaire sur les pages CMS contenues dans des catégories CMS');
        $this->confirmUninstall = $this->l('Êtes-vous sûr de vouloir désinstaller ce module ?');
    }

    public function install()
    {
        return parent::install() && $this->installTabs();
    }

    public function uninstall()
    {
        return parent::uninstall()
            && $this->removeTab('AdminPrestamintComments')
            && $this->removeTab('AdminPrestamint');
    }

    private function installTabs(): bool
    {
        $nameParent = $this->l('Prestamint');
        $nameChild = $this->l('Commentaires CMS');

        if (!$this->upsertTab('AdminPrestamint', $nameParent, 0, '')) {
            return false;
        }

        $parentId = (int) Tab::getIdFromClassName('AdminPrestamint');

        return $this->upsertTab('AdminPrestamintComments', $nameChild, $parentId, $this->name, 'comment');
    }

    private function upsertTab(string $class, string $name, int $idParent, string $module = '', string $icon = ''): bool
    {
        $id = (int) Tab::getIdFromClassName($class);
        $tab = $id ? new Tab($id) : new Tab();
        $tab->class_name = $class;
        $tab->id_parent = $idParent;
        $tab->module = $module;
        if ($icon !== '') {
            $tab->icon = $icon;
        }
        $langs = Language::getLanguages(false);
        foreach ($langs as $lang) {
            $tab->name[(int) $lang['id_lang']] = $name;
        }
        $tab->active = 1;

        return (bool) $tab->save();
    }

    private function removeTab(string $class): bool
    {
        $id = (int) Tab::getIdFromClassName($class);
        return $id ? (bool) (new Tab($id))->delete() : true;
    }
}

/prestamintcomments/controllers/admin/AdminPrestamintCommentsController.php

<?php

class AdminPrestamintCommentsController extends ModuleAdminController
{
    public function __construct()
    {
        $this->bootstrap = true;

        $this->table = 'configuration';
        $this->className = 'Configuration';

        parent::__construct();

        // Utiliser $this->module->l() pour la traduction
        $this->context->smarty->assign([
            'simple_content' => $this->module->l('Mon contenu'),
            'current_module_name' => $this->module->displayName,
        ]);
    }

    public function initContent()
    {
        parent::initContent();
        $this->setTemplate('content.tpl');
    }

    public function renderList()
    {
        return '';
    }
}

/prestamintcomments/views/templates/admin/content.tpl

<div class="panel">
    <h3>
        <i class="icon-comment"></i>
        {l s='Page des Commentaires CMS' mod='prestamintcomments'}
    </h3>

    <p>
        {$simple_content}
    </p>

    <p class="alert alert-info">
        {l s='Ceci est la page gérée par le module: %s' mod='prestamintcomments' sprintf=[$current_module_name]}
    </p>
</div>

3. Installation du module

1️⃣ Placez le dossier prestamintcomments dans le répertoire /modules/ de votre boutique.
2️⃣ Allez dans le back-office → Modules > Module Manager et installez Prestamint Comments.
3️⃣ Une fois installé, vous verrez un nouvel élément dans le menu latéral :

Prestamint (menu principal)
└ Commentaires CMS (sous-menu)

En cliquant dessus, la page affichera le texte “Mon contenu”.

4. Personnaliser l’onglet

Vous pouvez adapter :

👉 Le nom de la catégorie (Prestamint)
👉 Le nom du sous-menu (Commentaires CMS)
👉 L’icône Material (comment, settings, dashboard, etc.)
👉 Le contenu de la page (texte, formulaire, tableau, statistiques...)

Pour afficher un contenu plus avancé, vous pouvez utiliser la méthode $this->content ou injecter vos propres blocs HTML et Smarty dans le contrôleur.

5. Résultat final

Une fois installé, votre back-office affichera :

Un nouvel onglet “Prestamint” dans le menu latéral.
Un sous-onglet “Commentaires CMS” avec une icône 💬 comment.
Une page affichant le texte “Mon contenu”.

Ce système vous permet de créer vos propres pages d’administration pour vos modules, interfaces internes, ou tableaux de bord personnalisés.

Conclusion

Grâce à la classe Tab de PrestaShop, il est très simple d’ajouter de nouveaux onglets dans le back-office. Cette méthode est la base pour créer vos propres outils internes, pages de configuration ou tableaux de statistiques. En suivant ce tutoriel, vous disposez d’un exemple prêt à l’emploi pour créer un menu personnalisé “Prestamint” et un onglet “Commentaires CMS” fonctionnel dans votre interface d’administration.

Astuce : vous pouvez enrichir cette base pour afficher des listes d’éléments, des formulaires, ou même connecter une API externe directement depuis votre nouvel onglet.

Pour aller plus loin

🚀 Vous voulez aller plus loin techniquement ? Nos formations avancées PrestaShop vous donnent les clés pour développer des boutiques performantes.

Besoin d’un hébergement vraiment pensé pour PrestaShop ?

Nous travaillons avec 772424 — la référence française de l’hébergement e-commerce spécialisé, avec déjà +1200 boutiques PrestaShop accompagnées.

Besoin d'un expert ?

Bloqué à cette étape ? Faites appel à un expert certifié PrestaShop et avancez sereinement.