Rédaction Rédaction sur SXA – Perfect Blogs

Salutations ! Vous cherchez donc à assembler la science du scribe scribans dans SXA ? Ne cherchez pas plus loin, car ici, dans ce guide en quatre parties, je détaillerai la puissance et le contrôle incroyables qu’offrent les scribans dans SXA.

Le guide en quatre parties

• Partie 1 – Que sont les scribans, cloner la promo, ajouter un scriban
• Partie 2 – Fonctions de base, quelques choses à faire et à ne pas faire, et liens utiles (à déterminer)
• Partie 3 – Plus de fonctions scriban et Sitecore, y compris la boucle et le rendu des pages à partir d’un dossier (à déterminer)
• Partie 4 : Logique de scriban avancée et manigances visuelles (à déterminer)

Que sont les Scribans dans SXA ?

Bien que je détaille un bref aperçu d’eux, je recommande fortement ce guide fantastique de Lustre Ramakant sur ce que sont les scribans.

En bref, les scribans sont disponibles en tant que définitions pour les variantes de rendu, où vous spécifiez votre propre structure HTML personnalisée et définissez comment et où les données de votre modèle sont gérées.
Les Scribans ont un langage et une syntaxe spécifiques pour extraire les données de la source de données et combiner la logique plus html/css/js dans un seul fichier. (Vous pouvez en fait mettre les trois dans le même fichier, je vais continuer et déconseiller cela dans la plupart des cas).

Les bases de SXA

Dans les deux premières parties, nous allons apprendre à construire une carte qui ressemble à ceci :

Par défaut / Survol

État de la carte par défaut

État de la carte au survol

Éliminons d’abord les aspects de base de Sitecore. Nous allons cloner le composant Promo pour obtenir l’échafaudage. Pour ce faire, accédez au modèle de rendu Promo, cliquez avec le bouton droit de la souris et sélectionnez cloner.

Lors du clonage :
• Nommez le rendu comme vous le souhaitez, je le nomme Card Demo
• Le nom CSS que vous lui donnez sera le nom de classe de niveau supérieur que l’élément div recevra
• Je le place à l’emplacement par défaut de Sitecore

• Faire une copie du modèle de rendu

• Faire une copie du modèle de source de données

• Gardez le fichier cshtml identique. Nous n’aurons pas besoin d’y toucher à la manière typique de SXA (et parce que ~scribans~)

Une fois cela fait, vous devriez avoir les bases du composant. Pour l’instant, je ne fais que renommer quelques-uns des champs du modèle de données, mais ce n’est pas nécessaire, assurez-vous simplement de les référencer correctement dans le scriban.

Avec cela à l’écart, nous passons à notre rendu, où la superbe simplicité des scribans nous évitera beaucoup de gribouillis.

Avant cela, cependant, il est temps de formater un éditeur de votre choix de sorte qu’avec lui, vous puissiez éditer des scribans. Par défaut, Sitecore fournit une petite zone de texte avec une pléthore de fonctionnalités de code telles que :

• This

• That

• And this

qui ne suffira pas. Je vais montrer comment configurer Visual Studio Code pour modifier les scribans, ce que je recommande vivement.

Configuration facultative de VSCode pour la gravure de Scribans dans SXA

Sélectionnez l’icône d’extension dans la barre latérale et recherchez « scriban ».

Je recommande d’installer à la fois l’extension scriban de Xoofx et l’extension scriban d’Adam Najmanowicz.

Une fois que vous les avez installés et activés, créez un fichier et donnez-lui l’extension « .scriban-html ». Essayez de coller les lignes suivantes pour voir si cela fonctionne :

<div class="wrapper ">
     {{ if (o_pagemode.is_experience_editor_editing) }}
          <div class="edit-mode">

Puisque l’extension est installée, elle devrait apparaître dans un motif de couleur comme celui-ci :

Ce qui rendra beaucoup plus facile de voir ce que nous faisons.

Ajout de la variante Scriban dans SXA

Maintenant, accédez à la variante de rendu. Vous devriez pouvoir le trouver via un chemin ressemblant à ceci : /sitecore/Content/[tenant]/[site]/Accueil/Présentation/Variantes de rendu.

Insérez une nouvelle variante :

Modifiez les rendus compatibles afin que cette définition de variante soit compatible avec le modèle Card Demo :

Ajoutez maintenant une définition de variante :

Et ajoutez le scriban :

En passant, il est souvent utile de nommer de manière unique, car les systèmes de contrôle de contenu comme unicorn nommeront le fichier yml après lui. Parcourir une liste géante de « Scriban.yml » ou « Default.yml » n’est pas particulièrement utile.

Nous sommes maintenant prêts. Découvrez comment utiliser les fonctions scriban et gérer l’expérience de l’éditeur d’expérience dans la partie 2 !

Liens

Tracer des Scribans dans Sitecore selon Sitecore

La langue scribane