Frammenti di contenuto visivo - Consegna con l’URL di pubblicazione visual-content-fragments-deliver-with-the-publish-url

Quando viene pubblicato un frammento di contenuto basato su un modello con uno o più modelli HTML allegati, il HTML di rendering di tale frammento è reso disponibile tramite il livello di pubblicazione di Adobe Experience Manager (AEM) as a Cloud Service in un URL con questa struttura:

https://publish-p<programId>-e<envId>.adobeaemcloud.com/adobe/stable/previewtemplates/contentFragments/<templateId>/<fragmentId>/<variation>.html

Questo URL restituisce un documento HTML autonomo (inclusi CSS e struttura in linea) che può essere incorporato in qualsiasi contesto Web.

Tecniche di incorporamento: panoramica embedding-techniques-overview

Esistono tre approcci distinti per l’utilizzo di HTML da un frammento di contenuto visivo su una pagina host. Ognuno di essi presenta caratteristiche distinte relative all’isolamento dello stile, al comportamento del layout, all’accessibilità e alla complessità.

Elemento in linea (recupero + innerHTML) inline-element-fetch-and-innerhtml

L’approccio più semplice:

Esempio di incorporamento di un elemento in linea:

<div id="cf-container"></div>
<script>
  fetch("<publish-url>")
    .then(r => r.ok ? r.text() : Promise.reject(r.status))
    .then(html => {
      document.getElementById("cf-container").innerHTML = html;
    })
    .catch(err => console.error("Failed to load fragment", err));
</script>

Quando utilizzare:

iframe iframe

Carica l’URL di pubblicazione direttamente come src di un <iframe>. Non è richiesto alcun JavaScript.

Esempio di incorporamento di iframe:

<iframe
  src="<publish-url>"
  title="Content Fragment Preview"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

È inoltre possibile ridimensionare automaticamente l’iframe (opzionale).

Per ridimensionare dinamicamente l’iframe all’altezza del contenuto (evitando le barre di scorrimento), utilizza un pattern postMessage o una libreria appropriata.

Un esempio di approccio leggero è:

<iframe id="cf-iframe" src="<publish-url>" title="Content Fragment Preview"
  width="100%" frameborder="0" style="border:none; overflow:hidden;"
  onload="this.style.height = this.contentDocument.documentElement.scrollHeight + 'px';"
></iframe>

Quando utilizzare:

Elemento personalizzato + DOM ombra (consigliato) custom-element-and-shadow-dom-recommended

Definisci un elemento personalizzato <cf-visualization> riutilizzabile che recuperi l’URL di pubblicazione e inserisca il HTML in una radice DOM shadow incapsulata.

Questo elemento fornisce:

Per definire l’elemento personalizzato, includi il seguente script una volta per pagina. Tutte le <cf-visualization> istanze della pagina utilizzeranno questa definizione:

<script>
  class CfVisualization extends HTMLElement {
    connectedCallback() {
      const src = this.getAttribute("src");
      if (!src) return;

      const shadow = this.attachShadow({ mode: "open" });

      fetch(src)
        .then((r) => (r.ok ? r.text() : Promise.reject(r.status)))
        .then((html) => {
          shadow.innerHTML = html;
        })
        .catch((err) => {
          console.error("cf-visualization: failed to load", src, err);
        });
    }
  }

  if (!customElements.get("cf-visualization")) {
    customElements.define("cf-visualization", CfVisualization);
  }
</script>

Per utilizzare l’elemento personalizzato:

<cf-visualization src="<publish-url>"></cf-visualization>

Quando utilizzare:

Integrazione con Edge Delivery Services (blocco di incorporamento) integration-with-edge-services-embed-block

In Edge Delivery Services, l’URL di pubblicazione viene utilizzato tramite un blocco di incorporamento, che lo rende come <iframe>.

Integrazione: AEM Sites con i Componenti core integration-aem-sites-with-core-components

Il componente core Frammento di contenuto (core/wcm/components/contentfragment/v1/contentfragment) dispone del supporto integrato per il rendering dei Frammenti di contenuto visivo tramite la tecnica Elemento cliente + DOM shadow.

Come funziona:

Integrazione con siti esterni integration-with-external-sites

Per i siti Web non AEM, utilizzare la tecnica Elemento cliente + DOM ombra. In questo modo è possibile ottenere un’integrazione dichiarativa senza dipendenze del framework.

Un esempio è:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Product Page</title>
</head>
<body>
  <h1>Product Details</h1>
  <p>Some host-page content here...</p>

  <!-- Embed the Content Fragment visualization -->
  <cf-visualization
    src="https://publish-p12345-e67890.adobeaemcloud.com/adobe/experimental/previewtemplates-expires-20260301/contentFragments/product_template/abc-123/master.html"
  ></cf-visualization>

  <p>More host-page content below the fragment...</p>

  <!-- Custom Element definition (include once) -->
  <script>
    class CfVisualization extends HTMLElement {
      connectedCallback() {
        const src = this.getAttribute("src");
        if (!src) return;
        const shadow = this.attachShadow({ mode: "open" });
        fetch(src)
          .then(r => r.ok ? r.text() : Promise.reject(r.status))
          .then(html => { shadow.innerHTML = html; })
          .catch(err => console.error("cf-visualization: failed to load", src, err));
      }
    }
    if (!customElements.get("cf-visualization")) {
      customElements.define("cf-visualization", CfVisualization);
    }
  </script>
</body>
</html>

CORS e considerazioni sulla sicurezza cors-and-security-considerations

Scegliere la tecnica appropriata choose-the-appropriate-technique

Utilizza quanto segue come guida alle decisioni per aiutarti a scegliere la tecnica appropriata: