Sections dynamiques

Les sections dynamiques vous permettent de créer plusieurs instances d'une même section avec une configuration similaire, ce qui est particulièrement utile pour des éléments répétitifs comme les réseaux sociaux, les images d'un carrousel, une liste de partenaires, etc.

Utilisation de base

Pour créer des sections dynamiques, utilisez la clé iteration dans la configuration de votre section :

customize/exemple-basique.yaml

reseau_social:
    title: "Réseaux sociaux"
    sections:
        reseau:
            title: "Réseau social {i}"
            iteration: 3
            fields:
                icone:
                    label: "Icône"
                    type: "remixicon"
                url:
                    label: "URL"
                    type: "url"

Titres dynamiques

Vous pouvez personnaliser le titre de chaque section dynamique de deux manières :

1. Utilisation de {i}

Le marqueur {i} sera remplacé par le numéro de l'itération (1, 2, 3, etc.).

2. Utilisation de dynamic_title

Pour un titre plus personnalisé, utilisez dynamic_title qui fera référence à un champ de la section :

exemple-dynamic-title.yaml

reseau_social:
    title: "Réseaux sociaux"
    sections:
        reseau:
            title: "Réseau social {i}"
            iteration: 3
            dynamic_title: nom_reseau # Utilisera la valeur du champ 'nom_reseau' comme titre
            fields:
                nom_reseau:
                    label: "Nom du réseau"
                    type: "text"
                icone:
                    label: "Icône"
                    type: "remixicon"
                url:
                    label: "URL"
                    type: "url"

Exemple complet

Voici un exemple complet avec plusieurs champs et une configuration avancée :

exemple-complet.yaml

reseau_social:
    title: "Réseaux sociaux"
    description: "Configurez les liens vers vos réseaux sociaux"
    sections:
        reseau:
            title: "Réseau social {i}" # Titre par défaut avec numéro
            iteration: 5 # Crée 5 sections
            dynamic_title: "nom" # Utilise le champ 'nom' comme titre
            description: "Ajoutez jusqu'à 5 réseaux sociaux"
            fields:
                actif:
                    label: "Activer ce réseau"
                    type: "toggle"
                    default: true
                nom:
                    label: "Nom du réseau"
                    type: "text"
                    description: "Ex: Facebook, Twitter, etc."
                icone:
                    label: "Icône"
                    type: "remixicon"
                    default: "ri-global-line"
                url:
                    label: "URL complète"
                    type: "url"
                    placeholder: "https://exemple.com"
                couleur:
                    label: "Couleur d'accent"
                    type: "color_contrast"
                    default: "#3b5998" # Bleu Facebook par défaut

Récupération des valeurs

Les valeurs des sections dynamiques sont stockées sous forme de tableau dans la base de données. Vous pouvez les récupérer comme suit :

app/Controllers/MyController.php

#[Template("front_page")]
public function frontPage(){
    $socials = $this->customize()->getPanel('reseau_social', castArray: true);

    return $this->render("front-page.html.twig", compact("socials"));
}

templates/front-page.html.twig

{% for social in socials %}
    {% if social.actif %}
        <a href="{{ social.url }}" style="color: {{ social.couleur }}">
            <i class="{{ social.icone }}"></i> {{ social.nom }}
        </a>
    {% endif %}
{% endfor %}

Sélecteur CSS pour le Selective Refresh

La propriété selector d'un champ YAML permet de placer une ancre à côté de l'élément sélectionner pour prévenir que l'élément est personnalisable et surtout faire un lien vers le champs d'édition.
Pour les sections dynamiques, le placeholder {i} dans la clé selector est remplacé au runtime par data-iteration=<numéro>.

customize/carousel.yaml

carousel:
    title: "Carrousel"
    sections:
        slide:
            title: "Slide {i}"
            iteration: 5
            fields:
                titre:
                    label: "Titre"
                    type: "text"
                    selector: ".slide[{i}] .titre"

Pour l'itération 2, le sélecteur devient .slide[data-iteration=2] .titre. Dans votre template Twig, ajoutez l'attribut correspondant :

{% for slide in slides %}
    <div class="slide" {{ iteration(loop) }}>
        <p class="titre">{{ slide.titre }}</p>
    </div>
{% endfor %}

La fonction Twig iteration() retourne automatiquement data-iteration="<index>" à partir de la variable loop.

Bonnes pratiques

1. Limitez le nombre d'itérations pour des raisons de performance
2. Préremplissez les valeurs par défaut pour faciliter la configuration
3. Documentez les champs avec des descriptions claires pour les utilisateurs finaux