Fragments de contenu visuels - Diffuser avec l’URL de publication visual-content-fragments-deliver-with-the-publish-url

Lorsqu’un fragment de contenu basé sur un modèle auquel sont associés des modèles HTML est publié, l’HTML rendue de ce fragment est disponible via le niveau de publication Adobe Experience Manager (AEM) as a Cloud Service à une URL avec cette structure :

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

Cette URL renvoie un document HTML autonome (y compris une structure et un CSS intégrés) qui peut être incorporé dans n’importe quel contexte web.

Techniques d’intégration - Aperçu embedding-techniques-overview

Il existe trois approches distinctes pour utiliser HTML à partir d’un fragment de contenu visuel sur une page hôte. Chacun présente des caractéristiques distinctes concernant l’isolation du style, le comportement de la disposition, l’accessibilité et la complexité.

Élément intégré (fetch + internalHTML) inline-element-fetch-and-innerhtml

L’approche la plus simple :

Exemple d’incorporation d’éléments intégrés :

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

Quand l’utiliser :

iframe iframe

Chargez l’URL de publication directement en tant que src d’une <iframe>. Aucun JavaScript n’est nécessaire.

Exemple d’incorporation d’iframe :

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

Vous pouvez également redimensionner automatiquement l’iframe (facultatif).

Pour dimensionner l’iframe de manière dynamique à sa hauteur de contenu (en évitant les barres de défilement), utilisez un modèle de postMessage ou une bibliothèque appropriée.

Voici un exemple d’approche légère :

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

Quand l’utiliser :

Élément personnalisé + DOM fantôme (recommandé) custom-element-and-shadow-dom-recommended

Définissez un élément personnalisé <cf-visualization> réutilisable qui récupère l’URL de publication et injecte l’HTML dans une racine Shadow DOM encapsulée.

Cet élément fournit :

Pour définir l’élément personnalisé, incluez le script suivant une fois par page. Toutes les instances <cf-visualization> de la page utiliseront cette définition :

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

Pour utiliser l’élément personnalisé :

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

Quand l’utiliser :

Intégration à Edge Delivery Services (bloc intégré) integration-with-edge-services-embed-block

Dans Edge Delivery Services, l’URL de publication est consommée par le biais d’un bloc intégré, qui la transforme en <iframe>.

Intégration - AEM Sites avec les composants principaux integration-aem-sites-with-core-components

Le composant principal Fragment de contenu (core/wcm/components/contentfragment/v1/contentfragment) offre une prise en charge intégrée du rendu des fragments de contenu visuels à l’aide de la technique Élément client + DOM fantôme.

Fonctionnement :

Intégration à des sites externes integration-with-external-sites

Pour les sites web autres qu’AEM, utilisez la technique Élément client + Shadow DOM. Vous obtenez ainsi une intégration propre et déclarative sans dépendances de framework.

Voici un exemple :

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

Considérations CORS et de sécurité cors-and-security-considerations

Choisir la technique appropriée choose-the-appropriate-technique

Utilisez les éléments suivants comme guide de décision pour choisir la technique appropriée :

Ressources supplémentaires additional-resources

Des ressources supplémentaires sont disponibles :