# Templates de sites préfabriqué

Les templates de sites préfabriqués transforment InfraSStudio en kit complet de mise en route. En quelques minutes, un site Dolibarr Website vide devient un site corporate ou éditorial opérationnel, avec catalogue produits, blog, formulaire de contact et neuf pages cousues sur un design moderne. Aucun code à toucher, aucune ligne de configuration à éditer : Dolibarr crée le site, et InfraSStudio applique le reste en arrière-plan dès le prochain chargement d'une page admin.

### <span style="color: rgb(35, 111, 161);">Deux univers de design</span>

<span style="white-space: pre-wrap;">Le module livre deux templates aux esthétiques opposées, conçus pour deux types de positionnement : </span>**Vibrant**<span style="white-space: pre-wrap;"> pour une présence corporate énergique, </span>**Editorial**<span style="white-space: pre-wrap;"> pour un ton de revue ou de cabinet de conseil. Chaque template embarque le même socle fonctionnel — neuf pages, un catalogue produit, un blog dynamique, un formulaire de contact branché sur le pipeline InfraSStudio — mais sa charte typographique et sa palette diffèrent radicalement.</span>

<table id="bkmrk-templatedesignciblev" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col></col><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Template

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Design

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Cible

</th></tr><tr><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">**Vibrant**`<span class="editor-theme-code">website_infrasstudio-vibrant.zip</span>`

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Dégradés violet → orange, typographie Inter avec touches manuscrites Caveat, hero plein écran, CTA en pilule, cartes avec ombre douce.

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">B2C, agences, lancements produit, communication énergique.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">**Editorial**`<span class="editor-theme-code">website_infrasstudio-editorial.zip</span>`

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Fond sombre charcoal, typographie Playfair Display serif, layouts asymétriques, accents orange minimalistes.

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Cabinet de conseil, publication éditoriale, contenu premium, signature graphique forte.

</td></tr></tbody></table>

##### **Les neuf pages livrées**

Chaque template fournit un site complet et cohérent, prêt à être rempli avec votre propre contenu. Les pages sont déjà reliées entre elles par la navigation, et le catalogue ainsi que le blog sont dynamiques : ils s'alimentent automatiquement depuis les produits Dolibarr et les articles publiés, sans aucune édition de gabarit.

<table id="bkmrk-pager%C3%B4lemenunavigati" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.93em;"><colgroup><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.5rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Page

</th><th class="align-left" style="padding: 0.5rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Rôle

</th></tr><tr><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">`<span class="editor-theme-code">menu</span>`

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">Navigation principale (logo, cinq liens, CTA).

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">`<span class="editor-theme-code">footer</span>`

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">Pied de page en quatre colonnes avec réseaux sociaux.

</td></tr><tr><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">`<span class="editor-theme-code">index</span>`

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">Page d'accueil : hero, trois services mis en avant, extrait dynamique du catalogue.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">`<span class="editor-theme-code">about</span>`

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">Page « À propos » : histoire de l'entreprise et trois valeurs.

</td></tr><tr><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">`<span class="editor-theme-code">catalog</span>`

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);"><span style="white-space: pre-wrap;">Catalogue produit dynamique, alimenté depuis </span>

`<span class="editor-theme-code">llx_product</span>`

<span style="white-space: pre-wrap;"> avec filtres par univers et type.</span>

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">`<span class="editor-theme-code">product-detail</span>`

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);"><span style="white-space: pre-wrap;">Fiche produit unique servie automatiquement par les wrappers </span>

`<span class="editor-theme-code">solution-<ref>.php</span>`

.

</td></tr><tr><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">`<span class="editor-theme-code">blog</span>`

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">Index blog : liste dynamique des articles publiés.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">`<span class="editor-theme-code">blog-welcome</span>`

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">Article de démonstration prêt à éditer, sert d'exemple pour le rédacteur.

</td></tr><tr><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">`<span class="editor-theme-code">contact</span>`

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">Page contact avec un formulaire branché sur le pipeline complet (tiers + ticket + notifications).

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">Chaque template comporte une soixantaine de slots éditables, fournis avec leur valeur par défaut en français et leur traduction anglaise pré-remplie via l'attribut </span>`<span class="editor-theme-code">default_en=...</span>`. Un rédacteur peut écraser n'importe quelle valeur sans toucher au HTML.

### <span style="color: rgb(35, 111, 161);">Importer un template</span>

Les templates apparaissent dans la liste native des modèles de site de Dolibarr — aucun outil tiers n'est nécessaire. La procédure est identique à celle d'un template officiel Dolibarr :

1. <span style="white-space: pre-wrap;">Ouvrir </span>**Module Site Internet → Nouveau site → Choisir un modèle**.
2. <span style="white-space: pre-wrap;">Sélectionner </span>`<span class="editor-theme-code">website_infrasstudio-vibrant</span>`<span style="white-space: pre-wrap;"> ou </span>`<span class="editor-theme-code">website_infrasstudio-editorial</span>`<span style="white-space: pre-wrap;"> dans la galerie.</span>
3. <span style="white-space: pre-wrap;">Donner un identifiant au site (par exemple </span>`<span class="editor-theme-code">monsite</span>`) et valider.

<span style="white-space: pre-wrap;">Dolibarr décompresse le ZIP, crée le site dans </span>`<span class="editor-theme-code">llx_website</span>`<span style="white-space: pre-wrap;">, dépose les neuf pages dans </span>`<span class="editor-theme-code">llx_website_page</span>`<span style="white-space: pre-wrap;"> et copie les SVG placeholders dans les médias du site. À ce stade, le site existe mais n'est pas encore exploitable : il faut que la pipeline d'auto-configuration tourne pour que tout soit aligné.</span>

**Note — Modèles non visibles —**<span style="white-space: pre-wrap;"> Si vous ne voyez pas les templates InfraSStudio dans la galerie, ouvrez </span>**Outils → InfraS → InfraSStudio → Configuration**<span style="white-space: pre-wrap;"> et cliquez sur </span>**« Rafraîchir les modèles »**<span style="white-space: pre-wrap;">. Le module recompresse alors les dossiers </span>`<span class="editor-theme-code">doctemplates/websites/</span>`<span style="white-space: pre-wrap;"> et les place dans </span>`<span class="editor-theme-code">DOL_DATA_ROOT/doctemplates/websites/</span>`<span style="white-space: pre-wrap;"> où Dolibarr les scanne pour la galerie. Utile après une mise à jour du module ou un déplacement de fichiers.</span>

### <span style="color: rgb(35, 111, 161);">Auto-configuration plug-and-play</span>

Au prochain chargement d'une page d'administration Dolibarr (par exemple l'éditeur du site qui s'ouvre juste après l'import), un hook InfraSStudio détecte que le site embarque un manifest de seed encore non appliqué. La pipeline d'auto-configuration se déclenche alors automatiquement et exécute sept étapes consécutives en quelques secondes :

<table id="bkmrk-%C3%89tapeeffetcat%C3%A9gories" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.93em;"><colgroup><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.5rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Étape

</th><th class="align-left" style="padding: 0.5rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Effet

</th></tr><tr><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">**Catégories**

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">Crée les catégories produit nécessaires si elles n'existent pas (lookup idempotent sur le label).

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">**Produits démo**

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">Crée six produits factices catégorisés, avec traductions FR/EN, badges, extrafields. Permet au catalogue d'être immédiatement peuplé.

</td></tr><tr><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">**Médias**

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);"><span style="white-space: pre-wrap;">Enregistre les SVG placeholders dans </span>

`<span class="editor-theme-code">llx_infrasstudio_media</span>`

<span style="white-space: pre-wrap;"> avec leur alt par locale.</span>

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">**Constantes**

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);"><span style="white-space: pre-wrap;">Pose </span>

`<span class="editor-theme-code">INFRASSTUDIO_WEBSITE_KEY</span>`

<span style="white-space: pre-wrap;"> et </span>

`<span class="editor-theme-code">INFRASSTUDIO_PUBLIC_DOCROOT</span>`

<span style="white-space: pre-wrap;"> avec auto-détection du docroot Apache (cascade en cinq niveaux, voir le chapitre Constantes).</span>

</td></tr><tr><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">**Site géré**

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);"><span style="white-space: pre-wrap;">Ajoute le site à </span>

`<span class="editor-theme-code">INFRASSTUDIO_MANAGED_SITES</span>`

<span style="white-space: pre-wrap;"> pour qu'il apparaisse dans le Studio.</span>

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">**Patch des gabarits**

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);"><span style="white-space: pre-wrap;">Insère dans chaque </span>

`<span class="editor-theme-code">pageN.tpl.php</span>`

<span style="white-space: pre-wrap;"> l'invocation du moteur de slots, avant le rendu final de Dolibarr.</span>

</td></tr><tr><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);">**Scan des slots + wrappers**

</td><td style="padding: 0.5rem; border: 1px solid rgb(229, 231, 235);"><span style="white-space: pre-wrap;">Détecte les tokens </span>

`<span class="editor-theme-code">{{slot:...}}</span>`

