INFRASSTUDIO Infrasstudio est un module externe Dolibarr fournissant une seconde surcouche UX moderne au module Website natif de Dolibarr. L'objectif: permettre à un utilisateur non technique d'éditer le contenu d'un site géré par Dolibarr Website (textes, images, données dynamiques Dolibarr) sans connaître HTML ni la console d'administration Dolibarr. Infrasstudio 📚 InfraSStudio — Le wiki Le manuel complet du module InfraSStudio. Ce wiki est organisé comme un livre : six parties, qui vont de la présentation générale jusqu'aux références techniques détaillées et aux procédures pas à pas. 🎯 Vous éditez le contenu de votre site ? Lisez la Partie I (pour comprendre l'outil) puis sautez à la Partie III (l'utilisation au quotidien). 🛠️ Vous installez le module sur une instance Dolibarr ? Lisez la Partie II puis la Partie V . 👨‍💻 Vous intégrez un nouveau site ou personnalisez un template ? Tout y passe, mais commencez par la Partie IV après les fondamentaux. 📖 Table des matières Partie I — Comprendre InfraSStudio Qu'est-ce qu'InfraSStudio ? À qui s'adresse le module La philosophie : séparer contenu et design InfraSStudio dans l'écosystème Dolibarr Partie II — Démarrer Prérequis et compatibilité Installation du module Activer un site managé Vérifier l'installation avec la page Diagnostic Partie III — Pour l'utilisateur final Tour de l'interface Studio Éditer les textes (slots) Gérer les images et la bibliothèque média Brouillon, publication et versions Travailler en plusieurs langues Gérer les articles de blog Catalogue produit dynamique SEO, sitemap et partage social Partie IV — Pour le développeur intégrateur Préparer un site Dolibarr Website Annoter un template avec des slots La grammaire des slots en détail Insérer des données Dolibarr (shortcodes) Gérer le multilingue (pages sœurs) Créer ses propres gabarits de page Le catalogue produit dynamique en profondeur Partie V — Administration et maintenance Permissions et rôles utilisateur Configuration avancée (constantes) Diagnostic et dépannage Mettre à jour le module Partie VI — Référence Référence des constantes Référence des shortcodes Référence des hooks et triggers Référence SQL : tables et colonnes Référence des scripts CLI Partie VII — Annexes Glossaire Foire aux questions Historique des versions Crédits et licence 🧭 Conventions de lecture ℹ️ Information — Une mise en contexte ou un complément utile à la compréhension. 💡 Astuce — Un raccourci, une bonne pratique optionnelle, un gain de temps. ⚠️ Attention — Une action irréversible ou un piège fréquent. ✅ Bonne pratique — Une recommandation validée par l'expérience. Partie I — Comprendre InfraSStudio CHAPITRE 1 — Qu'est-ce qu'InfraSStudio ? Définition InfraSStudio est un module d'édition de contenu pour Dolibarr. Il s'installe par-dessus le module Website natif de Dolibarr et permet aux utilisateurs non techniques de modifier les textes, les images et les données affichées sur leur site web public, sans manipuler de code HTML ni de base de données. Le module est conçu pour s'intégrer dans le quotidien d'une équipe : le développeur livre la structure d'un site, l'éditeur en remplit les contenus, et chacun reste dans son rôle. Le besoin auquel il répond Dolibarr propose depuis plusieurs versions un module Website complet, capable de gérer des pages, des langues, des images et des virtualhosts. Toutefois, l'édition d'une page passe par la modification directe du HTML stocké en base. Pour un développeur, cette opération est triviale ; pour la personne chargée de rédiger des contenus marketing, d'actualiser des fiches ou d'ajuster une page de contact, elle constitue un obstacle. Sans outil intermédiaire, le scénario qui se reproduit régulièrement est le suivant : Le développeur livre un site abouti. Plusieurs mois plus tard, un changement mineur est demandé par le client. Le client ouvre l'éditeur de Dolibarr, voit du HTML, hésite à modifier. Une demande est envoyée par e-mail au développeur. La modification, qui prend quelques minutes, est appliquée plusieurs jours plus tard, après deux ou trois échanges. InfraSStudio interrompt ce cycle. Le développeur conserve la responsabilité du HTML, mais y insère des balises invisibles aux endroits qui doivent rester modifiables. Lorsque l'éditeur ouvre l'interface du module, il voit non plus du code, mais des champs de formulaire correspondant exactement aux zones éditables. Il modifie, il enregistre, le site est à jour. Le principe de fonctionnement L'unité de base du module est le slot . Un slot est un emplacement nommé dans une page, déclaré par le développeur dans le HTML, qui correspond à une zone éditable. Chaque slot possède un type (texte court, texte riche, image, lien, couleur, etc.) et, si nécessaire, une valeur par défaut.

Bienvenue sur notre site

{{slot:hero_title|type=text|default=Bienvenue sur notre site}}

Le HTML reste lisible pour le développeur. Lorsqu'un visiteur consulte la page publique, le module substitue le slot par sa valeur courante avant l'envoi au navigateur. Dans l'interface du module, l'éditeur ne voit pas le HTML mais un champ de saisie nommé « Hero Title » avec un bouton de validation. Ce que le module n'est pas Pour situer correctement InfraSStudio, il est utile de préciser ce qu'il ne cherche pas à être : Ce n'est pas Pourquoi Un éditeur visuel par blocs (de type Elementor, Divi, WordPress Gutenberg) La structure des pages reste codée par le développeur. L'éditeur remplit les emplacements prévus, sans réorganiser la mise en page. Un thème prêt à l'emploi Le module ne fournit pas de composants visuels, mais une couche d'édition pour le HTML que vous écrivez. Un système de gestion de contenu autonome Le module dépend de Dolibarr et du module Website. Il fonctionne comme une surcouche, non comme un remplacement. Ce que le module apporte Fonctionnalités Avantages Un éditeur de slots Détecte automatiquement les zones éditables dans le HTML et génère l'interface de saisie correspondante. Une bibliothèque de médias centralisée Gère les images, vidéos et documents partagés entre les pages. Un système de traduction local Aligné sur les langues prises en charge par Dolibarr. Un éditeur de fiches produit Transforme le catalogue Dolibarr en pages web dynamiques. Une gestion de blog Repose sur les pages standard du module Website, sans table dédiée. Un mécanisme de brouillons et de publication Prépare plusieurs modifications avant de les rendre visibles. Des outils de référencement intégrés Offrent un aperçu des résultats Google ainsi que la génération de sitemap et de balises hreflang multilingues. La promesse du module Le développeur conserve le contrôle du HTML. L'éditeur conserve le contrôle du contenu. Chacun travaille dans son périmètre, sans empiéter sur celui de l'autre. CHAPITRE 2 — À qui s'adresse le module InfraSStudio s'adresse à trois publics qui collaborent autour d'un même site web. Identifier votre rôle vous aidera à repérer les sections de cette documentation qui vous concernent en priorité. Le rédacteur ou utilisateur final Vous êtes en charge de la rédaction ou de la mise à jour des contenus publiés sur votre site. Conseil — Votre lecture prioritaire est la Partie III. Commencez par le Chapitre 9 pour le tour de l'interface, puis le Chapitre 10 pour vos premières modifications. Vos attentes Modifier rapidement un texte ou une image, sans craindre d'altérer la mise en page. Visualiser immédiatement le résultat de vos modifications. Travailler sans dépendance technique : ne pas avoir à solliciter un développeur pour chaque ajustement. Gérer les versions linguistiques sans dupliquer les pages. Préparer plusieurs modifications avant publication, et tout publier en une fois. Ce que le module vous apporte Fonctionnalité Avantages Interface en trois colonnes Liste des pages, aperçu en direct et formulaires d'édition rassemblés dans un seul écran. Édition au clic Cliquer sur un texte de l'aperçu ouvre directement le formulaire correspondant. Bibliothèque média partagée Réutilisation des images d'une page à l'autre sans téléchargement répété. Mécanisme de publication Les modifications restent privées tant qu'elles ne sont pas explicitement publiées. Onglets de langue Bascule rapide entre les versions linguistiques, avec drapeaux comme repères visuels. Le développeur intégrateur Vous êtes en charge de la conception ou de l'évolution technique d'un site Dolibarr Website. Conseil — Votre lecture prioritaire est la Partie IV pour les aspects pratiques, complétée par la Partie VI en référence. Vos attentes Conserver la maîtrise complète du HTML, du CSS et de la structure des pages. Permettre à votre client d'éditer ses contenus sans solliciter votre intervention. Réutiliser une même structure pour des pages similaires. Afficher des données Dolibarr (produits, catégories, informations société) sans dupliquer ces informations. Livrer un site dont la maintenance courante ne vous incombe pas. Ce que le module vous apporte Outil Usage Système de slots Rendre éditable n'importe quelle balise HTML par l'ajout d'un token {{slot:nom|type=...}} . Shortcodes Insérer des données Dolibarr en direct : {{product:ref=xxx.label}} , {{mysoc.name}} , etc. Catalogue de gabarits Modèles de page réutilisables (page libre, article, landing produit) que vos clients peuvent instancier. Génération automatique de pages produit Un seul template pour N produits Dolibarr ; le module génère automatiquement les pages publiques. Outils en ligne de commande Scripts pour le rescan des slots, la génération de sitemap, les migrations, intégrables dans des pipelines. L'administrateur Dolibarr Vous êtes en charge de l'instance Dolibarr : installation, mises à jour, permissions, sauvegardes. Conseil — Votre lecture prioritaire est la Partie II pour la mise en service, puis la Partie V pour la maintenance. Vos attentes Installer le module sans surprise et de manière reproductible. Vérifier que l'intégration est complète : versions compatibles, tables créées, hooks en place, tâches planifiées actives. Distribuer les permissions selon les rôles de chacun. Disposer de points de vérification clairs en cas de problème. Maîtriser les mises à jour sans interruption du site public. Ce que le module vous apporte Outil Usage Module Dolibarr standard Installation par la procédure classique des modules externes Dolibarr. Page Diagnostic Vérification automatisée de tous les points d'intégration : versions, extensions PHP, tables, hooks, tâches planifiées, état des sites. Permissions granulaires Sept permissions distinctes pour adapter l'accès à chaque rôle. Mécanismes de portabilité Constantes de configuration permettant l'adaptation à différents types d'hébergement. Historique des versions Changelog au format XML standard Dolibarr, consultable depuis l'administration. Le cas des équipes réduites Sur de nombreuses installations, une seule personne porte plusieurs rôles. C'est typiquement le cas du consultant indépendant qui livre un site à un petit commerce, de l'agence où le développeur senior assure aussi l'administration, ou du dirigeant d'une jeune entreprise qui édite lui-même son site avant de pouvoir déléguer. Recommandé — Si vous combinez plusieurs rôles, lisez la documentation dans l'ordre des parties. Le ton et le niveau technique évoluent progressivement, du général vers le spécifique. CHAPITRE 3 — Le principe de séparation entre contenu et design Une analogie pour comprendre Le rapport entre développeur et éditeur peut être comparé à celui qui unit un architecte et l'occupant d'un appartement. Rôle Responsabilité L'architecte Conçoit les murs, les ouvertures, les volumes, les circulations. Une fois le chantier livré, sa mission est terminée. L'occupant Choisit la peinture, le mobilier, l'agencement. Vit dans le logement et l'adapte à ses besoins, dans le respect des volumes existants. InfraSStudio applique le même découpage à votre site. Le développeur conçoit la structure et la livre. L'éditeur en remplit les contenus, sans toucher aux volumes. Cette discipline est la condition pour qu'un site reste maintenable et cohérent dans la durée. L'approche fondamentale du module se résume à un principe simple : Le design relève de la responsabilité du développeur. Le contenu relève de celle de l'éditeur. Les deux périmètres ne se superposent jamais. Cette séparation détermine l'architecture du module, le fonctionnement de l'éditeur, le découpage des permissions et même les fonctionnalités qui ne sont volontairement pas implémentées. Pourquoi cette séparation est essentielle Dans la majorité des outils de gestion de contenu, les frontières entre contenu et structure finissent par s'estomper. Le rédacteur a accès au HTML, au CSS, à la mise en page. À l'usage, il modifie sans s'en rendre compte des éléments structurels — parce que les outils l'autorisent à toucher à ce qui ne devrait pas l'être. InfraSStudio adopte la position inverse : la structure est verrouillée et seules les zones explicitement marquées comme éditables par le développeur sont accessibles à l'éditeur. Bénéfices observés L'éditeur ne peut pas altérer la mise en page Il modifie uniquement les zones identifiées comme slots. Les conteneurs, les classes CSS et l'ordre des sections lui sont totalement inaccessibles. Le design peut évoluer indépendamment du contenu Une refonte ne casse pas les contenus existants. Les valeurs des slots sont conservées et viennent simplement remplir la nouvelle structure. La maintenance reste compréhensible dans la durée Plusieurs mois après la livraison, un autre développeur peut reprendre le code et identifier sans ambiguïté ce qui est éditable et ce qui ne l'est pas. Les mécanismes qui matérialisent cette séparation La séparation n'est pas une simple convention, elle est inscrite à plusieurs niveaux dans le fonctionnement technique du module. Le HTML reste sous le contrôle du développeur Le HTML d'une page Dolibarr Website est stocké dans deux emplacements synchronisés : la base de données et un fichier .tpl.php sur le disque. Le module ne propose à aucun moment d'éditer ce HTML. Il n'existe pas de bouton « voir le code source », pas d'éditeur de texte brut, pas d'option dissimulée. L'éditeur n'a accès qu'aux zones marquées comme slots, le reste lui demeure transparent. Les slots sont détectés automatiquement Lorsque le développeur ajoute un slot dans un template, aucune autre opération n'est nécessaire. Le module dispose d'un scanner qui parcourt les fichiers .tpl.php du site, détecte les tokens {{slot:...}} , les enregistre dans la table dédiée et génère l'interface d'édition correspondante.

{{slot:section_title|type=text|default=Nos services|label=Titre de la section}}

Au prochain rescan, manuel ou automatique, le slot apparaît dans le panneau d'édition. Aucune configuration intermédiaire n'est requise. Le rendu public est transparent Lorsqu'un visiteur consulte une page publique, le navigateur ne voit jamais de slot. Le module intercepte le HTML avant son envoi, remplace chaque token {{slot:...}} par sa valeur courante et transmet au visiteur un document HTML standard. Cette substitution intervient au moment du rendu, jamais au moment de l'édition. Le fichier .tpl.php conserve toujours les tokens originaux, ce qui présente plusieurs avantages : Le développeur peut consulter et modifier le template sans craindre une pollution par les modifications de l'éditeur. Si vous purgez la table des slots, le site affichera simplement les valeurs par défaut, sans cesser de fonctionner. L'export du code d'un site et l'export de son contenu sont deux opérations distinctes, ce qui simplifie les migrations. Les permissions traduisent la séparation Le module définit sept permissions Dolibarr distinctes, qui permettent d'adapter précisément l'accès aux différents rôles : Permission Destinataire type paramMenu Tout utilisateur autorisé à voir le menu du module readContent Lecteur seul, par exemple un commercial qui consulte le site avant un rendez-vous editContent Rédacteur autorisé à modifier les slots de texte editTranslations Traducteur intervenant sur les versions linguistiques editMedias Gestionnaire des médias, autorisé à téléverser et remplacer des images publish Responsable de la publication finale des contenus admin Administrateur du module : configuration, sites gérés, gabarits En pratique, un rédacteur reçoit en général readContent et editContent . Un traducteur reçoit editTranslations . L'intégrateur conserve admin . Aucune permission n'est attribuée au-delà du strict nécessaire. Ce qui n'est volontairement pas proposé Pour rester fidèle à ce principe, certaines fonctionnalités ne sont pas implémentées. Ce choix est délibéré. Pas d'éditeur visuel par blocs Il n'est pas possible de déposer des blocs à la souris pour composer une page. La structure reste codée par le développeur. Si une nouvelle section est nécessaire, deux options se présentent : utiliser un slot de type richtext , qui autorise une mise en forme limitée à l'intérieur d'une zone existante, ou demander au développeur d'ajouter un nouvel emplacement dans le template. Pourquoi — Les éditeurs visuels par blocs produisent fréquemment des pages incohérentes lorsque l'utilisateur n'est pas formé à la mise en page. La structure verrouillée garantit la cohérence visuelle dans la durée. Pas d'édition HTML brute Même un éditeur expérimenté ne dispose pas d'un mode permettant de modifier le HTML directement. Les slots de type richtext proposent un éditeur visuel avec mise en forme (gras, italique, listes, liens, sous-titres) mais aucun bouton « source ». Pourquoi — L'édition de HTML brut est la première source d'erreurs de mise en forme. Si une présentation spécifique est nécessaire, elle relève du CSS, et donc du développeur, non du contenu. Pas de gestion de menus côté éditeur Les menus de navigation (en-tête, pied de page) sont des pages Dolibarr Website particulières. Elles peuvent comporter des slots pour les libellés, le logo ou les liens sociaux, mais l'ordre des éléments et la structure restent codés dans le HTML. Pourquoi — La navigation est un élément structurel du site, non un contenu éditorial. Sa modification doit être un acte délibéré du développeur, non un effet de bord d'une manipulation par l'éditeur. Pas de logique conditionnelle dans les slots Les slots ne portent aucune logique métier. Il n'est pas possible de définir une règle du type « afficher ce texte uniquement si l'utilisateur est connecté ». Les slots sont strictement des conteneurs de contenu. Pourquoi — La logique relève du PHP, donc du développeur. Mêler logique et contenu rend les sites difficiles à maintenir au-delà de quelques années. CHAPITRE 4 — InfraSStudio dans l'écosystème Dolibarr Pour utiliser le module efficacement, il est utile de comprendre son positionnement par rapport à Dolibarr et au module Website natif. Ce chapitre présente la répartition des rôles, les dépendances et les limites de la responsabilité du module. Une analogie pour introduire L'écosystème Dolibarr et ses extensions peuvent être comparés à un musée et sa galerie d'exposition. Composant Rôle Dolibarr ERP Le musée. Il abrite les collections (produits, tiers, médias), les notices (libellés multilingues) et les registres (ventes, factures). Module Website La galerie d'exposition. Elle définit l'espace et l'éclairage où les œuvres choisies sont présentées au public. InfraSStudio Le commissaire d'exposition. Il choisit la mise en valeur des œuvres existantes, sans intervenir sur les œuvres elles-mêmes. Il rédige les notices et organise les parcours. Lorsqu'une nouvelle œuvre rejoint les collections du musée, elle est automatiquement présentée dans la galerie selon la mise en page prévue. C'est le rôle du catalogue produit dynamique , présenté en détail au Chapitre 15. Une architecture en trois couches Le module fonctionne dans un système composé de trois couches superposées, chacune avec un rôle précis. Couche Rôle InfraSStudio Édition des slots et des médias, gestion des traductions, catalogue produit dynamique, fonctionnalités de blog, outils de référencement. Module Website (natif Dolibarr) Stockage des pages, génération des fichiers Apache, gestion des virtualhosts, support multicompany. Dolibarr ERP Tiers, produits, factures, utilisateurs, permissions, traductions, base de données, médias. Chaque couche s'appuie sur celle qui se trouve en dessous, sans la remplacer ni la dupliquer. Dolibarr ERP, la couche fondamentale Dolibarr ERP constitue le socle. Il fournit l'ensemble des services dont les couches supérieures ont besoin : Une base de données structurée (environ 300 tables préfixées llx_ ). Un système d'utilisateurs avec gestion fine des permissions. Une gestion multicompany permettant à plusieurs entités juridiques de cohabiter sur la même installation. Un système de constantes pour le stockage des configurations. Des classes métier réutilisables : Product , Societe , Contact , User , CMailFile , Translate , etc. Un système de traductions par fichiers .lang . Des mécanismes d'extension par hooks et triggers. Recommandé — Le module s'appuie systématiquement sur les classes natives de Dolibarr lorsque c'est possible. Cette approche garantit la cohérence avec le reste de l'instance et limite les divergences en cas de mise à jour de Dolibarr. Le module Website, la couche d'hébergement Le module Website est livré nativement avec Dolibarr. Pour chaque site qu'il prend en charge, il assure les fonctions suivantes : Création d'une entrée dans la table llx_website contenant la référence, le virtualhost et les langues. Stockage des pages dans la table llx_website_page avec leur contenu HTML. Génération d'un fichier page.tpl.php sur le disque. Création des wrappers Apache .php qui redirigent vers le bon template. Prise en charge du multilingue via le mécanisme de pages sœurs. Important — Le module Website est l'hôte d'InfraSStudio. Sans lui, le module n'a rien à éditer. La dépendance est inscrite dans le descripteur : InfraSStudio refuse de s'activer si le module Website ne l'est pas. Le module InfraSStudio, la couche d'édition InfraSStudio ajoute par-dessus le module Website l'ensemble des fonctionnalités nécessaires à un usage par des utilisateurs non techniques : Le scanner de slots qui détecte automatiquement les zones éditables. L'éditeur en trois colonnes accessible depuis l'interface Dolibarr. La bibliothèque de médias mutualisée. Le système de traductions, synchronisé avec les fichiers .lang de Dolibarr. Le catalogue produit dynamique, qui transforme la table llx_product en pages publiques. Le mécanisme de brouillons et de publication. La génération automatique du sitemap et des balises hreflang. Le système de gabarits permettant aux éditeurs de créer leurs propres pages. Note — Ce qu'InfraSStudio ne fait pas Il ne sert pas les pages publiques. Cette fonction est assurée par Apache et le module Website. Il ne stocke pas les pages elles-mêmes, qui restent dans llx_website_page et leurs templates correspondants. Il ne gère pas les utilisateurs ni les permissions globales : ce sont les utilisateurs Dolibarr qui sont autorisés via les permissions du module. Le déroulement d'une requête publique Pour clarifier le rôle de chaque couche, suivons le parcours d'une requête HTTP de bout en bout : Le visiteur demande une URL, par exemple https://exemple.com/page1.php . Apache reçoit la requête. Le virtualhost pointe vers le docroot du site. Le wrapper page1.php , généré par le module Website, inclut le fichier master.inc.php local et amorce Dolibarr. Le wrapper inclut ensuite le fichier page.tpl.php correspondant. Le template produit le HTML, contenant encore les tokens {{slot:...}} et {{shortcode:...}} . InfraSStudio intercepte le HTML via le hook completeHtmlOutput et résout chaque token : valeurs courantes des slots filtrées par la locale du visiteur, données Dolibarr lues en direct. Apache transmet au navigateur le HTML final, dépourvu de tout token. Résultat — Du point de vue du navigateur, la page est un document HTML standard. Aucun token n'est visible et aucun traitement JavaScript spécifique n'est nécessaire. L'emplacement des données Pour comprendre le module en profondeur, le tableau ci-dessous récapitule où chaque type de donnée est stocké. Donnée Emplacement HTML d'une page (avec tokens) Disque ( page.tpl.php ) et base ( llx_website_page.content ) Métadonnées de page (titre SEO, description) llx_website_page.title , description , keywords , image Valeurs des slots llx_infrasstudio_slot Brouillons en attente de publication llx_infrasstudio_slot.value_draft Médias téléversés DOL_DATA_ROOT//medias/// Métadonnées des médias llx_infrasstudio_media Texte alternatif par locale llx_infrasstudio_media_alt Traductions natives produit llx_product (FR) et llx_product_lang (autres locales) Traductions des extrafields produit llx_product_extrafields et llx_infrasstudio_product_translation Historique des modifications llx_infrasstudio_revision Configuration du module llx_const (constantes préfixées INFRASSTUDIO_ ) Ce qui reste géré dans Dolibarr lui-même Le module ne remplace aucun module Dolibarr existant. Les opérations suivantes continuent à se faire dans Dolibarr : L'édition d'une fiche produit (libellé, prix, catégories, photos rattachées) reste l'usage standard de la fiche produit Dolibarr. Le module InfraSStudio n'édite que les extrafields traduisibles et leurs versions linguistiques, qui se synchronisent automatiquement avec la fiche native. La gestion des tiers, des contacts, des devis et des factures s'effectue via les modules natifs Dolibarr. L'administration des utilisateurs et des permissions reste dans l'interface d'administration Dolibarr. La création d'un nouveau site Website (référence, virtualhost, langues principales) se fait dans l'administration du module Website. InfraSStudio prend ensuite le relais pour l'édition du contenu. La sauvegarde de la base et des fichiers suit la procédure standard de Dolibarr. Recommandé — Le module ne crée aucun outil parallèle pour ces fonctions. Il s'appuie sur l'existant, ce qui simplifie la formation et limite la duplication d'information. Partie II — Démarrer Chapitre 5 — Prérequis et compatibilité Avant l'installation du module, il convient de vérifier que votre environnement répond aux conditions techniques requises. Cette page liste l'ensemble des prérequis. Aucun n'est facultatif . Côté Dolibarr Élément Exigence Version Dolibarr 18.0.0 minimum, 24.x.x maximum Module Website Activé. Cette dépendance est obligatoire ; sans elle, l'installation du module échoue. Au moins un site Website Créé avec une référence et un virtualhost Module Categories Recommandé. Utile pour la catégorisation des contenus. Conseil — La version de votre Dolibarr est consultable depuis Accueil → À propos. La liste des modules activés est disponible dans Configuration → Modules. Côté serveur (PHP et système) Élément Exigence Version PHP 7.4 minimum, 8.4 maximum Extensions PHP mbstring , json , pdo_mysql , gd , fileinfo Base de données MySQL 5.7 ou supérieur, ou MariaDB 10.3 ou supérieur Serveur web Apache (recommandé) ; nginx pris en charge avec une configuration dédiée Espace disque Environ 50 Mo pour le module, en plus de l'espace nécessaire à vos médias Permissions du système de fichiers PHP doit pouvoir écrire dans DOL_DATA_ROOT ainsi que dans le docroot des sites Note — Tous ces prérequis sont contrôlés automatiquement par la page Diagnostic du module après installation. En cas de doute, procédez à l'installation et laissez le diagnostic identifier les manquements éventuels. Vérification rapide en ligne de commande Si vous disposez d'un accès SSH au serveur, les commandes suivantes vous permettent de contrôler l'environnement en quelques instants : # Version PHP php -v # Extensions PHP installées php -m | grep -iE "mbstring|json|pdo_mysql|gd|fileinfo" # Version de Dolibarr grep "version =" /var/www/dolibarr/htdocs/filefunc.inc.php # Espace disque disponible df -h /var/www/ Liste de contrôle avant installation Avant de passer au chapitre suivant, assurez-vous des points suivants : Votre installation Dolibarr est en version 18.x à 24.x. Le module Website est activé. Au moins un site Website est créé, avec une référence et un virtualhost configurés. Vous disposez des droits d'administrateur sur Dolibarr. Vous avez à votre disposition l'archive du module ou un accès au répertoire htdocs/custom/ . Avertissement — Sur une instance de production, il est impératif d'effectuer une sauvegarde complète (base de données et fichiers) avant l'installation. C'est l'occasion idéale de tester votre procédure de restauration. Chapitre 6 — Installation du module Trois méthodes d'installation sont possibles. Choisissez celle qui correspond à votre environnement de travail. Les trois aboutissent au même résultat. Méthode 1 — Via l'interface Dolibarr (recommandée) C'est la méthode la plus simple. Elle ne nécessite pas d'accès SSH et fonctionne dès lors que la constante MAIN_DISALLOW_INSTALL_EXTERNAL_MODULES n'est pas activée sur votre instance. Procédure Connectez-vous à Dolibarr en tant qu'administrateur. Rendez-vous dans Accueil → Configuration → Modules. Cliquez sur le bouton « Déployer / installer un module externe » en haut de la page. Cliquez sur « Choisir un fichier » et sélectionnez l'archive module_infrasstudio-X.Y.Z.zip . Cliquez sur « Envoyer le fichier » . Patientez quelques secondes pendant la décompression de l'archive. Un message confirme la réussite de l'installation et vous invite à activer le module. Conseil — L'archive doit être nommée module_infrasstudio-X.Y.Z.zip , où X.Y.Z correspond au numéro de version. Ce nom est utilisé par Dolibarr pour identifier le module. Méthode 2 — Manuelle (SSH ou FTP) Cette méthode est adaptée si vous disposez d'un accès au serveur ou si vous travaillez dans un environnement local. Procédure Décompressez l'archive module_infrasstudio-X.Y.Z.zip sur votre poste de travail. Vous obtenez un dossier nommé infrasstudio/ . Copiez ce dossier dans /htdocs/custom/ sur votre serveur, par SCP ou FTP. Vérifiez les permissions : le dossier doit être accessible en lecture par l'utilisateur sous lequel tourne PHP, généralement www-data . # Exemple complet en SSH cd /var/www/dolibarr/htdocs/custom/ unzip /tmp/module_infrasstudio-1.9.0.zip chown -R www-data:www-data infrasstudio/ Méthode 3 — Via Git (pour les développeurs) Cette méthode est appropriée si vous souhaitez suivre les évolutions du module au fil des versions. cd /var/www/dolibarr/htdocs/custom/ git clone https://github.com/infras/infrasstudio.git cd infrasstudio git checkout v1.9.0 # ou la version souhaitée Avertissement — En production, ne pointez jamais sur la branche main . Utilisez toujours un tag de version stable. Activer le module dans Dolibarr Une fois le dossier en place, l'activation s'effectue depuis l'interface : Rendez-vous dans Accueil → Configuration → Modules. Recherchez « InfraSStudio » dans le filtre. La carte du module apparaît : « InfraSStudio — surcouche d'édition Website ». Cliquez sur l'interrupteur d'activation à droite de la carte. Patientez. Dolibarr exécute alors plusieurs opérations en tâche de fond : création des cinq tables SQL, enregistrement des sept permissions, installation des hooks ( main , login , websitepage , websitenav ), déclaration des tâches planifiées, restauration des constantes éventuellement sauvegardées lors d'une désactivation antérieure. L'interrupteur passe au vert : le module est activé. Vérification rapide — Survolez le menu Outils en haut de Dolibarr. Une nouvelle entrée doit apparaître : InfraS → InfraSStudio. En cas d'échec de l'activation Voici les erreurs les plus fréquentes et leurs solutions : Message d'erreur Cause et solution « Module Website non activé » Activez le module Website dans Configuration → Modules, puis revenez activer InfraSStudio. « Version Dolibarr incompatible » Mettez Dolibarr à jour vers une version supportée. En dernier recours, définissez la constante INFRASSTUDIO_DISABLE_CHECK_VERSION_MIN=1 . « Erreur SQL CREATE TABLE » L'utilisateur SQL ne dispose pas du droit CREATE . Accordez-le, ou créez les tables manuellement à partir des fichiers sql/llx_infrasstudio_*.sql . « Permission denied » sur le système de fichiers Exécutez chown -R www-data:www-data htdocs/custom/infrasstudio/ côté serveur. Page blanche après activation Consultez le fichier htdocs/documents/dolibarr.log . La cause est presque toujours une extension PHP manquante. Vérification après installation Le module est correctement installé si : L'entrée InfraS → InfraSStudio apparaît dans le menu Outils. La carte du module dans Configuration → Modules est verte. Aucune erreur n'est consignée dans htdocs/documents/dolibarr.log . La page Configuration → InfraSStudio → Diagnostic est accessible . Au chapitre suivant, vous configurerez votre premier site géré par le module. Chapitre 7 — Activer un site managé Le module est installé mais ne gère encore aucun site. Cette étape consiste à lui indiquer quel site Dolibarr Website il doit prendre en charge. C'est cette opération qui établit la connexion entre le module et un site existant. Étape 1 — Disposer d'un site Website Avant de l'activer dans le module, le site doit déjà exister dans le module Website natif. Si ce n'est pas encore le cas : Rendez-vous dans Accueil → Sites web (menu du module Website). Cliquez sur « Nouveau site » . Renseignez les informations suivantes : Référence : un identifiant court sans espace, par exemple monsite . Description : optionnelle. Virtualhost : l'URL publique, par exemple https://monsite.com . Langue principale : par exemple fr_FR . Autres langues : optionnel, séparées par des virgules. Enregistrez. Note — Le module détecte automatiquement les sites créés dans Website. Aucune configuration parallèle n'est nécessaire. Étape 2 — Sélectionner le site dans la configuration Rendez-vous dans Outils → InfraS → InfraSStudio . Cliquez sur l'entrée Configuration dans le menu latéral du module. La page Paramètres de configuration s'affiche. Repérez la section « Sites Website gérés » . Vous y voyez la liste de tous les sites Dolibarr Website disponibles, accompagnés d'une case à cocher. Cochez le ou les sites que vous souhaitez éditer via InfraSStudio. Cliquez sur « Enregistrer » en bas de la page. Effet — Le site apparaît désormais sur le tableau de bord du Studio d'Infrasstudio. Vous pouvez commencer à l'éditer. Étape 3 — Réglages spécifiques par site Pour chaque site coché, deux réglages complémentaires apparaissent. Le mode de stockage des médias Vous choisissez l'emplacement physique où les images téléversées seront enregistrées : Mode Quand l'utiliser Avec le site (mode native) — recommandé Les fichiers sont servis directement par Apache via le lien symbolique /medias/ standard. Plus rapide, URL plus courte, accessible également depuis l'éditeur Dolibarr Website natif. Gerer par le module Infrasstudio Les fichiers sont servis via document.php?modulepart=infrasstudio . Utile uniquement lorsque le serveur Apache n'a pas accès au dossier /medias/ du site. La page d'index du blog Si votre site comporte une page « Blog » ou « Ressources » qui liste les articles publiés, vous pouvez la désigner ici. Conseil — Lorsque vous serez sur cette page dans l'éditeur, le bouton « + Nouveau » deviendra automatiquement « + Nouvel article ». C'est un raccourci ergonomique appréciable. Laissez ce paramètre sur « Aucune » si votre site ne dispose pas de blog. Étape 4 — Configuration du catalogue produit (optionnel) Cette section ne concerne que les sites disposant d'un catalogue produit dynamique, c'est-à-dire d'une page web générée automatiquement par produit Dolibarr publié. Le cas échéant, configurez : Constante Valeur INFRASSTUDIO_WEBSITE_KEY La référence du site cible (par exemple monsite ) INFRASSTUDIO_PUBLIC_DOCROOT Le chemin Apache absolu du site (par exemple /var/www/monsite ) Le bouton « Reconstruire maintenant » permet de générer immédiatement les wrappers solution-.php pour chaque produit publié. Note — Si vous ne savez pas si vous avez besoin de cette fonctionnalité, ignorez cette section. Le Chapitre 23 explique le catalogue dynamique en détail. Étape 5 — Réglages avancés En bas de la page Configuration, une section repliable « Réglages avancés » expose des constantes plus pointues. Pour une première installation, conservez les valeurs par défaut. Le Chapitre 25 documente chacun de ces paramètres. Liste de contrôle après activation Votre site est correctement activé si : Le tableau de bord Studio ( Outils → InfraSStudio ) affiche désormais une carte pour ce site. Le bouton « Éditer » de cette carte ouvre l'éditeur en trois colonnes. La colonne de gauche liste bien les pages de votre site. Cliquer sur une page déclenche son aperçu au centre. Au chapitre suivant, le diagnostic complet permet de valider l'intégration de bout en bout. Chapitre 8 — Vérifier l'installation avec la page Diagnostic Le module dispose d'une page dédiée qui passe en revue l'ensemble de l'intégration et indique, point par point, si tout est en ordre. C'est le premier réflexe à adopter après une installation, après une mise à jour ou en cas de comportement inattendu. Accéder à la page Diagnostic Rendez-vous dans Outils → InfraS → InfraSStudio . Cliquez sur l'onglet Diagnostic dans le menu latéral. La page se charge et exécute en direct une série de vérifications. Chaque ligne s'accompagne d'une pastille de couleur : Couleur Signification Vert Le point est correctement configuré. Aucune action n'est requise. Orange Avertissement non bloquant. Le module fonctionne mais une amélioration est possible. Rouge Anomalie bloquante. Une fonctionnalité importante ne fonctionne pas correctement. Bleu Information contextuelle, sans contrôle effectué. Section 1 — Environnement Cette section vérifie les versions de Dolibarr et de PHP, ainsi que la présence des extensions PHP requises. Contrôle Action en cas d'anomalie Version Dolibarr Mettez Dolibarr à jour (entre 18.0.0 et 24.x.x). Version PHP Demandez à votre hébergeur de basculer sur une version comprise entre 7.4 et 8.4. Extensions PHP Installez les extensions manquantes (par exemple apt install php-mbstring php-gd ). Module InfraSStudio activé Activez le module dans Configuration → Modules. Module Website (dépendance) Activez le module Website dans Configuration → Modules. Section 2 — Schéma SQL Cette section vérifie la présence des cinq tables du module dans la base de données : llx_infrasstudio_slot llx_infrasstudio_media llx_infrasstudio_media_alt llx_infrasstudio_revision llx_infrasstudio_product_translation Conseil — En cas de table manquante, désactivez puis réactivez le module dans Configuration → Modules. Le module recrée les tables absentes lors de la réactivation. Section 3 — Stockage Cette section vérifie que les dossiers d'écriture sont accessibles à PHP : DOL_DATA_ROOT : la racine des données Dolibarr. Dossier de données du module : créé au premier téléversement. Avertissement — Si un dossier n'est pas accessible en écriture, corrigez les permissions : chown -R www-data:www-data /var/www/dolibarr/htdocs/documents/ Section 4 — Intégration Dolibarr Cette section vérifie les hooks, le trigger et les tâches planifiées. Contrôle Description Hooks Quatre hooks sont attendus : main , login , websitepage , websitenav . Trigger PRODUCT et CATEGORY Le fichier InterfaceInfrasstudiotrigger doit être présent sur le disque. Tâches planifiées Au moins une tâche cron doit être déclarée pour le module. Section 5 — Sites gérés Pour chaque site activé, cette section contrôle : la résolution du docroot (cascade : per-site → DOCROOT_PATTERN → fallback) ; le bon fonctionnement du mode média (présence du lien symbolique en mode native) ; l'accessibilité en écriture du dossier data du site. « Aucun docroot résolu » — Définissez la constante INFRASSTUDIO_SITE__DOCROOT avec le chemin Apache absolu de ce site, ou utilisez le pattern INFRASSTUDIO_DOCROOT_PATTERN (par exemple /var/www/{ref} ). Section 6 — Catalogue produit dynamique (optionnel) Cette section n'apparaît que si vous avez configuré INFRASSTUDIO_WEBSITE_KEY ou INFRASSTUDIO_PUBLIC_DOCROOT . Elle vérifie que ces deux constantes pointent vers des cibles valides. Lecture du résultat global Tous les voyants au vert — Vous pouvez passer à la Partie III (utilisateur final) ou à la Partie IV (développeur), selon votre rôle. Quelques avertissements oranges — Le module fonctionne. Examinez les avertissements à tête reposée et décidez s'il convient de corriger immédiatement ou plus tard. Au moins un voyant rouge — Interrompez votre installation et corrigez l'anomalie. Une fonctionnalité importante est inopérante et son symptôme apparaîtra plus tard de manière inattendue. Quand relancer le diagnostic Après une installation initiale du module. Après chaque mise à jour. Après une migration de serveur ou un changement d'hébergement. Lorsqu'un comportement inattendu apparaît (slot non enregistré, médias absents, etc.). Avant la transmission du projet à un nouveau collègue ou à un client. Bonne pratique pour les équipes — Demandez à toute personne signalant un dysfonctionnement de joindre d'abord une capture d'écran de la page Diagnostic. La majorité des incidents trouvent leur explication dans une ligne orange ou rouge passée inaperçue. Partie III — Pour l'utilisateur final CHAPITRE 09 — Tour de l'interface Studio Ce chapitre constitue votre première visite guidée du Studio. Vous allez parcourir l'ensemble des écrans sans encore éditer quoi que ce soit. À la fin, vous saurez où chercher chaque élément et comment vous repérer. Note — Le module InfraSStudio doit être activé sur votre instance Dolibarr et au moins un site doit être configuré. Si ce n'est pas le cas, consultez d'abord la Partie II. Étape 1 — Accéder au Studio Connectez-vous à votre Dolibarr. Dans le menu supérieur, cliquez sur Outils . Dans le menu latéral qui apparaît, repérez la section InfraS . Cliquez sur InfraSStudio . Vous arrivez sur le tableau de bord du Studio. Conseil — Vous pouvez ajouter cette page à vos favoris dans votre navigateur. Vous y reviendrez fréquemment. Étape 2 — Comprendre le tableau de bord Le tableau de bord constitue votre point d'entrée. Il se divise en plusieurs zones, présentées de haut en bas. L'en-tête personnalisé Une salutation contextuelle (« Bonjour », « Bon après-midi », « Bonsoir » selon l'heure) est suivie de la date du jour. Cet élément constitue un simple repère visuel. Vos sites Une grille de cartes affiche un site géré par carte. Pour chacun, vous retrouvez : Le nom du site, par exemple monsite . Un lien direct vers le site public, accessible via une icône globe. Trois compteurs colorés : pages publiées, pages en brouillon et articles de blog. Trois boutons d'action : Éditer, Articles et Produits. Recommandé — Cliquez sur Éditer pour entrer dans l'éditeur principal. C'est cette voie que vous utiliserez la majorité de votre temps. Statistiques globales Quatre indicateurs sont présentés en permanence : nombre de produits publiés nombre de produits en brouillon nombre de médias dans la bibliothèque taille totale en mégaoctets. Actions rapides Cinq cartes cliquables conduisent directement aux opérations courantes : Nouvel article : créer un billet de blog en deux clics. Éditer une page : ouvrir l'éditeur unifié. Gérer les produits : accéder à la section produits dans l'éditeur. Traductions produits : ouvrir l'éditeur multilingue dédié aux fiches produit. Bibliothèque médias : accéder à la gestion centralisée des fichiers. Activité récente Une frise chronologique affiche les huit derniers contenus modifiés (slots et produits), avec un lien Ouvrir qui vous permet de reprendre votre travail là où vous l'aviez laissé. Aide à la prise en main Un panneau dépliable « Comment utiliser InfraSStudio ? » présente quatre étapes guidées. Il s'avère particulièrement utile pour vos collègues qui découvrent l'outil. Étape 3 — Entrer dans l'éditeur Cliquez sur le bouton Éditer de la carte d'un site. Vous accédez alors à l'écran central du Studio : l'éditeur en trois colonnes. Colonne Rôle Gauche — Arborescence Liste des pages du site, regroupées par type (pages standards, articles de blog, en-tête, pied de page). Recherche en temps réel. Compteur de slots par page. Indicateurs visuels pour les brouillons en attente. Centre — Aperçu Aperçu en direct de la page sélectionnée, présenté dans un cadre qui imite un navigateur. Onglets de langue avec drapeaux. Boutons de basculement entre les vues bureau, tablette et mobile. Droite — Inspecteur Lorsqu'aucun slot n'est sélectionné, l'inspecteur présente la liste de tous les emplacements éditables de la page. Lorsqu'un slot est sélectionné, il bascule sur le formulaire d'édition correspondant. Conseil — Les trois colonnes sont redimensionnables. Faites glisser les séparateurs verticaux pour ajuster la mise en page à la taille de votre écran. Étape 4 — Le déroulement d'une session d'édition Voici le déroulement type d'une session d'édition : Vous cliquez sur une page dans la colonne de gauche. L'aperçu se charge au centre, avec la page rendue exactement comme la verra un visiteur. Vous cliquez sur un texte de l'aperçu, par exemple le titre principal. L'inspecteur s'ouvre à droite avec un champ de saisie pré-rempli avec la valeur actuelle. Vous modifiez le texte. Le système enregistre automatiquement après une demi-seconde d'inactivité. L'aperçu se met à jour. À ce stade, votre modification reste à l'état de brouillon, invisible pour les visiteurs du site. Lorsque vous êtes satisfait, vous cliquez sur le bouton « Publier les modifications » en haut à droite. Votre travail devient alors visible publiquement. Recommandé — Préparez plusieurs modifications avant de publier. Le bouton « Publier les modifications » applique en une seule fois l'ensemble des modifications en attente sur la page, ce qui évite que les visiteurs voient des versions intermédiaires incohérentes. Étape 5 — Les boutons de la barre d'outils centrale Une barre d'actions est présentée au-dessus de l'aperçu. Voici la fonction de chaque bouton, dans l'ordre d'apparition. Bouton Effet SEO Ouvre une fenêtre avec un aperçu du résultat Google en direct. Voir le Chapitre 16. Dupliquer Crée une copie de la page courante. Cette fonction est particulièrement utile pour les articles de blog. Mettre en ligne / Retirer du site Modifie la visibilité publique de la page. À distinguer de « Publier les modifications » dont la fonction est différente. Publier les modifications Publie l'ensemble des brouillons en attente sur la page. Une pastille indique le nombre de modifications concernées. Annuler les modifications Supprime tous les brouillons et restaure la version actuellement publiée. Voir public Ouvre la page publique dans un nouvel onglet du navigateur. Supprimer Réservé aux administrateurs. Une confirmation est demandée. Voir l'avertissement ci-dessous. Avertissement — Le bouton Supprimer efface définitivement la page, ses traductions, ses slots, son fichier tpl.php et son wrapper Apache. Aucun retour en arrière n'est possible. Réservez son usage aux cas véritablement nécessaires. Étape 6 — Naviguer dans la liste des pages La colonne de gauche est plus puissante qu'il n'y paraît. Voici comment l'exploiter. Le sélecteur de section En haut de la colonne, deux onglets : Pages et Médias . Selon la configuration du site, un troisième onglet Produits peut apparaître si le catalogue dynamique est activé. La recherche en temps réel Saisissez quelques caractères dans le champ Rechercher : la liste se filtre instantanément. La recherche porte sur le titre, le slug et la catégorie. Les groupes de pages Les pages sont regroupées par type : page : pages standards (accueil, contact, à propos, etc.). blogpost : articles de blog. other : éléments structurels (en-tête, pied de page, menu). Les indicateurs visuels Une pastille orange à côté d'une page indique qu'elle comporte des modifications en brouillon. Un nombre entre crochets, par exemple [3] , donne le nombre de slots éditables sur la page. Une icône grisée signale que la page est en mode « Retirée du site ». Le bouton Nouveau Le bouton est situé tout en bas de la liste. Selon le contexte : Sur la page d'index d'un blog, il devient « + Nouvel article ». Sur les autres pages, il devient « + Nouvelle page ». Étape 7 — L'inspecteur L'inspecteur connaît deux états distincts. État vide : la liste « Contenu de la page » Lorsqu'aucun slot n'est sélectionné dans l'aperçu, l'inspecteur présente la liste exhaustive des slots de la page, regroupés par section. Pour chacun : Une icône précise le type (texte, image, couleur, icône, etc.). Le libellé du slot est affiché. Un aperçu de la valeur actuelle est proposé, limité à soixante caractères. Un repère orange « modifié » signale qu'un brouillon est en cours. Cliquez sur n'importe quelle ligne pour ouvrir le formulaire d'édition. État édition : le formulaire Lorsqu'un slot est sélectionné, l'inspecteur bascule en mode édition. Vous y trouvez : Un bouton « ← Retour » pour revenir à la liste. Le libellé du slot affiché en titre. Un champ d'édition principal pour la langue actuellement affichée dans l'aperçu. Une section dépliable « Autres langues » pour saisir les versions linguistiques. Une section dépliable « Options avancées » qui permet d'accéder à la valeur canonique partagée. Son usage est à réserver à des cas particuliers. Conseil — L'enregistrement automatique se déclenche une demi-seconde après votre dernière saisie. Un indicateur affiche successivement « Enregistrement... » puis « Enregistré ». Aucun bouton de sauvegarde n'est nécessaire. Étape 8 — Changer de langue dans l'aperçu Au-dessus de l'aperçu, une rangée d'onglets accompagnés de drapeaux représente les langues activées sur votre site (FR, EN, DE, etc.). Cliquez sur le drapeau d'une autre langue. L'aperçu se recharge dans cette langue. Lorsque vous éditez un slot, le champ principal de l'inspecteur correspond à la langue actuellement affichée. Note — La langue principale du site (généralement le français) constitue la langue canonique. Les autres langues sont des traductions complémentaires. Lorsqu'une traduction manque, le visiteur voit la version canonique. Le Chapitre 13 détaille ce mécanisme. Récapitulatif Vous savez désormais : Accéder au Studio depuis Outils → InfraS. Lire le tableau de bord (sites, statistiques, actions rapides, activité récente). Entrer dans l'éditeur en trois colonnes. Identifier le rôle de chacune des trois colonnes (arborescence, aperçu, inspecteur). Reconnaître les boutons de la barre d'outils centrale. Naviguer entre les langues via les onglets dotés de drapeaux. Comprendre la distinction entre brouillon et publication. Le chapitre suivant aborde concrètement la modification d'un texte. CHAPITRE 10 — Modifier les textes La modification d'un texte est l'opération la plus fréquente dans le Studio. Ce chapitre présente les trois méthodes possible, ainsi que les différents types de champs que vous rencontrerez. Méthode 1 — Édition directe depuis l'aperçu C'est la méthode la plus rapide et la plus naturelle. Ouvrez la page que vous souhaitez modifier en cliquant sur son nom dans la colonne de gauche. Dans l'aperçu central, survolez avec la souris : les zones éditables sont entourées d'un cadre orange en pointillés. Cliquez sur le texte à modifier. L'inspecteur s'ouvre à droite avec un champ déjà rempli. Modifiez le texte. L'enregistrement automatique intervient une demi-seconde après votre dernière saisie. L'aperçu se met à jour en direct. Recommandé — L'indicateur « Enregistré » à côté du champ confirme la sauvegarde en brouillon. Pour rendre la modification visible publiquement, cliquez sur Publier les modifications en haut à droite. Méthode 2 — Liste « Contenu de la page » Cette méthode est utile lorsqu'un slot n'est pas directement cliquable, par exemple une image masquée ou une valeur stockée dans un attribut. Ouvrez la page sans cliquer sur l'aperçu. Consultez la colonne de droite. La liste « Contenu de la page » répertorie tous les emplacements éditables. Chaque ligne présente un type, un libellé, un aperçu de la valeur et un repère « modifié » en cas de brouillon en cours. Cliquez sur la ligne souhaitée pour ouvrir son formulaire. Conseil — Les slots sont regroupés par section (« hero », « pied de page », « appel à l'action », etc.) selon le découpage défini par votre développeur. Cela facilite la navigation sur les pages longues. Méthode 3 — Navigation par sections Sur les pages longues, vous pouvez utiliser la barre de défilement de l'aperçu pour atteindre la section recherchée, puis cliquer dessus directement. Les types de champs disponibles Le développeur a choisi un type pour chaque slot. Ce type détermine l'apparence du formulaire d'édition. Voici l'ensemble des types existants. Texte court Champ d'une seule ligne, sans mise en forme. Convient pour les titres, les libellés et les noms. Une longueur maximale peut être imposée, auquel cas un compteur de caractères est affiché. Texte long Champ multi-lignes sans mise en forme. Les sauts de ligne sont autorisés et automatiquement convertis en retours visuels. Idéal pour une accroche ou un paragraphe simple. Texte riche Éditeur visuel complet (CKEditor) avec barre d'outils étendue. Outil Effet Format Paragraphe, Titre 2, Titre 3, Titre 4, Code Style Gras, italique, souligné, barré Couleur Couleur de texte et couleur de fond, selon la palette de la marque Alignement Gauche, centre, droite, justifié Listes Listes à puces, listes numérotées, indentation Liens Insérer ou supprimer un lien Insérer un média Ouvre la bibliothèque pour insérer une image au curseur Note importante — L'éditeur ne propose pas de bouton « source » pour modifier le HTML brut. Ce choix est délibéré, comme expliqué au Chapitre 3. Image Le champ comporte une zone de saisie, un bouton de sélection dans la bibliothèque, un bouton de suppression et une vignette d'aperçu. Cliquez sur le bouton Choisir une image . La bibliothèque média s'ouvre dans une fenêtre. Sélectionnez une image existante ou téléversez-en une nouvelle. L'image est intégrée et la vignette s'affiche. Conseil — Vous pouvez également glisser-déposer une image depuis la barre latérale Médias directement sur la zone d'image dans l'aperçu central. URL Champ texte adapté aux liens. Les mêmes outils que pour les images sont disponibles, par exemple le sélecteur pour insérer un média comme cible. Icône Champ de sélection d'une icône FontAwesome. Saisissez le nom de la classe (par exemple fa-solid fa-star ) ou cliquez sur l'une des vingt icônes proposées (étoile, cœur, fusée, etc.). Choisissez la couleur dans le sélecteur. Un aperçu en direct s'affiche. Couleur Sélecteur de couleur HTML5 accompagné d'un champ hexadécimal. Format strict : #RRGGBB ou #RRGGBBAA (avec transparence). Bouton Défaut pour revenir à la valeur initiale. Une couleur n'est pas traduisible et reste identique dans toutes les langues. Nombre Champ numérique simple avec validation. Booléen Case à cocher pour un choix oui ou non. Liste déroulante Menu déroulant avec des options définies par votre développeur. Le panneau d'édition multilingue Pour les slots de type texte (texte court, texte long, texte riche), l'inspecteur présente trois zones distinctes. Zone Contenu Champ principal La langue actuellement affichée dans l'aperçu (drapeau actif). C'est ici que vous saisissez la majorité du temps. Autres langues (dépliable) Un champ par langue prise en charge. Cliquez sur la flèche pour déplier et saisir les traductions. Options avancées (dépliable) La valeur canonique partagée entre toutes les langues. À ne modifier qu'en cas de besoin spécifique. Note — Au moment du rendu public, le module recherche la valeur dans cet ordre : surcharge dans la langue du visiteur, valeur canonique, valeur par défaut. Le visiteur voit toujours un contenu, même en l'absence de traduction. Pour les slots non textuels (image, couleur, icône, etc.), une seule zone « Valeur (toutes langues) » est proposée. Une image se traduit rarement. L'enregistrement automatique en pratique Aucun bouton « Enregistrer » n'est à cliquer. Le module sauvegarde automatiquement votre travail. Vous saisissez du texte. Le module attend une demi-seconde de pause. L'indicateur passe à Enregistrement... . Le serveur reçoit la valeur et l'enregistre comme brouillon. L'indicateur passe à Enregistré en vert. Conseil — Si l'indicateur affiche « Erreur réseau », votre connexion a probablement été interrompue. Utilisez Ctrl+Z pour récupérer votre saisie, attendez le rétablissement de la connexion, puis ressaisissez. Annuler une modification non publiée Tant que vous n'avez pas publié, plusieurs options de retour en arrière sont possibles : Annulation locale : utilisez Ctrl+Z dans le champ pour revenir frappe par frappe. Annulation globale de la page : cliquez sur Annuler les modifications dans la barre d'outils. Tous les brouillons de la page courante sont alors supprimés. Avertissement — Le bouton « Annuler les modifications » est définitif. Une confirmation est demandée. Une fois validée, le brouillon est perdu et la page revient à sa version publique. Récapitulatif Vous savez désormais : Cliquer sur un texte de l'aperçu pour l'éditer. Utiliser la liste « Contenu de la page » pour les slots non cliquables. Reconnaître les neuf types de champs (texte court, texte long, texte riche, image, URL, icône, couleur, nombre, liste). Distinguer la valeur d'une langue, la valeur canonique et la valeur par défaut. Comprendre le fonctionnement de l'enregistrement automatique en brouillon. Annuler une modification avant publication. Le chapitre suivant aborde la bibliothèque média. CHAPITRE 11 — Gérer les images et la bibliothèque média Toutes les images, vidéos et documents que vous utilisez sur votre site transitent par la bibliothèque média. Il s'agit d'un emplacement central : vous téléversez un fichier une seule fois et le réutilisez partout où vous en avez besoin. Accéder à la bibliothèque Trois entrées sont possibles : Depuis le tableau de bord : cliquez sur la carte « Bibliothèque médias ». Depuis l'éditeur : sélectionnez l'onglet Médias en haut de la colonne gauche. Depuis un slot image : cliquez sur le bouton « Choisir une image » qui ouvre la bibliothèque dans une fenêtre. L'organisation de la bibliothèque La bibliothèque est gérée par site. Si vous administrez plusieurs sites, chacun dispose de sa propre médiathèque indépendante. Au sein d'un site, les médias sont classés par type : Type Formats acceptés Image JPG, PNG, WebP, SVG, GIF Vidéo MP4, WebM Document PDF, DOC et autres formats bureautiques Téléverser un nouveau média Méthode A — Bouton « Envoyer un fichier » Dans la barre d'outils de la bibliothèque, cliquez sur Envoyer un fichier . Sélectionnez un ou plusieurs fichiers depuis votre poste. Le ou les fichiers sont téléversés. Une vignette apparaît dans la grille. Méthode B — Glisser-déposer Faites glisser une image depuis votre explorateur de fichiers. Déposez-la directement sur la grille de la bibliothèque. Le téléversement démarre automatiquement. Méthode C — Pendant l'édition d'un slot image Vous éditez un slot de type image dans l'inspecteur. Cliquez sur Choisir une image . La bibliothèque s'ouvre. Un bouton Envoyer est disponible en haut. Téléversez sans interrompre votre flux d'édition. Conseil — Pour les photographies, le format WebP est recommandé. Il offre un fichier 30 à 50 % plus léger qu'un JPG à qualité équivalente. Le module accepte ce format nativement. Retrouver un média existant Au-dessus de la grille, plusieurs filtres sont disponibles : Recherche : par libellé, référence ou tag. Type : images, vidéos ou documents. Site : si vous administrez plusieurs sites. La grille se met à jour instantanément. Un défilement infini en bas de page charge les médias suivants par lots de cinquante. Modifier les métadonnées d'un média Cliquez sur une vignette. Une fenêtre d'édition s'ouvre, organisée en deux colonnes. Colonne de gauche — Aperçu et utilisation Aperçu de l'image en taille réelle. Liste des pages où le média est utilisé : « Utilisé sur N éléments ». Historique des modifications, présenté de manière dépliable. Colonne de droite — Champs éditables Champ Description Référence Identifiant court, réutilisable dans les shortcodes (par exemple {{media:ref=hero-1.url}} ). Libellé Nom affiché dans la bibliothèque. Texte alternatif (canonique) L'attribut alt par défaut. Important pour le référencement et l'accessibilité. Tags Mots-clés facilitant la recherche du média. Traductions par langue Section dépliable. Un champ par langue pour traduire le texte alternatif. Recommandé — Renseignez systématiquement le texte alternatif. C'est ce texte alternatif qui est affiché si l'image ne se charge pas. C'est ce texte alternatif que lit un lecteur d'écran et que Google utilise pour comprendre vos images. Les variantes générées automatiquement Lors de chaque téléversement d'image, le module crée automatiquement trois tailles supplémentaires en plus de l'original. Variante Dimensions Usage type thumb 200 × 200 px Vignettes, galerie card 640 × 480 px Cartes d'articles, mosaïques wide 1600 × 1200 px Hero pleine largeur original Dimensions natives Téléchargement, impression Les variantes sont générées à la demande. Lors de la première utilisation d'une variante (par exemple card ), elle est créée puis mise en cache. Supprimer un média Ouvrez la fenêtre d'édition en cliquant sur la vignette. En bas à droite, cliquez sur Envoyer à la corbeille . Note — La suppression est en réalité un marquage : le média n'est pas effacé physiquement du disque. Il est simplement signalé comme inactif et n'apparaît plus dans la grille. Vos pages qui le référencent continuent à l'afficher. Avertissement — Si le média est encore utilisé, la suppression est par défaut refusée. Le module présente la liste des pages concernées. Soit vous remplacez l'image sur ces pages, soit vous forcez la suppression — auquel cas les pages afficheront une image cassée. Réimporter le contenu d'un dossier Si vous avez ajouté des fichiers sans passer par le Studio (FTP, SCP, ou via l'éditeur Dolibarr Website), ils n'apparaissent pas dans la bibliothèque. Pour les détecter : Dans la barre d'outils de la bibliothèque, cliquez sur Réimporter . Le module parcourt le dossier physique du site. Les fichiers absents de la bibliothèque sont enregistrés. Conseil — Le module effectue cette réimportation automatiquement toutes les cinq minutes au maximum lors de l'ouverture de la bibliothèque. Le bouton sert uniquement à forcer une réimportation immédiate. Insérer un média dans un slot de texte riche Vous éditez un slot de type texte riche. Au-dessus de la barre d'outils, cliquez sur Insérer un média . La bibliothèque s'ouvre dans une fenêtre. Sélectionnez ou téléversez une image. Le module insère : une balise si vous avez choisi une image, un lien avec le libellé si vous avez choisi un document. Récapitulatif Vous savez désormais : Accéder à la bibliothèque depuis trois entrées différentes. Téléverser des médias par bouton, par glisser-déposer ou pendant l'édition d'un slot. Filtrer la bibliothèque par recherche, type ou site. Modifier les métadonnées (libellé, texte alternatif et traductions, tags). Comprendre les variantes générées automatiquement (thumb, card, wide). Supprimer un média en respectant ses utilisations. Réimporter pour récupérer des fichiers ajoutés hors du Studio. Insérer un média au curseur dans un slot de texte riche. Le chapitre suivant aborde le mécanisme de publication, qui sépare votre travail en cours de la version visible publiquement. CHAPITRE 12 — Brouillon, publication et versions Tout ce que vous saisissez n'est pas immédiatement visible publiquement. Le module utilise un système de brouillons qui vous permet de préparer plusieurs modifications, de les relire, puis de les publier en une seule opération. Ce chapitre détaille ce mécanisme. La distinction essentielle entre brouillon et publication État Visibilité Brouillon Visible uniquement dans l'éditeur Studio (aperçu central). Les visiteurs du site continuent à voir l'ancienne version. Publié Visible publiquement. Les visiteurs voient la nouvelle version dès la publication. Note — Le module stocke deux valeurs par slot : value (la valeur publique) et value_draft (le brouillon). L'aperçu Studio lit en priorité value_draft . Le rendu public lit uniquement value . Repérer ses brouillons en attente Plusieurs indicateurs visuels signalent la présence de brouillons non publiés. Sur la liste des pages (colonne de gauche) Une pastille orange à côté du titre de la page indique qu'elle contient au moins un brouillon non publié. Sur la barre d'outils de l'éditeur Le bouton Publier les modifications apparaît avec un compteur numérique précisant le nombre de brouillons : Aucun brouillon : le bouton est masqué. Un ou plusieurs brouillons : le bouton est visible avec le compteur (par exemple « Publier les modifications (3) »). Sur l'inspecteur Un slot avec un brouillon en cours porte un repère orange « modifié » à côté de son libellé. Sur l'aperçu central L'aperçu présente toujours la version brouillon. Pour voir exactement ce que verrait un visiteur, cliquez sur Voir public dans la barre d'outils, ce qui ouvre la page dans un nouvel onglet. Publier les modifications Lorsque vous êtes satisfait de votre brouillon : Cliquez sur Publier les modifications en haut à droite de la barre d'outils. Une boîte de confirmation s'affiche : « Publier les N modifications de cette page ? » Cliquez sur Confirmer . Une notification verte « Modifications publiées » apparaît en bas à droite. L'aperçu reste identique, puisque la version brouillon est devenue la version publique. Le compteur numérique disparaît, ainsi que la pastille orange dans la barre latérale. Effet immédiat — Les visiteurs qui ouvrent la page après votre publication voient la nouvelle version. Aucun délai, aucun cache à vider. Conseil — Préparez plusieurs modifications avant de publier. Le bouton publie l'ensemble des brouillons en une seule fois, ce qui évite que les visiteurs voient des versions intermédiaires. Annuler les modifications en attente Si vous changez d'avis et souhaitez tout abandonner pour revenir à la version actuelle du site : Cliquez sur Annuler les modifications dans la barre d'outils, à côté de « Publier ». Une boîte de confirmation s'affiche : « Annuler les N modifications de cette page ? Cette action est irréversible. » Cliquez sur Confirmer . L'ensemble des brouillons est supprimé. L'aperçu se met à jour avec la version publique. Avertissement — Une fois confirmée, l'annulation efface définitivement vos brouillons. Aucune récupération n'est possible. Mettre en ligne ou retirer du site (statut de la page) Cette fonction ne doit pas être confondue avec « Publier les modifications ». Le bouton agit ici sur la visibilité de la page elle-même, non sur ses contenus. Bouton Effet Publier les modifications Bascule les brouillons des slots vers les valeurs publiques. Concerne le contenu de la page. Mettre en ligne ou Retirer du site Bascule la visibilité de la page. Une page « Retirée du site » renvoie une erreur 404 ; le wrapper Apache est supprimé. Cas d'usage de « Retirer du site » Vous préparez une nouvelle page qui ne doit pas être publique tant que tous ses contenus ne sont pas finalisés. Vous souhaitez désactiver une promotion expirée tout en conservant la page pour une réactivation future. Une ancienne page que vous ne voulez plus rendre accessible mais que vous préférez conserver dans la base. Effet de « Mettre en ligne » — Le wrapper Apache .php est régénéré et la page redevient accessible. La page canonique et ses pages sœurs (autres langues) basculent simultanément. L'historique des modifications Toutes vos publications sont consignées dans un journal interne ( llx_infrasstudio_revision ). Pour les consulter : Sélectionnez un slot dans l'inspecteur. Dépliez la section Historique en bas du panneau. Vous y voyez la chronologie des modifications, avec : la date et l'heure, l'auteur (utilisateur Dolibarr), l'action effectuée (création, mise à jour, publication, annulation). Note — L'historique vous permet de consulter qui a fait quoi. Une fonction de restauration directe d'une version antérieure n'est pas encore disponible : si vous avez besoin de revenir en arrière, contactez votre administrateur Dolibarr, qui peut récupérer la valeur depuis la base de données. Workflow recommandé pour une équipe Pour les sites édités par plusieurs personnes : Le rédacteur ouvre la page et procède aux modifications. Toutes restent à l'état de brouillon. Le rédacteur partage le lien de l'éditeur avec un relecteur (chef de projet, marketing, juriste, etc.). Le relecteur ouvre la même page dans le Studio. L'aperçu lui présente la version brouillon. Le relecteur valide ou demande des ajustements via un canal externe (Slack, courriel, etc.). Le rédacteur applique les ajustements (toujours en brouillon). Une fois la version validée, le rédacteur ou un publicateur dédié, selon les permissions configurées, clique sur « Publier les modifications ». À retenir — Le système de brouillon n'est pas un confort optionnel. Il évite les publications accidentelles en cours de rédaction et permet une véritable validation à plusieurs avant que les visiteurs voient le résultat. Récapitulatif Vous savez désormais : Distinguer un brouillon (privé à l'éditeur) d'une publication (visible publiquement). Reconnaître les indicateurs visuels (pastille orange, compteur numérique, repère slot). Publier les modifications d'une page en un clic. Annuler les brouillons en cas de changement d'avis. Distinguer « Publier les modifications » (contenu) et « Mettre en ligne ou Retirer » (visibilité). Consulter l'historique d'un slot. Mettre en place un processus de relecture collective. Le chapitre suivant aborde la gestion du multilingue. CHAPITRE 13 — Travailler en plusieurs langues Si votre site existe en plusieurs langues, ce chapitre vous concerne. Le module est multilingue dès la création du premier slot. Aucune duplication de page n'est nécessaire : une seule page, plusieurs traductions. Le modèle multilingue Le module repose sur le modèle « une page, plusieurs traductions » : Concept Description Langue canonique La langue principale du site (généralement le français). C'est la valeur de référence. Langues secondaires Les autres langues activées sur le site. Chaque slot peut disposer d'une surcharge spécifique pour chacune d'elles. Valeur par défaut Définie par le développeur dans le HTML. Sert de filet de sécurité ultime. L'ordre de résolution au rendu Par exemple, lorsqu'un visiteur consulte votre site en allemand, le module recherche la valeur d'un slot dans cet ordre : La surcharge dans la langue du visiteur (de_DE). La valeur canonique (FR par défaut). La valeur par défaut définie dans le code par le développeur. Conséquence rassurante — Si vous omettez de traduire un slot en allemand, le visiteur voit la version française. Aucune page cassée, aucun texte vide. Activer une langue sur votre site Cette opération s'effectue une fois pour toutes, par le développeur ou l'administrateur, dans le module Website Dolibarr : Rendez-vous dans Accueil → Sites web. Sélectionnez votre site. Cliquez sur l'onglet Configuration . Dans le champ Autres langues , ajoutez les codes ISO (par exemple en_US,de_DE,es_ES ). Enregistrez. Les langues disponibles correspondent à votre installation Dolibarr (environ 118 langues nativement). Les plus courantes sont : fr_FR , en_US , de_DE , es_ES , it_IT , pt_PT , nl_NL , pl_PL . Basculer entre les langues dans l'éditeur Au-dessus de l'aperçu central, une rangée d'onglets accompagnés de drapeaux représente les langues activées. Le drapeau actif est mis en valeur visuellement. Cliquez sur le drapeau d'une autre langue (par exemple anglais). L'aperçu se recharge dans cette langue. Si vous avez déjà saisi des traductions, elles s'affichent. Sinon, l'aperçu présente la version canonique (français). Conseil — Ouvrez deux onglets de votre navigateur côte à côte, l'un en français et l'autre en anglais. Vous visualisez en temps réel l'effet de vos traductions sur les deux versions. Traduire un slot — méthode rapide La méthode la plus naturelle consiste à rester focalisé sur la langue affichée : Cliquez sur l'onglet de la langue cible (par exemple anglais). Cliquez sur le texte à traduire dans l'aperçu. L'inspecteur s'ouvre. Le champ principal est prêt à recevoir la traduction. Saisissez la traduction. L'enregistrement automatique l'enregistre comme surcharge pour cette langue. L'aperçu se met à jour. Pour vérifier que vous n'avez pas écrasé la version française, basculez sur l'onglet français : le texte original doit toujours s'y trouver. Traduire un slot — méthode toutes-langues Pour saisir d'un coup les traductions dans toutes les langues, sans changer d'onglet : Sélectionnez un slot. Dans l'inspecteur, dépliez la section Autres langues . Vous voyez un champ par langue, avec un drapeau en préfixe. Saisissez chaque traduction. L'enregistrement automatique s'effectue à chaque champ. Conseil — Cette vue est idéale pour un traducteur professionnel à qui vous donnez accès au Studio avec la seule permission editTranslations . Indicateurs visuels de surcharge Comment savoir d'un coup d'œil quels slots sont traduits et lesquels ne le sont pas ? Sur les onglets de langue L'onglet de la langue actuellement affichée comporte un point coloré si la valeur est une surcharge (différente du canonique). Sur le canonique, aucun point n'est affiché. Dans la section « Autres langues » Chaque champ de langue affiche un repère à droite : Repère Signification surcharge (vert) Vous avez saisi une traduction spécifique pour cette langue. hérite FR (gris) Aucune traduction. Le visiteur voit la valeur canonique. Revenir à la valeur canonique Vous avez traduit un slot mais souhaitez finalement que la langue concernée réutilise la valeur française : Sélectionnez le slot. Dans la section « Autres langues », repérez la langue concernée. Cliquez sur le bouton Retour au FR à droite du champ. Il n'apparaît que si une surcharge existe. La surcharge est supprimée. Le visiteur de cette langue verra à nouveau la valeur canonique. Conseil — Si vous saisissez dans un champ surcharge la même valeur que le canonique, le module supprime automatiquement la surcharge. Cela évite un enregistrement redondant. Traductions des fiches produit Les fiches produit Dolibarr disposent de leur propre éditeur de traductions, distinct de l'éditeur de slots. Pour y accéder : Tableau de bord du Studio → carte Traductions produits . Vous arrivez sur une page à deux colonnes. À gauche, la liste des produits commercialisables. À droite, l'éditeur avec onglets de langue. Champs traduisibles Catégorie Champs Champs natifs Dolibarr libellé, description Champs personnalisés traduisibles accroche, libellé du bouton, déploiement, compatibilité, support, langues, fonctionnalités, paliers tarifaires Champs non traduisibles image principale, URL du bouton, étiquette (ces valeurs sont universelles) Synchronisation native — Les modifications effectuées depuis le Studio sont visibles instantanément dans la fiche produit Dolibarr et dans son onglet Traductions natif. Et inversement. Récapitulatif Vous savez désormais : Comprendre l'ordre de résolution (surcharge → canonique → défaut). Basculer entre les langues via les onglets dotés de drapeaux. Traduire un slot en mode rapide (par langue) ou tous-langues simultanément. Lire les indicateurs de surcharge. Revenir à la valeur canonique avec « Retour au FR ». Éditer les traductions des fiches produit. Le chapitre suivant aborde la gestion du blog. CHAPITRE 14 — Gérer les articles de blog Le blog géré par le module repose sur les pages standard du module Website. Aucune table dédiée, aucun système parallèle : un article correspond à une page web. L'ensemble de ce que vous savez déjà s'applique, avec quelques raccourcis ergonomiques supplémentaires. Comprendre l'architecture du blog Élément Description Article Une page Dolibarr Website portant le type blogpost . Page d'index Une page standard (par exemple « Ressources » ou « Blog ») qui liste les articles publiés. Multilingue Un article correspond à une page, qui correspond à un fichier PHP. Les traductions vivent dans les surcharges de slots, comme pour toute page. Créer un nouvel article L'assistant de création est contextuel : il s'active automatiquement lorsque vous êtes sur la page d'index du blog désignée par votre administrateur. Procédure Ouvrez la page d'index du blog (par exemple /ressources ). Le bouton de la barre latérale devient + Nouvel article (au lieu de « + Nouvelle page »). Cliquez sur ce bouton. Une fenêtre s'ouvre avec trois champs : Titre : il deviendra le H1 et le titre SEO. Il pré-remplit le slot post_title . Slug : généré automatiquement à partir du titre, préfixé par blog- . Vous pouvez le modifier. Catégorie : la rubrique de l'article (par exemple transformation digitale, juridique). Elle pré-remplit le slot post_category . Cliquez sur Créer l'article . Une nouvelle page blog-mon-titre est créée à partir du gabarit blog du site. Vous êtes automatiquement redirigé vers l'éditeur de cette nouvelle page. Effet automatique — Le module crée la page Dolibarr, le fichier tpl.php , le wrapper Apache blog-mon-titre.php et pré-remplit les slots post_title et post_category . Anatomie d'un article Un article créé depuis le gabarit standard contient les slots suivants : Slot Type Rôle post_title texte court H1 et titre SEO de l'article post_meta_description texte court Meta description SEO (150-160 caractères) post_category texte court Rubrique affichée en pastille au-dessus du titre post_lead texte long Chapeau ou accroche en italique sous le titre post_hero_image image Image principale en pleine largeur en haut de l'article post_body texte riche Le corps de l'article (éditeur visuel complet) post_secondary_image image Image illustrative facultative dans le corps post_secondary_alt texte court Texte alternatif de l'image secondaire Note — La date d'un article n'est pas un slot. Elle est lue automatiquement depuis la base Dolibarr (date de modification, sinon date de création). Vous n'avez pas à la saisir. Date et auteur d'un article La date affichée publiquement suit cette cascade : La date de modification de la page (la plus récente). La date de création si la page n'a jamais été modifiée. Vous n'avez rien à saisir : à chaque publication d'une modification, la date est mise à jour automatiquement. C'est le comportement standard d'un blog. Conseil — Pour antidater un article, demandez à votre administrateur Dolibarr de modifier llx_website_page.date_creation en SQL. Aucune interface dédiée n'est prévue, par souci de simplicité. L'auteur affiché est généralement géré par un slot dans le gabarit du site (par exemple post_author ). La page d'index avec son listing automatique La page d'index du blog (« Ressources », « Blog », etc.) ne nécessite aucune édition manuelle pour ajouter un nouvel article : la liste se met à jour automatiquement. Lorsque vous publiez un nouvel article : Le module détecte la nouvelle page de type blogpost au statut publié. Au prochain rendu de la page d'index, l'article apparaît dans la grille. Image principale, titre, catégorie, accroche, date : tout est lu depuis les slots de l'article. Conséquence — Vous ne touchez jamais à la page d'index. Vous publiez vos articles. Le listing se met à jour de lui-même. La section « À lire également » Sous chaque article, une section affiche trois articles aléatoires (autres que celui qui est consulté). Aucune configuration n'est nécessaire : la sélection est effectuée par le module à chaque rendu. Modifier un article existant Ouvrez l'éditeur Studio. Dans la colonne de gauche, dépliez le groupe blogpost . Cliquez sur l'article à modifier. L'aperçu se charge. Modifiez les slots normalement (clic dans l'aperçu, inspecteur, etc.). Publiez lorsque vous êtes prêt. Dupliquer un article Cette fonction est utile pour réutiliser une structure existante : Ouvrez l'article modèle. Cliquez sur Dupliquer dans la barre d'outils. Une fenêtre demande le nouveau slug (préfixé blog- ) et le nouveau titre. Confirmez. Le module crée la copie avec tous les slots clonés (canonique et traductions). Vous êtes redirigé vers le nouvel article pour le personnaliser. Supprimer un article Réservé aux administrateurs — Le bouton « Supprimer » de la barre d'outils n'est visible qu'avec la permission admin . Une confirmation est demandée. La suppression est irréversible : la page Dolibarr, ses slots, son fichier tpl.php et son wrapper Apache disparaissent définitivement. Alternative — Plutôt que de supprimer, utilisez Retirer du site . L'article sort du listing public mais reste consultable depuis l'éditeur. Vous pouvez le remettre en ligne plus tard. Récapitulatif Vous savez désormais : Comprendre qu'un article correspond à une page Dolibarr Website. Créer un nouvel article via l'assistant contextuel sur la page d'index. Renseigner les huit slots du gabarit blog standard. Comprendre la datation automatique de l'article. Constater que le listing se met à jour de lui-même. Modifier, dupliquer, retirer ou supprimer un article. Le chapitre suivant présente le catalogue produit dynamique. CHAPITRE 15 — Catalogue produit dynamique Si votre site présente un catalogue de produits Dolibarr (services, logiciels, abonnements), le module peut générer automatiquement une page web dédiée à chaque produit. Vous ajoutez un produit dans Dolibarr, sa page web est créée sans intervention supplémentaire. Le concept Vous disposez probablement déjà de produits dans Dolibarr (table llx_product ) avec leur fiche commerciale (libellé, description, prix). Sur votre site web, vous souhaitez : Un catalogue qui répertorie tous les produits actifs. Une page détaillée par produit . Une mise à jour automatique : tout nouveau produit donne une nouvelle page sans intervention manuelle. Le module remplit exactement ce besoin. Vous écrivez un seul gabarit de fiche produit (la page solution-detail ), et le module génère un wrapper solution-.php pour chaque produit publié. Préparer un produit Dolibarr pour le catalogue Pour qu'un produit apparaisse dans le catalogue web, deux conditions doivent être remplies : Champ Valeur requise Statut commercialisable ( tosell ) À vendre (= 1) Publié sur le site (champ personnalisé infrasstudio_published ) Coché (= 1) Trois états possibles pour un produit tosell published Visibilité 0 — Invisible partout (commercial et web) 1 0 Brouillon — modifiable côté Studio mais invisible publiquement 1 1 Publié — la carte apparaît sur le catalogue et la page de détail est servie Accéder à la section Produits Ouvrez l'éditeur Studio. Dans la colonne de gauche, cliquez sur l'onglet Produits . La liste de tous vos produits commercialisables s'affiche. Pour chaque produit, vous voyez : Sa référence et son libellé. Son type (SaaS, Extension, Application instantanée, etc.). Son statut : publié (vert) ou brouillon (orange). Modifier un produit Cliquez sur un produit dans la liste. L'aperçu central charge la page solution-detail avec ce produit. L'inspecteur à droite affiche les champs natifs Dolibarr et les champs personnalisés. Champs modifiables Catégorie Champs Champs natifs Dolibarr (traduisibles) libellé, description (texte riche) Champs personnalisés traduisibles accroche, libellé du bouton, déploiement, compatibilité, support, langues, fonctionnalités, paliers tarifaires Champs personnalisés non traduisibles image principale, URL du bouton, étiquette Modifier un champ Cliquez sur le champ dans l'inspecteur, ou directement sur l'élément correspondant dans l'aperçu central. L'inspecteur passe en mode édition avec un bouton ← Retour . Modifiez la valeur. Pour les champs traduisibles, dépliez la section Autres langues . Cliquez sur Enregistrer en bas du panneau. Le compteur indique le nombre de champs modifiés en attente. L'aperçu se rafraîchit. Conseil — Pour les produits, l'enregistrement automatique n'est pas activé : vous cliquez sur « Enregistrer » manuellement. Ce choix est délibéré, les champs Dolibarr étant plus sensibles, car directement liés à votre fiche produit commerciale. Publier ou retirer un produit Sélectionnez le produit dans la liste. Dans la barre d'outils centrale, cliquez sur Publier (ou Dépublier si déjà publié). Le module modifie le champ personnalisé infrasstudio_published à 1 (ou 0). Il déclenche ensuite la régénération automatique des wrappers solution-.php . Une notification verte confirme l'opération. Effet de la publication — Le wrapper /var/www//solution-.php est créé. La carte du produit apparaît sur le catalogue. La page de détail est accessible via /solution-.php . Effet de la dépublication — Le wrapper est supprimé. Tout visiteur tentant d'accéder à l'URL reçoit une erreur 404. La carte disparaît du catalogue. Régénérer les wrappers manuellement Si une désynchronisation est suspectée — par exemple un produit modifié récemment qui n'affiche pas la bonne version — deux options sont disponibles. Bouton dans la barre d'outils Sur la fiche produit, cliquez sur l'icône Régénérer wrapper (icône de synchronisation). Le module reconstruit le wrapper de ce produit. Bouton « Reconstruire maintenant » (administrateur) Rendez-vous dans Outils → InfraSStudio → Configuration. Repérez la section Wrappers solution . Cliquez sur Reconstruire maintenant . L'ensemble des wrappers est régénéré en une seule opération. Note — Une tâche planifiée toutes les heures régénère les wrappers en arrière-plan. En cas d'oubli ou d'incident temporaire, l'état est rétabli au plus tard une heure après. La page de catalogue La page de catalogue (généralement /catalogue.php ) liste tous les produits publiés sous forme de cartes. Chaque carte présente : L'image principale du produit. Une étiquette éventuelle (« Nouveau », « Promotion », etc.). Le libellé. L'accroche. La catégorie ou l'univers, déduits des catégories Dolibarr. Un lien vers la page de détail. Les visiteurs peuvent filtrer le catalogue par univers (Supply Chain, Health, Legal, etc.) et par type (SaaS, Extension, Instant). Les filtres sont en JavaScript et instantanés. Lien direct depuis Dolibarr Sur la fiche produit du Studio, un bouton Voir public ouvre la page solution publique dans un nouvel onglet. Un autre bouton Voir la fiche Dolibarr ouvre la fiche produit native. Aller-retour fluide — Vous pouvez naviguer entre la fiche commerciale Dolibarr et l'éditeur web Studio sans interrompre votre flux de travail. Récapitulatif Vous savez désormais : Comprendre qu'une page web est générée automatiquement par produit publié. Préparer un produit (tosell=1, infrasstudio_published=1). Modifier les champs natifs et personnalisés depuis le Studio. Distinguer les champs traduisibles des champs non traduisibles. Publier ou dépublier un produit, ce qui pilote son wrapper et sa carte sur le catalogue. Régénérer manuellement un wrapper en cas de désynchronisation. Comprendre que le catalogue se filtre côté visiteur sans rechargement. Le dernier chapitre de la Partie III aborde le référencement. CHAPITRE 16 — Référencement, sitemap et partage social Avoir un beau contenu est nécessaire ; obtenir une visibilité de Google et des réseaux sociaux est tout aussi important. Le module intègre l'ensemble des outils de référencement de base directement dans l'éditeur, sans extension tierce. Le panneau SEO d'une page Pour chaque page, vous pouvez personnaliser ses métadonnées de référencement via un panneau dédié dans la barre d'outils. Accéder au panneau Ouvrez la page dans l'éditeur. Dans la barre d'outils centrale, cliquez sur SEO . Une fenêtre de 720 pixels de largeur s'ouvre. Les champs disponibles Champ Description Cible Titre SEO Le titre affiché dans l'onglet du navigateur et dans les résultats Google. 50 à 60 caractères Meta description Le texte de présentation sous le titre dans Google. 140 à 160 caractères Mots-clés Mots-clés séparés par des virgules. Facultatif — peu utilisé par Google moderne Image Open Graph Image affichée lorsque la page est partagée sur Facebook, LinkedIn, Twitter, WhatsApp. 1200 × 630 px recommandé L'aperçu Google en direct En haut de la fenêtre, un aperçu live reproduit l'affichage d'un résultat Google : L'URL de la page (en gris). Le titre (en bleu). La meta description (en gris). L'aperçu se met à jour à chaque saisie. Vous voyez immédiatement si votre titre est tronqué ou si votre description est trop longue. Compteurs colorés — À côté de chaque champ, un compteur indique le nombre de caractères : Vert : dans la plage idéale. Orange : en dehors de la plage mais acceptable. Rouge : trop long, sera tronqué par Google. Choisir l'image Open Graph Dans la fenêtre SEO, cliquez sur Choisir une image . La bibliothèque média s'ouvre. Sélectionnez une image ou téléversez-en une nouvelle. L'image apparaît à droite de l'aperçu Google. Format idéal — 1200 × 630 px (ratio 1.91:1) pour Facebook et LinkedIn. Format JPG ou PNG. Affichez votre logo et un texte court qui résume la page. Évitez les images de banque génériques. Lorsqu'une image Open Graph est renseignée, le module ajoute automatiquement les balises Open Graph et Twitter Cards dans l'en-tête HTML de la page : Enregistrer le SEO Modifiez les champs. Cliquez sur Enregistrer en bas de la fenêtre. Le module met à jour la base de données ( llx_website_page ) et le fichier tpl.php en synchronisant les balises HTML. L'aperçu se rafraîchit. Note — Les métadonnées SEO ne suivent pas le cycle de publication des slots. Une fois enregistrées, elles sont visibles publiquement immédiatement. Sitemap.xml Le sitemap est le fichier que Google utilise pour découvrir toutes les pages de votre site. Le module le génère automatiquement à partir de votre liste de pages. Contenu généré Toutes les pages au statut publié . Les pages au statut retiré du site sont exclues. Les pages sœurs (autres langues) sont déclarées comme alternates via . Régénérer le sitemap Méthode A — Bouton dans l'éditeur Rendez-vous dans la liste des pages d'un site. Cliquez sur le bouton Sitemap en haut. Le module régénère le fichier sitemap.xml à la racine du docroot. Une notification confirme l'opération. Méthode B — En ligne de commande (administrateurs) php htdocs/custom/infrasstudio/scripts/generate_sitemap.php Cette méthode convient à une planification quotidienne automatisée. Recommandé — Soumettez votre sitemap à Google Search Console une seule fois. Google reviendra ensuite le consulter automatiquement à intervalles réguliers. Balises hreflang multilingues Pour un site multilingue, Google a besoin de savoir quelles pages sont des traductions les unes des autres. C'est le rôle des balises . Le module génère ces balises automatiquement, à condition que votre développeur ait inclus le helper dans l'en-tête du gabarit : Conseil — Si vous ne voyez pas ces balises sur votre site, demandez à votre développeur d'ajouter dans l'en-tête de vos gabarits. Liste de contrôle SEO par page Avant de publier une nouvelle page, vérifiez les points suivants : Le titre SEO compte 50 à 60 caractères et contient le mot-clé principal. La meta description compte 140 à 160 caractères et incite au clic. L'image Open Graph est définie ; à défaut, le partage social affichera une vignette générique. Toutes les images possèdent un texte alternatif (renseigné dans la bibliothèque média). Le H1 (souvent un slot page_title ) est unique et descriptif. L'URL (slug) est en minuscules, sans accents, avec des tirets pour séparer les mots. Outils de mesure du référencement Le module génère le SEO mais ne le mesure pas. Pour suivre vos résultats, utilisez les outils standards : Google Search Console : permet de découvrir les pages indexées, les requêtes qui génèrent des clics, les erreurs. Google Analytics ou Matomo : trafic, comportement des visiteurs, conversions. PageSpeed Insights : performance de chargement et indicateurs Core Web Vitals. Outils de test Open Graph : Facebook Sharing Debugger, LinkedIn Post Inspector. Récapitulatif Vous savez désormais : Renseigner le titre SEO, la meta description, les mots-clés et l'image Open Graph d'une page. Lire l'aperçu Google en direct avec ses compteurs colorés. Ajouter une image Open Graph pour un partage social soigné. Régénérer le sitemap.xml manuellement ou en ligne de commande. Comprendre l'utilité des balises hreflang multilingues. Suivre une liste de contrôle SEO complète avant publication. Fin de la Partie III — Vous savez désormais utiliser le module au quotidien : modifier le contenu, gérer les médias, publier, traduire, gérer un blog, exploiter un catalogue produit et soigner le référencement. Vous êtes autonome. La Partie IV s'adresse aux développeurs intégrateurs. Si ce n'est pas votre rôle, vous pouvez passer directement aux Annexes (glossaire, FAQ, historique des versions). PARTIE IV — Pour le développeur intégrateur CHAPITRE 17 — Préparer un site Dolibarr Website Avant de pouvoir éditer un site via le module, ce site doit exister côté Dolibarr Website. Ce chapitre s'adresse au développeur qui démarre un nouveau projet : créer le site, le câbler proprement, et préparer le terrain pour le Studio. Étape 1 — Créer le site dans Dolibarr Website Connectez-vous à Dolibarr en tant qu'administrateur. Rendez-vous dans Accueil → Sites web. Cliquez sur Nouveau site . Renseignez les informations suivantes : Référence : identifiant court sans espace, par exemple monsite ou keaticweb . C'est l'identifiant interne, utilisé partout (URLs des wrappers, dossiers de données, constantes de configuration). Description : libellé facultatif. Virtualhost principal : URL publique, par exemple https://monsite.com . Langue principale : code de la locale, par exemple fr_FR . Autres langues : valeurs séparées par des virgules, par exemple en_US,de_DE,es_ES . Enregistrez. Convention de référence — Privilégiez un identifiant court et stable. Cette référence apparaîtra dans les chemins de fichiers, les URLs internes et les constantes de configuration. La modifier ultérieurement nécessite plusieurs ajustements. Étape 2 — Configurer le virtualhost Apache Le module Website ne configure pas Apache pour vous. Vous devez créer un VirtualHost qui pointe sur le docroot du site. Arborescence type /var/www/monsite/ # docroot Apache du site ├── index.php # wrapper page d'accueil ├── .php # autres wrappers générés ├── master.inc.php # bootstrap (inclut DOL_DOCUMENT_ROOT) ├── medias -> lien symbolique vers DOL_DATA_ROOT//medias/ └── ... DOL_DATA_ROOT//website/monsite/ # dossier de données du site ├── page1.tpl.php # gabarits des pages ├── page2.tpl.php ├── ... └── htmlheader.html # en-tête commun éventuel Exemple de VirtualHost minimal ServerName monsite.com DocumentRoot /var/www/monsite SSLEngine on SSLCertificateFile /etc/letsencrypt/live/monsite.com/fullchain.pem SSLCertificateKeyFile /etc/letsencrypt/live/monsite.com/privkey.pem Options FollowSymLinks AllowOverride None Require all granted # PHP-FPM dédié recommandé SetHandler "proxy:unix:/run/php/php8.2-fpm.monsite.sock|fcgi://localhost" Note — Un pool PHP-FPM dédié est recommandé pour isoler les performances et les variables d'environnement par site. Le pool peut tourner sous un utilisateur spécifique pour faciliter la gestion des permissions. Étape 3 — Le lien symbolique medias Pour que les images téléversées soient servies directement par Apache (mode média « native »), il faut un lien symbolique : cd /var/www/monsite ln -sfn /mnt/data/dolibarr//medias medias ls -la medias # doit pointer sur le dossier de données Dolibarr Conseil — Si vous ne pouvez pas créer ce lien symbolique, basculez le site en mode média module dans la configuration du module. Les images seront servies via document.php , avec un coût de performance modéré. Étape 4 — Le master.inc.php multicompany Si votre installation Dolibarr fonctionne en multicompany, le fichier master.inc.php du site doit définir DOLENTITY avant le chargement : .tpl.php . Étape 6 — Activer le site dans le module La procédure complète est détaillée au Chapitre 7. En résumé : Outils → InfraSStudio → Configuration. Cochez votre site dans la liste. Choisissez le mode média ( native recommandé). Enregistrez. Étape 7 — Annoter les premières pages avec des slots Cette étape fait l'objet du Chapitre 18. En quelques mots : modifiez le fichier page.tpl.php pour ajouter des tokens {{slot:nom|type=...}} aux endroits que vous souhaitez rendre éditables. Étape 8 — Vérifier avec la page Diagnostic Avant de livrer le site au client, lancez le diagnostic (Outils → InfraSStudio → Diagnostic) : Tous les voyants verts dans Environnement, Schéma SQL, Stockage et Intégration Dolibarr. Le site géré apparaît dans la section Sites avec docroot résolu, mode média correct et dossier de données accessible en écriture. Récapitulatif Votre site est prêt si : Le site est créé dans Dolibarr Website (référence, virtualhost, langues). Le VirtualHost Apache pointe sur le bon docroot. Le lien symbolique medias est en place (mode native), ou la constante INFRASSTUDIO_SITE__MEDIA_MODE=module est définie. Le fichier master.inc.php définit DOLENTITY en multicompany. Au moins une page existe (l'accueil). Le site est coché dans la configuration du module. La page Diagnostic est entièrement verte. Le chapitre suivant aborde l'annotation des templates avec des slots. CHAPITRE 18 — Annoter un template avec des slots Le slot est l'unité de base du module. Ce chapitre vous montre comment transformer un HTML statique en HTML annoté, prêt à être édité par le client. Il s'agit de l'opération la plus fréquente dans votre travail d'intégrateur. Le principe en deux phrases Vous écrivez votre HTML normalement, comme vous le feriez sans le module. Aux endroits que vous voulez rendre éditables, vous remplacez le contenu en dur par un token {{slot:...}} . C'est tout. Le module se charge du reste : détection automatique, persistance, rendu, interface d'édition. Premier exemple complet Avant — page non éditable

Bienvenue chez Keatic

Votre partenaire numérique de confiance depuis 2010.

Nous contacter
Après — page éditable via le Studio

{{slot:hero_title|type=text|default=Bienvenue chez Keatic|label=Titre du hero|group=hero}}

{{slot:hero_lead|type=textarea|default=Votre partenaire numérique de confiance depuis 2010.|label=Accroche|group=hero}}

{{slot:hero_cta_label|type=text|default=Nous contacter|label=Libellé du bouton|group=hero}}
Résultat — Le client voit dans le Studio un panneau « Hero » comportant quatre champs (titre, accroche, URL du bouton, libellé du bouton). Aucun HTML à modifier de son côté. Anatomie d'un token de slot {{slot:|type=|attribut1=valeur1|attribut2=valeur2}} Élément Obligatoire Description {{slot: Oui Préfixe fixe qui déclare un slot. Identifiant Oui Unique par page. Caractères acceptés : minuscules, chiffres, tiret bas. 64 caractères maximum. type= Oui text, textarea, richtext, image, url, number, select, bool, icon, color. default= Recommandé Valeur de repli si le slot n'est pas encore édité. label= Recommandé Libellé affiché à l'éditeur dans le Studio. group= Facultatif Regroupe les slots dans une section de l'interface. help= Facultatif Aide affichée sous le champ. maxlength= Facultatif Limite de caractères pour text et textarea. options= Si type=select Liste CSV des valeurs possibles. Conseil — La grammaire complète est détaillée au Chapitre 19. Où placer un slot Un slot peut être placé à de nombreux endroits dans votre HTML. Dans le contenu d'une balise (cas le plus fréquent)

{{slot:title|type=text|default=Bienvenue}}

Dans un attribut HTML ... ...
Dans une chaîne de classes CSS À ne pas faire — Ne placez pas un slot dans un commentaire HTML, dans un bloc