Skip to main content

CHAPITRE 19 — La grammaire des slots en détail

📚 Chapitre 19 — La grammaire des slots en détail

Référence exhaustive de tous les types de slot et de leurs attributs. Gardez ce chapitre sousà laportée de main quandlors vousde annotezl'annotation d'un template.

📐

Format général

{{slot:<name>|type=<type>|default=<value>|label=<text>|group=<section>|help=<text>|maxlength=<int>|options=<csv>}}

Tous les attributsattributs, saufà l'exception de name et type, sont optionnels.facultatifs. L'ordre est libre. Le séparateur est le pipecaractère |.pipe.

📜

Règles syntaxiques

Règle

Détail

Identifiant

[a-z0-9_]+

, max 64 caractères.caractères maximum. Pas de tirets, pas de majuscules.

Unicité

Unique par page. Deux slots avec le même nom danssur la même page =produisent warningun avertissement au scan.

Pas d'espaces

PasAucun d'espace de chaquepart côtéet d'autre du signe

=

. PasAucun d'espace dans les noms d'attributs.

Échappement

Le pipe

|

à dansl'intérieur d'une valeur n'est pas supporté.pris en charge. Évitez-le dans les valeurs

default

.

Multi-lignesUne seule ligne

Un token de slot tient sur une seule ligne. Pas deAucun saut de ligne àne l'intérieur.doit y être présent.

🎨

Les 10dix types de slot

1️⃣
Type text — Texte court

Champ d'une seule ligne, sans formatage.mise en forme.

<h1>{{slot:hero_title|type=text|default=Bienvenue|label=Titre principal|maxlength=80}}</h1>
  • UI StudioInterface : inputchamp de saisie simple.
  • Idéal pour : titres, libellés, CTA,boutons d'appel à l'action, copyright.
  • Compteur de caractères affiché si maxlength est défini.

2️⃣
Type textarea — Texte long brut

Multi-lignes, sans formatagemise en forme HTML.

<p class="lead">{{slot:hero_lead|type=textarea|default=Une accroche.|label=Accroche|maxlength=300}}</p>
  • UI StudioInterface : textarea.zone de texte multi-lignes.
  • Les \nretours deviennentà la ligne sont automatiquement convertis en balises <br> automatiquement au rendu.
  • Idéal pour : accroches, courts paragraphes simples.

3️⃣
Type richtext — Texte riche WYSIWYG

Mise en forme complète via CKEditor.

<div class="post-body">
    {{slot:post_body|type=richtext|default=<p>Contenu de l'article.</p>|label=Corps de l'article}}
</div>
  • UI StudioInterface : éditeur CKEditor (Format, Bold/Italic,gras, Listes,italique, Liens,listes, Couleurs,liens, Alignement,couleurs, …alignement, etc.).
  • Idéal pour : corps d'articles, descriptions longues, conditions générales.
  • La valeur stockée contient du HTML (<p>, <strong>, etc.).

4️⃣
Type image — Média image

<img src="{{slot:hero_image|type=image|default=/medias/hero.jpg|label=Image hero}}" alt="...">
  • UI StudioInterface : inputchamp texte +texte, bouton pickerde médiasélection +dans la bibliothèque, bouton retirerde +suppression vignette.et vignette d'aperçu.
  • Stocke soit une URL absolue, soit un shortcode {{media:ref=X.url}}.
  • Non traduisible par défaut (: la même image est servie dans toutes les langues).langues.

5️⃣
Type url — Lien

<a href="{{slot:hero_cta_url|type=url|default=/contact|label=URL du bouton}}">...</a>
  • UI StudioInterface : champ texte avec validation URL légère.
  • Idéal pour : URL de bouton, liens vers les réseaux sociaux, URLsURL de partage.

6️⃣
Type icon — Icône FontAwesome

{{slot:feature_1_icon|type=icon|default=fa-solid fa-rocket|label=Icône feature 1}}
  • UI StudioInterface : inputchamp classeclasse, +sélecteur colorde pickercouleur, + 20vingt icônes rapidesproposées +en previewaccès live.rapide, aperçu en direct.
  • Stockage en JSON : {"class":"fa-solid fa-star","color":"#fbbf24"}.
  • Rendu : <i class="fa-solid fa-star" style="color:#fbbf24"></i>.
  • SanitiséSécurisé : whitelistliste blanche sur la classe (a-zA-Z0-9_-) et regexexpression hexadécimal.régulière hexadécimale sur la couleur.

