Connecter le bloc à la fonction AEM Edge

Notre objectif est de créer un bloc Edge Delivery Services dynamique qui appelle une fonction AEM Edge pour récupérer des données dynamiques à partir d’une API tierce.

La troisième étape consiste à connecter le bloc Edge Delivery Services que vous avez compilé dans Développement du bloc Edge Delivery Services à la fonction AEM Edge que vous avez créée dans Développement de la fonction AEM Edge. Il s’agit de l’étape qui relie les deux projets. Exécutez les deux serveurs de développement locaux côte à côte, sur deux ports différents, et faites en sorte que l’appel JavaScript du bloc corresponde à l’appel approprié en fonction de l’endroit où il est exécuté.

Exécuter les deux serveurs de développement locaux

Dans le projet de site Edge Delivery Services :

$ aem up

Cela dessert le site à http://localhost:3000.

Dans le projet Fonctions AEM Edge , dans un second terminal :

$ aio aem edge-functions serve

Le point d’entrée est ainsi http://127.0.0.1:7676.

Câbler l’appel de récupération

Ajoutez ce qui suit à estimated-delivery.js, avec le modèle automatique de Développement du bloc Edge Delivery Services.

Choisir l’URL appropriée pour l’environnement

Le bloc Edge Delivery Services appelle une URL différente en fonction de l’emplacement d’exécution :

Détectez le développement local à partir du nom d’hôte signalé par le navigateur et mettez en cache le résultat afin que chaque requête ne répète pas la vérification :

// blocks/estimated-delivery/estimated-delivery.js
const API_PATH = '/api/frescopa/estimated-delivery';
const LOCAL_EDGE_FUNCTION_ORIGIN = 'http://127.0.0.1:7676';

let cachedApiUrl;

function isLocalDev() {
  const { hostname } = window.location;
  return hostname === 'localhost' || hostname === '127.0.0.1';
}

function getEstimatedDeliveryApiUrl() {
  if (cachedApiUrl) return cachedApiUrl;

  // Local: site (aem up) on :3000, Edge Function on :7676 — call it directly.
  // Production: relative path, routed to Edge Function via CDN origin selector.
  cachedApiUrl = isLocalDev()
    ? `${LOCAL_EDGE_FUNCTION_ORIGIN}${API_PATH}`
    : API_PATH;

  return cachedApiUrl;
}

Il s’agit de la seule logique spécifique à un environnement dans le bloc Edge Delivery Services. Tout le reste, l’appel de récupération, la gestion de la réponse, le rendu, fonctionne de la même manière dans les deux environnements, car le chemin est le même ; seule l’origine change.

Appeler la fonction AEM Edge

// blocks/estimated-delivery/estimated-delivery.js
async function fetchEstimatedDelivery(sku, postcode, signal) {
  const params = new URLSearchParams({ sku, postcode });
  const response = await fetch(`${getEstimatedDeliveryApiUrl()}?${params.toString()}`, {
    signal,
    cache: 'no-store',
  });

  const body = await response.json().catch(() => ({}));

  if (!response.ok) {
    const apiMessage = body.message || body.error;
    const err = new Error(apiMessage || 'Unable to check estimated delivery right now.');
    err.code = body.code;
    throw err;
  }

  return body;
}

err.code transfère le même champ code de Définir le contrat d’API (MISSING_POSTCODE, UNKNOWN_SKU), de sorte qu’un appelant puisse s’y brancher. Le bloc Edge Delivery Services n’affiche que les message. cache: 'no-store' empêche le navigateur de mettre en cache une réponse personnalisée. Le comportement du cache du réseau CDN est contrôlé séparément, par skipCache dans cdn.yaml, traité dans Création d’un point d’entrée d’API.

Configurer le gestionnaire d’envoi

Ajoutez-le à l’intérieur de decorate(), après le balisage de formulaire à partir de Développement du bloc Edge Delivery Services. Il s’agit du modèle de base : annuler toute requête en cours, afficher le chargement, appeler la fonction et acheminer le résultat vers setState :

// blocks/estimated-delivery/estimated-delivery.js
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // ...extract and validate sku/postcode from the form, omitted here...

  activeRequest?.abort();
  const controller = new AbortController();
  activeRequest = controller;

  setState({ loading: true });

  try {
    const data = await fetchEstimatedDelivery(sku, postcode, controller.signal);
    setState({ data });
  } catch (err) {
    if (err.name === 'AbortError') return;
    setState({ error: formatError(err) });
  }
});

setState enveloppe renderResult(), qui bascule entre les balises de chargement, d’erreur et de succès. Une erreur renvoyée passe par formatError(), ce qui permet de distinguer une défaillance du réseau (la fonction AEM Edge n’est pas accessible, de sorte que le serveur de développement local n’est pas en cours d’exécution ou que l’itinéraire du réseau de diffusion de contenu n’est pas encore déployé) d’une erreur métier que la fonction AEM Edge a renvoyée exprès, par exemple un SKU inconnu. Le gestionnaire complet valide également le code postal côté client avant d’appeler la fonction et désactive le bouton d’envoi lorsqu’une demande est en cours. Affichez l’écouteur, la renderResult() et la formatError() complets dans estimated-delivery.js.

Tester la boucle complète localement

Une fois les deux serveurs de développement en cours d’exécution, ouvrez la page que vous avez créée à l’http://localhost:3000/dev/branches/estimated-delivery, envoyez le formulaire et confirmez que le résultat s’affiche sous la forme d’une vignette colorée avec les données des appels en amont de la fonction AEM Edge.

Vérifiez ensuite les deux autres états :

Ouvrez la console du navigateur pour l’un de ces éléments. Si une requête échoue de manière inattendue, vérifiez d’abord s’il s’agit d’une erreur CORS (correctif dans la fonction AEM Edge) ou d’une erreur de connexion (le serveur de développement de la fonction AEM Edge n’est pas en cours d’exécution).

Étapes suivantes

Dans Déployer et vérifier, vous déployez les deux projets et confirmez que le même flux fonctionne sur votre site de développement, et pas seulement localement.

Ressources supplémentaires