L'interface d'administration est le quotidien de vos equipes. Un admin bien personnalise fait gagner du temps, reduit les erreurs et ameliore la satisfaction des utilisateurs internes. Sylius propose un back-office complet et extensible. Dans ce guide, je vous montre comment le maitriser et le personnaliser pour qu'il s'adapte exactement a vos besoins.

Tour d'horizon du dashboard admin

L'admin Sylius est accessible via /admin. Il couvre toutes les operations e-commerce courantes :

• Dashboard : vue d'ensemble avec revenus, nouvelles commandes, clients recents et statistiques
• Catalogue : gestion des produits, variants, taxons (categories), attributs, options et associations
• Ventes : commandes, paiements, expeditions et factures
• Clients : comptes clients, groupes, historique des commandes par client
• Marketing : promotions catalogue, promotions panier et coupons
• Configuration : channels, pays, zones, devises, locales, methodes de paiement et d'expedition, taxes

Sylius 2.x a migre l'interface de Semantic UI vers Bootstrap 5 + Symfony UX, ce qui rend la personnalisation CSS beaucoup plus accessible pour les developpeurs familiers avec Bootstrap.

Personnaliser le menu lateral

Le menu admin est construit dynamiquement via un systeme d'evenements. Pour ajouter vos propres sections :

// src/Menu/AdminMenuListener.php
namespace App\Menu;

use Sylius\Bundle\UiBundle\Menu\Event\MenuBuilderEvent;

final class AdminMenuListener
{
    public function addCustomSection(MenuBuilderEvent $event): void
    {
        $menu = $event->getMenu();

        // Ajouter une section complete
        $customSection = $menu
            ->addChild('app_analytics')
            ->setLabel('Analytiques');

        $customSection
            ->addChild('app_analytics_dashboard', [
                'route' => 'app_admin_analytics_dashboard',
            ])
            ->setLabel('Tableau de bord')
            ->setLabelAttribute('icon', 'chart bar');

        $customSection
            ->addChild('app_analytics_reports', [
                'route' => 'app_admin_analytics_reports',
            ])
            ->setLabel('Rapports')
            ->setLabelAttribute('icon', 'file alternate');
    }
}

# config/services.yaml
services:
    App\Menu\AdminMenuListener:
        tags:
            - { name: kernel.event_listener, event: sylius.menu.admin.main, method: addCustomSection }

Vous pouvez aussi supprimer ou reordonner les sections existantes via le meme mecanisme :

// Supprimer une section
$menu->removeChild('marketing');

// Reordonner (en reajoutant apres suppression)
$sales = $menu->getChild('sales');
$menu->removeChild('sales');
$menu->addChild($sales);

Ajouter des pages admin personnalisees

Pour ajouter une page completement nouvelle dans l'admin :

1. Creer le controleur

// src/Controller/Admin/AnalyticsDashboardController.php
namespace App\Controller\Admin;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

#[Route('/admin/analytics', name: 'app_admin_analytics_dashboard')]
class AnalyticsDashboardController extends AbstractController
{
    public function __invoke(
        OrderRepositoryInterface $orderRepository,
    ): Response {
        $stats = [
            'todayRevenue' => $orderRepository->getTodayRevenue(),
            'weekOrders' => $orderRepository->getWeekOrderCount(),
            'topProducts' => $orderRepository->getTopProducts(10),
            'conversionRate' => $orderRepository->getConversionRate(),
        ];

        return $this->render('admin/analytics/dashboard.html.twig', [
            'stats' => $stats,
        ]);
    }
}

2. Creer le template

