octobre 25, 2023

Utilisation des paramètres de rendu sur un composant XM Cloud / Blogs / Perficient

Qu’en est-il des paramètres de rendu ?

J’ai récemment réalisé un POC en utilisant les paramètres de rendu dans un composant de XM Cloud. Dans ce blog, je décrirai mon approche, les problèmes rencontrés et comment je les ai surmontés.

Cependant, il existe certaines circonstances où les choses sont un peu plus complexes (qu’elles ne devraient l’être). Le cas d’utilisation de ce POC particulier est que nous souhaitons ajouter une couleur d’arrière-plan à un Texte riche composant. Le but est d’appliquer ce style comme paramètre supplémentaire au composant dans Sitecore et de le transmettre au front-end.

Les technologies:

Sitecore XM Cloud

Éditeur de pages Sitecore

Composants Nextjs

Créer des paramètres de rendu

Pour ajouter des paramètres supplémentaires à un composant (par exemple pour des éléments tels que des styles supplémentaires, des données ou tout ce qui est personnalisé), Sitecore fournit une fonctionnalité appelée « Paramètres de rendu standard ». Il s’agit d’un modèle Sitecore OOTB destiné à cet usage spécifique. Nous dériverions notre modèle personnalisé de `/sitecore/templates/System/Layout/Paramètres de rendu/Paramètres de rendu standard`. Pour ce POC, j’ai créé un modèle de paramètres qui serait un DropLink pointant vers une liste d’éléments de « Couleurs » que nous pouvons utiliser pour notre style d’arrière-plan. Ce faisant, cela donnerait aux auteurs de contenu le choix des couleurs parmi lesquelles choisir lors de l’édition.

La source de données pour « textColor » est un répertoire d’éléments prédéfinis « Text Color ».

Rp2

*Note: L’un des inconvénients techniques de cette approche est que la sélection d’un élément dans un champ de source de données DropLink récupère l’ID de l’élément et non sa valeur. Plus d’informations sur la façon dont j’ai surmonté ce problème plus loin.

Composant frontal

Pour le composant Rich Text personnalisé,

Dans Sitecore, j’ai cloné l’existant Texte riche rendu et je l’ai renommé Texte riche en couleurs
Dans le dossier des composants sous ../src/MonSite/src/componentsJ’ai copié « Texte enrichi.tsx » à « Texte riche en couleurs.tsx«

Ensuite, nous modifions le code comme suit :

import React from 'react';
import { Field, RichText as JssRichText } from '@sitecore-jss/sitecore-jss-nextjs';
interface Fields {
  Text: Field<string>;
}
export type RichTextProps = {
  params: { [key: string]: string };
  fields: Fields;
};
export const Default = (props: RichTextProps): JSX.Element => {
  const text = props.fields ? (
    <JssRichText field={props.fields.Text} />
  ) : (
    <span className="is-empty-hint">Rich text</span>
  );
  const id = props.params.RenderingIdentifier;
  return (
    <div
      className={`component rich-text ${props.params.styles.trimEnd()}`}
      id={id ? id : undefined}
    >
      <div className="component-content">
        {text}
        <style jsx>{`
          .component-content {
            background-color: ${props.params.textColor ? props.params.textColor.trimEnd() : '#FFF'};
          }
        `}</style>
      </div>
    </div>
  );
};

Ici, nous attendons la valeur du paramètre textColor à envoyer dans les accessoires du composant comme props.params.textColor .

Maintenant que ces éléments sont en place, j’ai ajouté ce composant à une page via Sitecore Experience Editor standard.

Connexion de Pages Editor à votre réseau local

Ensuite je me suis connecté pages.sitecore.io à mon environnement local en ajoutant cette entrée dans « Stockage local » dans votre navigateur et accédez à pages.sitecore.io

"Sitecore.Pages.LocalXmlCloudUrl": "https://xmcloudcm.localhost/"

Maintenant, nous actualisons l’éditeur de pages

Jour de paie

Comme nous pouvons le voir, l’éditeur de pages affiche correctement les éléments du DropLink, afin que je puisse sélectionner la couleur. Le champ apparaît donc dans l’éditeur de pages, mais la couleur sélectionnée n’est pas appliquée. Vérifions le terrain de jeu graphQL pour voir quelles sont les données envoyées.

Voir dans le terrain de jeu graphQL :

Graphql1

Nous voyons donc le champ « textColor » apparaître en tant que paramètre, mais la valeur est l’ID de l’élément de couleur sélectionné, pas la valeur. Comment surmonter cet obstacle ?

Recherche et solution

J’ai trouvé cet article de Any Paz

https://andypaz.com/2021/01/05/serializing-rendering-parameters-in-the-layout-service/ ce qui m’a conduit dans la bonne direction pour comprendre la sérialisation des paramètres de rendu, mais le résultat souhaité n’est pas d’obtenir l’élément sérialisé sous forme de chaîne, mais la valeur réelle à utiliser pour la couleur d’arrière-plan, c’est-à-dire la valeur Hex stockée dans le champ de valeur. . Ainsi, après quelques recherches, j’ai réalisé que c’était en fait un bon début, mais qu’il nécessitait quelques modifications.

1. J’ai créé un modèle de données qui régit la sérialisation d’un élément dans Sitecore. De cette façon, je peux déterminer ce que je veux sérialiser.
2. J’ai créé un processeur de pipeline personnalisé et remplacé le pipeline RenderJsonRendering.Initialize existant pour l’étendre afin de sérialiser uniquement l’élément marqué dans Sitecore pour sérialiser.

J’ai rendu ces deux modifications suffisamment génériques pour appliquer des cas d’utilisation plus larges pour la sérialisation personnalisée des paramètres de rendu personnalisés.