7️⃣
Type color — Couleur

<section style="background-color:{{slot:section_bg|type=color|default=#19052d|label=Couleur de fond}}">
  • UI StudioInterface : colorsélecteur pickerde HTML5couleur +HTML5, champ hex texte +hexadécimal, bouton «de Défautretour ».à la valeur par défaut.
  • Format strict : #RRGGBB ou #RRGGBBAA (avec transparence).
  • Non traduisible.traduisible.

8️⃣
Type number — Nombre

<span class="stat">{{slot:stats_clients|type=number|default=42|label=Nombre de clients}}</span>

9️⃣
Type bool — Booléen

<?php if ('{{slot:hero_show_badge|type=bool|default=1|label=Afficher le badge}}'): ?>
    <span class="badge">Nouveau</span>
<?php endif; ?>
  • UI StudioInterface : checkbox.case à cocher.
  • Valeur : 0 ou 1.1.

🔟
Type select — Liste déroulante

<section class="hero hero-{{slot:hero_layout|type=select|options=light,dark,gradient|default=light|label=Style du hero}}">
  • UI StudioInterface : dropdown.menu déroulant.
  • ValeurLes valeurs disponibles sont définies dans options (CSV obligatoire).

🎁

Valeurs par défaut spéciales

default=@lang:KEY — Résolution via les fichiers .lang
de langue

QuandLorsque votre site utilise déjà des fichiers .lang Dolibarr (cas typique pour les sites multilingues existants), vous pouvez réutiliser les clés au lieu de les dupliquer en dur dans les slots :

<h1>{{slot:hero_title|type=text|default=@lang:HeroTitle|label=Titre du hero}}</h1>

Au moment du rendu, le module résout via $langs->trans('HeroTitle') selon la localelangue du visiteur. Les fichiers .lang du site présents dans DOL_DATA_ROOT/<entity>/website/<ref>/langs/ sont chargés automatiquement.

✅ Cas d'usage — — Migration progressive d'un site existant : vous gardezconservez vos fichiers .lang telsen quels,l'état, vous ajoutez les slots, et le client peut soit éditer dans le Studio (override)surcharge), soit garderconserver la traduction du .lang (canonique).

📊 Résumé

Récapitulatif des types et de leur traduisibilité

Type

UIInterface

Traduisible

text

InputChamp de saisie

✅ Oui

textarea

TextareaZone de texte

✅ Oui

richtext

CKEditor

✅ Oui

image

PickerSélecteur de média

❌ Non

url

InputChamp de saisie

❌ Non

icon

Classe +et colorsélecteur pickerde couleur

❌ Non

color

ColorSélecteur pickerde couleur

❌ Non

number

InputChamp numérique

⚠️ Oui (rare)

bool

CheckboxCase à cocher

❌ Non

select

DropdownMenu déroulant

❌ Non

⚠️

Pièges fréquents

⚠️ Slots dans des attributs JSON inlineintégrés — — Si vous avez du JSON inlineintégré dans une balise (par exemple data-config="{...}"), n'y mettezplacez pas de slot. Les doubledoubles accolades {{ sont aussi un délimiteur Mustache et risquent de casser les libsbibliothèques JSJavaScript qui parseraient lece JSON.

⚠️ Identifiant trop long — — La limite est de 64 caractères. Au-delà, le scanner rejette silencieusementsilencieusement, (visiblece avecque met en évidence l'option --lint).

⚠️ Espaces autour des = — — Le scanner refuserejette type = text. ToujoursUtilisez toujours type=text.

⚠️ Caractère pipe dans une valeur — — default=A|B casse le parser.l'analyseur. Utilisez une autre séparationséparation, ou unlaissez default vide +et saisissez la valeur via le Studio.

📋

Récapitulatif

✅ Vous savez maintenantdésormais :

  • La syntaxe complète d'un token de slot.
  • Les 10dix types disponibles et leurs UIsinterfaces respectives.
  • La résolution @lang:KEY pour réutiliser les fichiers .lang Dolibarr.
  • Quels types sont traduisibles ou non.
  • Les pièges syntaxiques fréquents.

AuLe prochainchapitre chapitre, onsuivant aborde les shortcodesshortcodes, qui injectent des données Dolibarr dans le HTML.

Back to top