Tracer des Scribans dans SXA : Partie 2

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 des liens utiles
• 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)

Fonctions SXA Scriban

Les modèles Scriban ont leur propre sucre et complexité syntaxiques, décrits ici. Sitecore propose également une brève documentation sur les fonctions personnalisées qu’il implémente ici. Pour ce guide, nous utiliserons la fonction « sc_field », ainsi qu’un peu de la syntaxe et de la logique spéciales utilisées par les modèles de scriban.

La fonction de rendu de champ

Cette fonction affichera l’élément de données spécifié à partir du modèle. Si le champ est nul, il n’affichera rien. Pour notre composant de carte, cela nous permettra de rendre tous nos champs souhaités. Commençons par lancer le titre et l’image dans le champ du modèle, sans html, et voyons ce que nous obtenons :

Sans données dans le rendu, Experience Editor donnera ceci :

J’y ai mis des données, donc maintenant le front-end ressemble à ceci, avec une structure HTML comme ceci :

Un problème que nous devrions peut-être rectifier est que le texte n’est enveloppé dans rien. Cependant, par défaut, Sitecore a déjà enveloppé notre contenu dans deux divs, ce qu’il ne faut pas oublier lorsque vous réfléchissez à la façon de formater votre scriban et aux classes et éléments que vous souhaitez ajouter, le cas échéant. Ajoutons un div et une balise h3, et je modifierai légèrement la façon dont nous rendons notre image…

Et ces changements nous donneront ceci :

Maintenant, les captures d’écran ne rendent peut-être pas cela évident, mais maintenant notre image est massive. Et regardons le HTML :

Vous remarquerez que nous avons perdu beaucoup de nos données d’image précédentes. J’en parlerai plus à ce sujet dans la section des choses à faire et à ne pas faire. Modifions-le à nouveau et rendons notre lien (remplissez les champs de données avec ce que vous voulez):

Et cela devrait nous donner ceci :

Mon local a des styles préexistants qui formatent la police et le lien de certaines manières, mais le vôtre devrait ressembler quelque peu au moins dans sa structure.

Ajoutons maintenant cet état de survol du précédent. Cela causera un problème amusant pour lequel les scribans ont une excellente solution. N’hésitez pas à essayer de jouer avec le scriban et le style pour obtenir la fonctionnalité par vous-même, mais si vous voulez passer directement à la partie liée au scriban, copiez et collez simplement les morceaux de code suivants :

{{sc_field i_item "CardImage"}}
<div class="content-container">
   <h3>{{sc_field i_item "CardText"}}</h3>
   {{sc_field i_item "CardLink"}}
</div>

Et le style

.card-demo {
  max-width: clamp(250px, 350px, 650px);
  height: 200px;
  overflow: hidden;
  .component-content {
    position: relative;
    height: inherit;
    width: inherit;
  }
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .content-container {
    display: none;
    position: absolute;
    background-color: #bababa;
  }
  &:hover {
    img {
      display: none;
    }
    .content-container {
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0.5em;
      height: 100%;
      width: 100%;
    }
  }
}

Maintenant, essayez d’aller dans l’éditeur d’expérience et modifiez l’image. Il peut y avoir une méthode hacky pour accéder à l’image, mais je ne peux plus cliquer sur l’image, car la carte survole lorsque je passe la souris dessus. Cependant, vous pouvez simplement demander au scriban si vous êtes en mode Experience Editor :

{{ if (o_pagemode.is_experience_editor_editing) }}

Syntaxiquement, vous devez associer this if avec un ‘end’, et éventuellement un ‘else’. Voici un exemple de ce à quoi cela pourrait ressembler :

De plus, Sitecore ajoute « scEnabledChrome » à la div de niveau supérieur en EE. Ceci est utile si vous souhaitez appliquer des styles spécifiques. Dans notre cas, je modifierai simplement la sélection d’image pour qu’elle ne se produise que si une certaine classe est présente, que je supprimerai dans EE. Cela me laisse avec une structure comme celle-ci:

Et avec ces changements, nous obtenons maintenant un affichage de texte et d’image statique dans l’éditeur d’expérience, mais un comportement de survol dynamique dans le cas contraire.

Quelques choses à faire et à ne pas faire

1. Accédez aux éléments directement le moins possible.
   1. La modification que j’ai apportée précédemment à l’image accède directement à l’élément de données et extrait l’URL brute. Cela a quelques problèmes.
      1. Si l’image est nulle ou n’existe plus dans la solution, cela renverra une erreur désagréable à la section de la page avec le rendu.
      2. Aucune autre donnée, à l’exception de celles qui ont été extraites directement, ne sera traitée. Dans le cas d’une image, vous perdez les balises alt, les paramètres de largeur et de hauteur et d’autres éléments qu’un auteur de contenu peut ajouter à une image. Si vous affichez des champs de texte enrichi ou des liens, des problèmes similaires peuvent survenir.
   2. Ce faisant empêche Les auteurs de contenu peuvent modifier le champ directement dans l’éditeur d’expérience.

2. N’associez pas les balises d’ouverture et de fermeture dans des vérifications if distinctes.
   1. Dans le cas de vérifier si un utilisateur est en mode Experience Editor ou non, la méthode suivante deviendra extrêmement difficile à suivre très rapidement :
      1. 
         1. Je n’ai jamais vu personne conseiller de le faire de la manière ci-dessus, mais je l’ai vu dans la nature. C’était assez difficile de travailler avec.
      2. Au lieu de cela, divisez-les. Lorsque vous avez soudainement besoin de modifier un scriban, surtout s’il s’agit d’un scriban que vous n’avez jamais vu auparavant, séparer EE et Preview rendra la résolution du bogue beaucoup plus facile :
         1. 

3. SI l’auteur du contenu doit pouvoir transmettre des attributs personnalisés à l’élément, ne transmettez pas ces attributs en tant qu’arguments.
   3. 
      1. Cela ajoutera « cta-class » à l’image, mais le dialogue suivant : sera remplacé par l’un des attributs transmis sur le scriban.

Quelques liens utiles

C’est tout pour le moment! Recherchez mes prochains blogs où je plonge dans des fonctions plus avancées, je vais lier quelques articles sur la façon d’écrire votre propre fonctionnalité personnalisée et montrer comment utiliser certaines des fonctions personnalisées que les gens de Perficient ont créées. Ci-dessous, j’ai répertorié quelques liens utiles pour faire progresser votre propre saillance dans le traçage des scribans.

La documentation du scriban de Sitecore

Le langage de template scriban

Partie 1