Skip to main content

Créer ses propres gabarits de page

📐 Chapitre 22 — Créer ses propres gabarits de page

Quand votre client clique sur « + Nouvelle page » dans le Studio, il choisit un gabarit de départ. Ce chapitre vous montre comment créer vos propres gabarits adaptés à la charte de votre site.

🎯 À quoi sert un gabarit ?

Un gabarit est un squelette de page avec :

  • Du HTML structuré (sections, classes CSS, balises sémantiques).
  • Des slots pré-déclarés pour les zones éditables.
  • Des valeurs par défaut pour donner une page « pleine » dès la création.
  • Des métadonnées (titre par défaut, slug, type container).

Quand le client crée une page depuis un gabarit, le module :

  1. Crée une entrée dans llx_website_page.
  2. Génère un fichier page<N>.tpl.php à partir du squelette.
  3. Crée le wrapper Apache <slug>.php.
  4. Lance un rescan de slots pour les détecter immédiatement.

📁 Structure d'un gabarit

Un gabarit est un dossier dans htdocs/custom/infrasstudio/templates/ :

templates/mon-gabarit/
├── meta.php             # Métadonnées du gabarit
└── skeleton.tpl.php     # Le squelette HTML avec slots

📝 Le fichier meta.php

Renvoie un tableau de configuration :

<?php
return array(
    'code'           => 'mon-gabarit',                    // identifiant unique
    'label'          => 'Mon Gabarit',                    // affiché dans le wizard
    'category'       => 'page',                           // page | landing | blog
    'description'    => "Description courte affichée sous le titre.",
    'icon'           => 'fa-file-lines',                  // icône FontAwesome
    'type_container' => 'page',                           // type Dolibarr Website
    'default_slug'   => 'nouvelle-page',                  // slug suggéré
);

Champ

Description

code

ID unique. Doit correspondre au nom du dossier.

label

Texte affiché dans la grille de sélection du wizard.

category

Pour grouper visuellement (page, landing, blog).

icon

Classe FontAwesome de l'icône de la tuile.

type_container

Valeur écrite dans

llx_website_page.type_container

. Standards :

page

,

blogpost

,

other

,

menu

.

default_slug

Slug suggéré dans le formulaire. Le client peut le changer.

🎨 Le fichier skeleton.tpl.php

C'est le squelette HTML, identique à un tpl.php de page Dolibarr Website normal, sauf qu'il contient des placeholders qui seront remplacés à la création.

Placeholders supportés

Placeholder

Substitué par

@@PAGEID@@

L'ID Dolibarr de la nouvelle page (ex. 42).

@@PAGEURL@@

Le slug URL final (ex.

about-keatic

).

@@ISO2@@

Le code ISO2 de la locale principale (

fr

,

en

).

🧩 Exemple complet — gabarit "page-libre"

meta.php

<?php
return array(
    'code'           => 'page-libre',
    'label'          => 'Page libre',
    'category'       => 'page',
    'description'    => 'Une page simple avec un titre et un grand champ de texte riche.',
    'icon'           => 'fa-file-lines',
    'type_container' => 'page',
    'default_slug'   => 'nouvelle-page',
);

skeleton.tpl.php

<?php // BEGIN PHP
$websitekey = basename(__DIR__);
if (! defined('USEDOLIBARRSERVER') && ! defined('USEDOLIBARREDITOR')) {
    require_once __DIR__ . '/master.inc.php';
}
require_once DOL_DOCUMENT_ROOT . '/core/lib/website.lib.php';
require_once DOL_DOCUMENT_ROOT . '/core/website.inc.php';
ob_start();
try {
// END PHP ?>
<html lang="@@ISO2@@">
<head>
    <title>{{slot:page_title|type=text|default=Nouvelle page|label=Titre SEO|group=seo}}</title>
    <meta name="description" content="{{slot:page_meta_description|type=text|default=|label=Meta description|group=seo}}" />
    <link rel="canonical" href="<?php echo $website->virtualhost; ?>/@@PAGEURL@@.php" />
</head>
<body>
    <?php includeContainer('header'); ?>
    <main class="container">
        <h1>{{slot:page_h1|type=text|default=Titre principal|label=H1|group=hero}}</h1>
        <div class="content">
            {{slot:page_body|type=richtext|default=<p>Contenu de la page.</p>|label=Contenu}}
        </div>
    </main>
    <?php includeContainer('footer'); ?>
</body>
</html>
<?php // BEGIN PHP
} catch (Exception $e) { print $e->getMessage(); }
include dol_buildpath('/infrasstudio/core/tpl/website_output.tpl.php', 0);
// END PHP ?>

✅ Le bloc final — N'oubliez pas include dol_buildpath('/infrasstudio/core/tpl/website_output.tpl.php', 0);. C'est lui qui déclenche la résolution des slots et shortcodes au rendu.

📂 Localiser vos gabarits hors du module

Si vous voulez livrer des gabarits avec votre projet client (sans modifier le module), définissez la constante :

// htdocs/conf/conf.php ou via dolibarr_set_const
$conf->global->INFRASSTUDIO_TEMPLATE_EXTRA_DIR = '/var/www/monsite/templates';

Le module scanne ce répertoire en plus de htdocs/custom/infrasstudio/templates/.

🎁 Gabarits livrés par défaut

Code

Description

page-free

Page libre avec titre + grand richtext. Pour pages ad hoc.

blog-standard

Article de blog générique avec hero, intro, body, CTA.

example-blog

Article de blog avec design moderne (hero CSS background, lead italique, image secondaire, related). Adaptable à votre charte.

example-landing

Landing page produit complète (~70 slots). Hero, problème, solution, fonctionnalités, contact, FAQ.

💡 Bonne pratique — Inspirez-vous de example-landing pour comprendre comment structurer un gabarit complexe avec ~70 slots organisés en groupes.

🎯 Bonnes pratiques pour vos gabarits

  • 📦 Préfixer tous les slots du gabarit avec un identifiant commun (ex. landing_) pour éviter les collisions entre gabarits.
  • 📂 Regrouper les slots avec group= par section logique (hero, features, contact, …).
  • 📝 Donner des valeurs par défaut représentatives — le rédacteur a un exemple à modifier plutôt qu'une page vide intimidante.
  • 🌐 Inclure les slots SEO (page_title, page_meta_description) dans tout gabarit de type page.
  • 🖼️ Inclure les balises Open Graph dans le head pour le partage social.
  • 🔗 Inclure le helper hreflang si le site est multilingue.
  • 🧪 Tester le gabarit en créant une page réelle depuis le wizard, vérifier que le rendu public est correct.

📋 Récapitulatif

✅ Vous savez maintenant :

  • Comprendre l'utilité d'un gabarit (squelette + slots + valeurs par défaut).
  • Créer un dossier templates/<code>/ avec meta.php et skeleton.tpl.php.
  • Renseigner les métadonnées (code, label, category, icon, type_container, default_slug).
  • Utiliser les placeholders @@PAGEID@@, @@PAGEURL@@, @@ISO2@@.
  • Localiser vos gabarits hors du module via INFRASSTUDIO_TEMPLATE_EXTRA_DIR.
  • Suivre les bonnes pratiques (préfixe, groupes, valeurs par défaut, SEO, multilingue).

Dernier chapitre de la Partie IV : le catalogue produit dynamique en profondeur.

Back to top