{# templates/admin/analytics/dashboard.html.twig #}
{% extends '@SyliusAdmin/layout.html.twig' %}

{% block title %}Analytiques | {{ parent() }}{% endblock %}

{% block content %}

    
Tableau de bord analytiques

    

        

            
{{ stats.todayRevenue|sylius_format_money('EUR') }}
            
Revenus aujourd'hui
        
        

            
{{ stats.weekOrders }}
            
Commandes cette semaine
        
        

            
{{ stats.conversionRate }}%
            
Taux de conversion
        
    

    
Produits les plus vendus
    
            {% for product in stats.topProducts %}
            
            {% endfor %}
        

        

            

                
Produit
                
Quantite vendue
                
Revenu
            
        
        

                
{{ product.name }}
                
{{ product.totalQuantity }}
                
{{ product.totalRevenue|sylius_format_money('EUR') }}
            
    

{% endblock %}

Personnaliser les grids (tableaux)

Les grids Sylius affichent les listes d'entites (produits, commandes, clients). Ils sont configurables en YAML :

# config/packages/sylius_grid.yaml
sylius_grid:
    grids:
        # Etendre le grid produit existant
        sylius_admin_product:
            fields:
                # Ajouter une colonne stock
                stock:
                    type: twig
                    label: Stock
                    options:
                        template: admin/grid/field/stock.html.twig
                    sortable: onHand
                # Ajouter une colonne vendeur (marketplace)
                vendor:
                    type: twig
                    label: Vendeur
                    options:
                        template: admin/grid/field/vendor.html.twig
            filters:
                # Ajouter un filtre par stock
                stock_status:
                    type: select
                    label: Statut stock
                    form_options:
                        choices:
                            En stock: in_stock
                            Rupture: out_of_stock
            actions:
                item:
                    # Ajouter un bouton d'action
                    duplicate:
                        type: default
                        label: Dupliquer
                        icon: copy
                        options:
                            link:
                                route: app_admin_product_duplicate
                                parameters:
                                    id: resource.id

Template de colonne custom

{# templates/admin/grid/field/stock.html.twig #}
{% set onHand = data.variants.first.onHand|default(0) %}
{% set onHold = data.variants.first.onHold|default(0) %}
{% set available = onHand - onHold %}

{% if available > 10 %}
    {{ available }} en stock
{% elseif available > 0 %}
    {{ available }} restant(s)
{% else %}
    Rupture
{% endif %}

Surcharger les templates admin

Sylius 2.x utilise le systeme de Twig Hooks pour les points d'extension. Vous pouvez injecter du contenu a des emplacements predefinies sans surcharger le template entier :

# config/packages/twig_hooks.yaml
sylius_twig_hooks:
    hooks:
        'sylius_admin.product.show.content':
            custom_info:
                template: 'admin/product/custom_info_block.html.twig'
                priority: 50

        'sylius_admin.layout.topbar':
            environment_badge:
                template: 'admin/layout/environment_badge.html.twig'
                priority: 100

{# templates/admin/layout/environment_badge.html.twig #}
{% if app.environment == 'staging' %}

    ENVIRONNEMENT DE STAGING - Les donnees ne sont pas reelles

{% endif %}

Si vous devez surcharger un template entier, placez-le dans templates/bundles/SyliusAdminBundle/ en respectant le meme chemin que l'original.

Permissions et controle d'acces

Sylius Open Source offre deux roles : ROLE_ADMINISTRATION_ACCESS et les roles personnalises via Symfony. Pour un RBAC granulaire :

// src/Security/Voter/AdminSectionVoter.php
namespace App\Security\Voter;

use Symfony\Component\Security\Core\Authorization\Voter\Voter;

final class AdminSectionVoter extends Voter
{
    private const SECTIONS = [
        'catalog' => 'ROLE_ADMIN_CATALOG',
        'sales' => 'ROLE_ADMIN_SALES',
        'customers' => 'ROLE_ADMIN_CUSTOMERS',
        'marketing' => 'ROLE_ADMIN_MARKETING',
        'configuration' => 'ROLE_ADMIN_CONFIGURATION',
    ];

    protected function supports(string $attribute, mixed $subject): bool
    {
        return str_starts_with($attribute, 'ADMIN_SECTION_');
    }

    protected function voteOnAttribute(string $attribute, mixed $subject, TokenInterface $token): bool
    {
        $user = $token->getUser();
        if (!$user instanceof AdminUser) {
            return false;
        }

        $section = strtolower(str_replace('ADMIN_SECTION_', '', $attribute));
        $requiredRole = self::SECTIONS[$section] ?? null;

        if (null === $requiredRole) {
            return false;
        }

        return in_array($requiredRole, $user->getRoles(), true)
            || in_array('ROLE_SUPER_ADMIN', $user->getRoles(), true);
    }
}

Masquer les sections non autorisees dans le menu

// Dans le MenuListener, verifier les permissions
public function filterMenuByPermissions(MenuBuilderEvent $event): void
{
    $menu = $event->getMenu();

    if (!$this->security->isGranted('ADMIN_SECTION_MARKETING')) {
        $menu->removeChild('marketing');
    }

    if (!$this->security->isGranted('ADMIN_SECTION_CONFIGURATION')) {
        $menu->removeChild('configuration');
    }
}

Personnaliser le dashboard

Le dashboard par defaut de Sylius affiche les statistiques de vente et les commandes recentes. Vous pouvez le remplacer completement ou ajouter des widgets :

{# templates/bundles/SyliusAdminBundle/Dashboard/index.html.twig #}
{% extends '@SyliusAdmin/layout.html.twig' %}

{% block content %}

    

        {# Graphique de revenus - chart.js via Symfony UX #}
        {{ render_chart(revenueChart) }}

        {# Dernieres commandes #}
        {% include 'admin/dashboard/_recent_orders.html.twig' %}
    
    

        {# KPI du jour #}
        {% include 'admin/dashboard/_kpi_cards.html.twig' %}

        {# Alertes stock faible #}
        {% include 'admin/dashboard/_low_stock_alerts.html.twig' %}

        {# Taches en attente #}
        {% include 'admin/dashboard/_pending_tasks.html.twig' %}
    

{% endblock %}

Points d'extension courants

Voici les personnalisations les plus demandees par mes clients et comment les implementer :

• Export CSV/Excel : ajoutez un bouton d'export dans les grids via une action custom qui utilise PhpSpreadsheet
• Bulk actions : selection multiple dans les grids pour supprimer, activer/desactiver ou deplacer en masse
• Notes internes : ajoutez un systeme de notes sur les commandes et les clients, visible uniquement par l'equipe
• Historique des modifications : loggez chaque modification via le DoctrineExtensions Loggable ou un EventSubscriber custom
• Notifications admin : alertes en temps reel dans le header (nouvelle commande, stock bas, message client)

Conclusion

L'admin Sylius est concu pour etre etendu. Que vous ayez besoin d'ajouter une section complete, de modifier un grid ou de restreindre les acces, les mecanismes sont en place. La cle est de toujours utiliser les points d'extension officiels (evenements, hooks Twig, YAML grids) plutot que de surcharger brutalement les templates - cela garantit la compatibilite lors des mises a jour.

Besoin d'un back-office Sylius sur mesure ? Contactez-moi pour discuter de vos besoins. Je peux aussi former votre equipe a l'utilisation et la personnalisation de l'admin. Consultez nos services et nos tarifs.