using System.Collections.Generic; 
using Sitecore.Data; 
using Sitecore.Data.Items; 
using System.Web; 
using Sitecore.Abstractions; 
using Sitecore.LayoutService.Configuration; 
using Sitecore.LayoutService.ItemRendering; 
using Sitecore.LayoutService.Presentation.Pipelines.RenderJsonRendering; 
using Sitecore.XA.Feature.LayoutServices.Integration.Pipelines.TransformParameters; 
using System.Linq; 
using Newtonsoft.Json.Linq; 
using Sitecore.Mvc.Presentation; 
using System; 
using Sitecore.LayoutService.Serialization; 
namespace MySite.Foundation.LayoutService.PipelineProcessors 
{ 
    public class CustomInitialize : Initialize 
    { 
        IRenderingConfiguration _renderingConfiguration; 
        protected BaseCorePipelineManager PipelineManager; 
        public CustomInitialize(IConfiguration configuration, BaseCorePipelineManager pipelineManager)  
            : base(configuration) 
        { 
            PipelineManager = pipelineManager; 
        } 
        protected override RenderedJsonRendering CreateResultInstance(RenderJsonRenderingArgs args) 
        { 
            string componentName = base.GetComponentName(args.Rendering?.RenderingItem?.InnerItem); 
            _renderingConfiguration = args.RenderingConfiguration; 
            //Note: the constructor below is different for Sitecore 9.x and 10. The below will only work in Headless Services for Sitecore 10. 
            RenderedJsonRendering rendering = new RenderedJsonRendering 
            { 
                ComponentName = componentName ?? args.Rendering.RenderingItem.Name, 
                DataSource = ((!string.IsNullOrWhiteSpace(args.Rendering.DataSource)) ? args.Rendering.DataSource : args.Rendering.RenderingItem.DataSource), 
                RenderingParams = SerializeRenderingParams(args.Rendering), 
                Uid = args.Rendering.UniqueId 
            }; 
            TransformParametersArgs transformParametersArgs = new TransformParametersArgs 
            { 
                Rendering = rendering 
            }; 
            transformParametersArgs.CustomData.Add("SupportedParameters", GetAllKeys(args.Rendering.Properties["par"])); 
            PipelineManager.Run("transformParameters", transformParametersArgs); 
            return transformParametersArgs.Rendering; 
        } 
        protected virtual IDictionary<string, string> SerializeRenderingParams(Rendering rendering) 
        { 
            IDictionary<string, string> paramDictionary = rendering.Parameters.ToDictionary(pair => pair.Key, pair => pair.Value); 
            foreach (string key in paramDictionary.Keys.ToList()) 
            { 
                if (!ID.TryParse(paramDictionary[key], out var itemId)) continue; 
                Item item = rendering.RenderingItem.Database.GetItem(itemId); 
                //Check if serializable 
                if (item.Fields["SerializeItem"]!=null && item.Fields["SerializeItem"].Value == "1") 
                { 
                    paramDictionary[key] = JObject.Parse(_renderingConfiguration.ItemSerializer.Serialize(item, new SerializationOptions() { DisableEditing = true }))["Value"]?.Value<string>("value"); 
                } 
                
            } 
            return paramDictionary; 
        } 
        protected virtual string[] GetAllKeys(string par) 
        { 
            if (string.IsNullOrEmpty(par)) 
            { 
                return Array.Empty<string>(); 
            } 
            List<string> list = new List<string>(); 
            string[] array = HttpUtility.UrlDecode(par).Split('&'); 
            for (int i = 0; i < array.Length; i++) 
            { 
                string[] array2 = array[i].Split('='); 
                if (array2.Length != 0) 
                { 
                    list.Add(array2[0].Trim()); 
                } 
            } 
            return list.ToArray(); 
        } 
    } 
}

Un patch rapide dans le pipeline

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"> 
        <sitecore> 
            <pipelines> 
                <group groupName="layoutService"> 
                    <pipelines> 
                        <renderJsonRendering> 
                            <processor type="MySite.Foundation.LayoutService.PipelineProcessors.CustomInitialize, MySite" resolve="true" 
                                       patch:instead="*[@type="Sitecore.XA.Feature.LayoutServices.Integration.Pipelines.RenderJsonRendering.Initialize, Sitecore.XA.Feature.LayoutServices.Integration"]"/> 
                        </renderJsonRendering> 
                    </pipelines> 
                </group> 
            </pipelines> 
        </sitecore> 
</configuration>

Maintenant, quand je regarde les résultats qui reviennent dans le terrain de jeu graphQL, nous voyons la valeur renvoyée

Graphql2

En regardant maintenant l’éditeur de pages, nous voyons quelque chose d’intéressant

Jour de paie2

L’éditeur de pages est un éditeur en direct, nous voyons donc la couleur changer immédiatement une fois que nous sélectionnons le paramètre.

Sur le site en direct, nous voyons le résultat souhaité :

Liveurl

Ce fut un POC intéressant, et j’espère découvrir des études de cas et des POC plus utiles grâce à la nouvelle offre de Sitecore XM Cloud.

En attendant la prochaine fois, restez curieux !

Source link

Blog ARC Optimizer

octobre 25, 2023

Utilisation des paramètres de rendu sur un composant XM Cloud / Blogs / Perficient

Qu’en est-il des paramètres de rendu ?

Les technologies:

Créer des paramètres de rendu

Composant frontal

Connexion de Pages Editor à votre réseau local

Recherche et solution

Articles similaires

Blog ARC Optimizer

Qu’en est-il des paramètres de rendu ?

Les technologies:

Créer des paramètres de rendu

Composant frontal

Connexion de Pages Editor à votre réseau local

Recherche et solution

Partager :

Articles similaires