Le conteneur multichamps génère des blocs HTML vides ou en double dans l’éditeur universel
Un conteneur multichamps dans l’éditeur universel pour Edge Delivery (xwalk/xcom) effectue le rendu des éléments HTML vides ou duplique le balisage de bloc lorsqu’il est configuré avec un champ de conteneur à plusieurs valeurs. Pour résoudre ce problème, migrez vers un modèle de conteneur et de bloc d’élément.
Description description
Environnement
- Produit : Adobe Experience Manager as a Cloud Service (AEMaaCS) - Sites
- Scénario : Edge Delivery (xwalk/xcom) avec l’éditeur universel
Problème/Symptômes
- Les éléments créés par conteneur ne parviennent pas à générer la sortie HTML attendue, ce qui entraîne la présence d’éléments de
<div>vides. - L’ajout de plusieurs champs au composant multichamp génère un bloc HTML en double pour une seule instance de conteneur.
- L’actualisation de la vue de l’éditeur supprime temporairement les blocs en double, mais la duplication réapparaît après les modifications ultérieures.
Résolution resolution
Pour résoudre ce problème, procédez comme suit :
-
Supprimez le champ de conteneur à valeurs multiples du modèle de composant existant pour arrêter la génération de balises en double ou vides.
-
Conservez les champs simples tels que le texte en haut et en bas dans le modèle de bloc conteneur parent pour conserver le contenu au niveau de la mise en page.
-
Créez un modèle de bloc d’élément dédié et définissez des champs individuels pour chaque élément, tels que des champs de texte ou d’image. Exemple de structure de modèle de conteneur et de bloc d’élément :
code language-none { "definitions": [ { "title": "Multifield Container", "id": "multifield-container-component", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "multifield-container-component", "model": "multifield-container-component", "filter": "multifield-container-component" } } } } }, { "title": "Multifield Container Item", "id": "multifield-container-item", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "multifield-container-item", "model": "multifield-container-item" } } } } } ] , "models": [ { "id": "multifield-container-component", "fields": [ { "component": "text", "name": "topText", "label": "Top of container", "valueType": "string" }, { "component": "text", "name": "bottomText", "label": "Bottom of container", "valueType": "string" } ] }, { "id": "multifield-container-item", "fields": [ { "component": "text", "name": "itemText", "label": "Item text", "valueType": "string" }, { "component": "reference", "name": "itemImage", "label": "Item image", "valueType": "string", "multi": false }, { "component": "text", "name": "itemImageAlt", "label": "Item image alt text", "valueType": "string" } ] } ] , "filters": [ { "id": "multifield-container-component", "components": [ "multifield-container-item"] } ] } -
Configurez les filtres dans l’éditeur universel pour autoriser les blocs d’éléments sous le bloc de conteneur parent. Dans cet exemple, le filtre s’assure que le conteneur accepte uniquement les blocs d’élément :
code language-none { "id": "multifield-container-component", "components": [ "multifield-container-item"] }La définition du conteneur doit référencer ce filtre :
"filter": "multifield-container-component", et le filtre avecid: "multifield-container-component"limite le conteneur pour n’accepter que multifield-container-item. -
Mettez à jour les composants parents en remplaçant les conteneurs imbriqués basés sur plusieurs champs par des emplacements de blocs enfants qui acceptent les blocs d’éléments.
-
Ajoutez des scripts de bloc pour les blocs de conteneur et d’élément si la configuration du projet les exige.
-
Créez et déployez les modèles et composants mis à jour via le pipeline standard.
-
Recréez du contenu dans l’éditeur universel en ajoutant un bloc d’élément pour chaque entrée requise dans le bloc de conteneur.
-
Validez la sortie pour confirmer que chaque bloc est rendu une seule fois et générez un HTML propre et non dupliqué.
Comportement du modèle - Modèle de bloc d’élément (multifield-container-item)
-
Chaque entrée créée crée une instance de bloc avec :
itemText (text)itemImage (reference): généralement résolu sur une image lorsque la ressource DAM référencée est une imageitemImageAlt (text): utilisé pour le texte secondaire de l’image.
Remarques :
- L’éditeur universel traite le modèle de champ de conteneur à valeurs multiples (
component: "container",multi: true) comme un accès anticipé, ce qui entraîne un rendu instable et la duplication des blocs dans les environnements Edge Delivery. - La définition de
multi: truesurmulti: falseempêche la duplication mais limite la création à une seule entrée de conteneur. - L’utilisation d’un bloc de conteneur avec des blocs d’élément s’aligne sur les modèles d’éditeur universel pris en charge et garantit un rendu HTML cohérent et stable.