<span style="white-space: pre-wrap;"> dans le HTML, peuple </span>

`<span class="editor-theme-code">llx_infrasstudio_slot</span>`

<span style="white-space: pre-wrap;">, génère les wrappers </span>

`<span class="editor-theme-code">solution-<ref>.php</span>`

.

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">Un message </span>`<span class="editor-theme-code">setEventMessages</span>`<span style="white-space: pre-wrap;"> de Dolibarr confirme la fin de l'opération : </span>**« InfraSStudio : site auto-configuré »**. Le site est désormais consultable en public, avec ses slots résolus en valeurs par défaut, son catalogue alimenté, son formulaire de contact opérationnel et ses informations de société automatiquement injectées (nom, email, adresse) à la place des données génériques du template.

**Note — Filet de sécurité —**<span style="white-space: pre-wrap;"> Si l'import a été fait via la ligne de commande ou l'API REST (cas où le hook </span>`<span class="editor-theme-code">doActions</span>`<span style="white-space: pre-wrap;"> ne se déclenche pas), un cron horaire scanne </span>`<span class="editor-theme-code">INFRASSTUDIO_MANAGED_SITES</span>`<span style="white-space: pre-wrap;"> et applique le seed sur tout site dont le manifest n'a pas encore été appliqué. La pipeline se déclenche également à chaque connexion d'un administrateur, ce qui couvre les imports réalisés sans interaction admin immédiate.</span>

### <span style="color: rgb(35, 111, 161);">Personnaliser après import</span>

Une fois le site auto-configuré, deux interfaces se complètent pour la personnalisation.

##### **Éditeur Studio**

L'éditeur Studio (**Outils → InfraS → InfraSStudio → Éditeur**) ouvre le site dans une interface trois colonnes : arborescence des pages à gauche, aperçu live au centre, inspector de slot à droite. Le rédacteur clique sur n'importe quel élément du site dans l'aperçu pour ouvrir l'éditeur du slot correspondant — titre, paragraphe, image, icône, couleur. Aucun HTML à toucher, aucune connaissance technique requise.

##### **Supprimer les produits de démonstration**

Les six produits démo créés par le seed sont utiles pour visualiser le catalogue tout de suite, mais ils n'ont pas vocation à rester en production. L'éditeur Produits du Studio affiche un bandeau qui propose deux actions en un clic :

- **Dépublier les produits de démo**<span style="white-space: pre-wrap;"> : les produits restent dans Dolibarr mais sortent du catalogue public (</span>`<span class="editor-theme-code">infrasstudio_published=0</span>`). Réversible.
- **Supprimer les produits de démo**<span style="white-space: pre-wrap;"> : efface complètement les six produits, leurs traductions, leurs extrafields et leur liaison à la catégorie. Irréversible.</span>

<span style="white-space: pre-wrap;">Le bandeau disparaît automatiquement dès qu'aucun produit démo n'est détecté dans l'entité. Aucun risque d'effacer des produits réels — le filtre se base sur les références </span>`<span class="editor-theme-code">demo-*</span>`<span style="white-space: pre-wrap;"> posées par le seed.</span>

##### **Re-patch automatique des gabarits**

<span style="white-space: pre-wrap;">Dolibarr régénère les fichiers </span>`<span class="editor-theme-code">pageN.tpl.php</span>`<span style="white-space: pre-wrap;"> à chaque enregistrement dans son éditeur de pages — ce qui écrase notre invocation du moteur de slots. Le hook InfraSStudio intercepte ces sauvegardes (</span>`<span class="editor-theme-code">action=updatesource</span>`<span style="white-space: pre-wrap;"> ou </span>`<span class="editor-theme-code">overwritesite</span>`) et re-patche le fichier immédiatement après. Plus aucune manipulation manuelle n'est nécessaire : vous pouvez éditer librement vos pages dans Dolibarr, les slots InfraSStudio continueront de fonctionner.

### <span style="color: rgb(35, 111, 161);">Récapitulatif</span>

**Vous savez désormais :**

- Choisir entre les deux templates Vibrant et Editorial selon le positionnement souhaité.
- Importer un template depuis la galerie native du module Site Internet de Dolibarr.
- Comprendre la pipeline d'auto-configuration en sept étapes qui se déclenche au prochain chargement d'une page admin.
- <span style="white-space: pre-wrap;">Identifier les filets de sécurité (hook </span>`<span class="editor-theme-code">doActions</span>`, cron horaire, déclenchement à la connexion admin).
- Personnaliser le site importé via l'éditeur Studio.
- Nettoyer le site des produits de démonstration en un clic.