Fragmentos de contenido visual: enviar con la dirección URL de publicación visual-content-fragments-deliver-with-the-publish-url

Cuando se publica un fragmento de contenido basado en un modelo con una o varias plantillas de HTML adjuntas, el HTML procesado de ese fragmento está disponible a través del nivel de publicación de Adobe Experience Manager (AEM) as a Cloud Service en una URL con esta estructura:

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

Esta URL devuelve un documento HTML independiente (que incluye CSS y estructura en línea) que se puede incrustar en cualquier contexto web.

Técnicas de incrustación: información general embedding-techniques-overview

Existen tres métodos distintos para consumir HTML a partir de un fragmento de contenido visual en una página host. Cada uno de ellos tiene características distintas en cuanto al aislamiento de estilos, el comportamiento del diseño, la accesibilidad y la complejidad.

Elemento en línea (fetch + innerHTML) inline-element-fetch-and-innerhtml

El enfoque más sencillo:

Un ejemplo de incrustación de elementos en línea:

<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>

Cuándo usar:

iframe iframe

Cargue la dirección URL de publicación directamente como src de un <iframe>. No se necesita JavaScript.

Un ejemplo de incrustación de iframe:

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

También puede cambiar automáticamente el tamaño del iframe (esto es opcional).

Para cambiar dinámicamente el tamaño del iframe a su altura de contenido (evitando las barras de desplazamiento), utilice un patrón postMessage o una biblioteca apropiada.

Un ejemplo de enfoque ligero es:

<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>

Cuándo usar:

Elemento personalizado + DOM de sombra (recomendado) custom-element-and-shadow-dom-recommended

Defina un elemento personalizado <cf-visualization> reutilizable que obtenga la URL de publicación e inserte el HTML en una raíz DOM en la sombra encapsulada.

Este elemento proporciona:

Para definir el elemento personalizado, incluya el siguiente script una vez por página. Todas las <cf-visualization> instancias de la página utilizarán esta definición:

<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>

Para utilizar el elemento personalizado:

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

Cuándo usar:

Integración con Edge Delivery Services (bloque incrustado) integration-with-edge-services-embed-block

En Edge Delivery Services, la dirección URL de publicación se consume a través de un bloque incrustado, que lo procesa como un <iframe>.

Integración: AEM Sites con componentes principales integration-aem-sites-with-core-components

El componente principal Fragmento de contenido (core/wcm/components/contentfragment/v1/contentfragment) tiene compatibilidad integrada para representar fragmentos de contenido visual mediante la técnica Elemento del cliente + DOM de sombra.

Cómo funciona:

Integración con sitios externos integration-with-external-sites

Para los sitios web que no son de AEM, use la técnica Elemento del cliente + DOM de sombra. Esto le proporciona una integración declarativa y limpia sin dependencias de marco de trabajo.

Un ejemplo es:

<!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 y consideraciones de seguridad cors-and-security-considerations

Elija la técnica adecuada choose-the-appropriate-technique

Utilice lo siguiente como guía de decisión para ayudarle a elegir la técnica adecuada: