Fragmentos de conteúdo visual - Enviar entrega com o URL de publicação visual-content-fragments-deliver-with-the-publish-url

Quando um fragmento de conteúdo baseado em um modelo com modelos do HTML anexados é publicado, o HTML renderizado desse fragmento é disponibilizado por meio do nível de publicação do Adobe Experience Manager (AEM) as a Cloud Service em um URL com esta estrutura:

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

Esta URL retorna um documento HTML independente (incluindo CSS e estrutura embutidos) que pode ser incorporado em qualquer contexto da Web.

Técnicas de incorporação — visão geral embedding-techniques-overview

Há três abordagens distintas para consumir o HTML a partir de um fragmento de conteúdo visual em uma página de host. Cada uma delas vem com características distintas de isolamento de estilo, comportamento de layout, acessibilidade e complexidade.

Elemento em linha (fetch + innerHTML) inline-element-fetch-and-innerhtml

A abordagem mais simples:

Um exemplo de incorporação de elemento em linha:

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

iframe iframe

Carregue a URL de Publicação diretamente como o src de um <iframe>. Nenhuma JavaScript é necessária.

Um exemplo de incorporação de iframe:

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

Também é possível redimensionar automaticamente o iframe (opcional).

Para dimensionar dinamicamente o iframe à sua altura de conteúdo (evitando barras de rolagem), use um padrão postMessage ou uma biblioteca apropriada.

Um exemplo de abordagem mais leve é:

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

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

Defina um Elemento Personalizado <cf-visualization> reutilizável que busque a URL de publicação e injete a HTML em uma raiz DOM de sombra encapsulada.

Esse elemento fornece:

Para definir o Elemento personalizado, inclua o script a seguir uma vez por página. Todas as instâncias do <cf-visualization> na página usarão esta definição:

<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 usar o elemento personalizado:

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

Quando usar:

Integração com o Edge Delivery Services (bloco de inserção) integration-with-edge-services-embed-block

No Edge Delivery Services, a URL de Publicação é consumida por meio de um bloco incorporado, que a renderiza como <iframe>.

Integração - AEM Sites com componentes principais integration-aem-sites-with-core-components

O componente principal do fragmento de conteúdo (core/wcm/components/contentfragment/v1/contentfragment) tem suporte interno para renderização de fragmentos de conteúdo visuais usando a técnica Elemento do cliente + DOM de sombra.

Como funciona:

Integração com sites externos integration-with-external-sites

Para sites que não sejam da AEM, use a técnica Elemento do cliente + DOM de sombra. Isso proporciona uma integração limpa e declarativa sem dependências de estrutura.

Um exemplo é:

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

Considerações sobre CORS e segurança cors-and-security-considerations

Escolha a técnica apropriada choose-the-appropriate-technique

Use o seguinte como guia de decisão para ajudá-lo a escolher a técnica apropriada:

Recursos adicionais additional-resources

Recursos adicionais estão disponíveis: