Il contenitore Multifield genera blocchi HTML o duplicati vuoti nell’editor universale
Un contenitore multifield in Universal Editor per Edge Delivery (xwalk/xcom) esegue il rendering di elementi HTML vuoti o duplica il markup di blocco se configurato con un campo contenitore multivalore. Per risolvere il problema, esegui la migrazione a un modello di blocco di contenitore e elemento.
Descrizione description
Ambiente
- Prodotto: Adobe Experience Manager as a Cloud Service (AEMaaCS) - Siti
- Scenario: Edge Delivery (xwalk/xcom) con Universal Editor
Problema/Sintomi
- Gli elementi creati dal contenitore non riescono a generare l'output previsto di HTML, con la conseguente presenza di
<div>elementi vuoti. - L’aggiunta di più campi al componente con più campi genera un blocco HTML duplicato per una singola istanza contenitore.
- L’aggiornamento della vista dell’editor rimuove temporaneamente i blocchi duplicati, ma la duplicazione viene rivisualizzata dopo le modifiche successive.
Risoluzione resolution
Per risolvere il problema, segui i passaggi seguenti:
-
Rimuovi il campo del contenitore multivalore dal modello di componente esistente per interrompere la generazione di markup duplicato o vuoto.
-
Per mantenere contenuti a livello di layout, conserva nel modello di blocco contenitore principale campi semplici come il testo superiore e inferiore.
-
Crea un modello per blocchi di elementi dedicati e definisci singoli campi per ogni elemento, ad esempio campi di testo o immagine. Esempio di struttura del modello di blocco articolo e contenitore:
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"] } ] } -
Configura i filtri nell’Editor universale per consentire i blocchi di elementi nel blocco contenitore principale. In questo esempio, il filtro assicura che il contenitore accetti solo i blocchi di elementi:
code language-none { "id": "multifield-container-component", "components": [ "multifield-container-item"] }La definizione del contenitore deve fare riferimento a questo filtro:
"filter": "multifield-container-component", e il filtro conid: "multifield-container-component"limita il contenitore all'accettazione solo di multifield-container-item. -
Aggiorna i componenti principali sostituendo i contenitori nidificati basati su più campi con slot per blocchi figlio che accettano i blocchi di elementi.
-
Se necessario, aggiungi script di blocco sia per i blocchi contenitore che per i blocchi elemento.
-
Genera e distribuisci modelli e componenti aggiornati tramite la pipeline standard.
-
Crea nuovamente il contenuto in Universal Editor aggiungendo un blocco di elemento per ogni voce richiesta all’interno del blocco contenitore.
-
Convalida l’output per confermare che ogni blocco viene riprodotto una volta e genera un HTML pulito e non duplicato.
Comportamento modello - Modello di blocco elemento (multifield-container-item)
-
Ogni voce creata crea un'istanza di blocco con:
itemText (text)itemImage (reference)- in genere viene risolta in un'immagine quando la risorsa DAM di riferimento è un'immagineitemImageAlt (text)- utilizzato per testo alternativo immagine
Note:
- Universal Editor tratta il modello di campo contenitore multivalore (
component: "container",multi: true) come accesso anticipato, che porta a rendering instabile e duplicazione di blocchi negli ambienti Edge Delivery. - L'impostazione di
multi: truesumulti: falseimpedisce la duplicazione, ma limita la creazione a una singola voce contenitore. - L’utilizzo di un blocco contenitore con blocchi di elementi è allineato ai modelli supportati da Universal Editor e garantisce un rendering di HTML coerente e stabile.