Collegare il blocco alla funzione Edge di AEM

Il nostro obiettivo è generare un blocco dinamico di Edge Delivery Services che chiama una funzione Edge di AEM per recuperare dati dinamici da un’API di terze parti.

Il terzo passaggio consiste nel connettere il blocco Edge Delivery Services su cui è stato eseguito lo scaffolding in Sviluppare il blocco Edge Delivery Services alla funzione AEM Edge generata in Sviluppare la funzione AEM Edge. Questo è il passo che unisce i due progetti. Eseguire entrambi i server di sviluppo locali uno accanto all’altro, su due porte diverse, e impostare la chiamata JavaScript del blocco come quella corretta a seconda della posizione in cui è in esecuzione.

Eseguire entrambi i server di sviluppo locali

Nel progetto del sito Edge Delivery Services:

$ aem up

Questo serve il sito in http://localhost:3000.

Nel progetto AEM Edge Functions, in un secondo terminale:

$ aio aem edge-functions serve

Serve l’endpoint in http://127.0.0.1:7676.

Attiva la chiamata di recupero

Aggiungi quanto segue a estimated-delivery.js, insieme allo scaffold di Sviluppa il blocco Edge Delivery Services.

Scegli l’URL corretto per l’ambiente

Il blocco Edge Delivery Services chiama un URL diverso a seconda della posizione in cui è in esecuzione:

Rileva sviluppo locale dal nome host segnalato dal browser e memorizza in cache il risultato in modo che ogni richiesta non ripeta il controllo:

// 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;
}

Questa è l’unica logica specifica per l’ambiente nel blocco Edge Delivery Services. Tutto il resto, la chiamata di recupero, la gestione della risposta e il rendering, funziona allo stesso modo in entrambi gli ambienti perché il percorso è lo stesso; cambia solo l’origine.

Chiamare la funzione Edge di AEM

// 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 contiene lo stesso campo code di Definisci il contratto API (MISSING_POSTCODE, UNKNOWN_SKU), in modo che un chiamante possa eseguire il branch. Il blocco Edge Delivery Services visualizza solo message. cache: 'no-store' impedisce al browser di memorizzare in cache una risposta personalizzata. Il comportamento della cache della rete CDN è controllato separatamente da skipCache in cdn.yaml, incluso in Generare un endpoint API.

Disattiva il gestore di invio

Aggiungi questo elemento in decorate(), dopo il markup del modulo da Sviluppa il blocco Edge Delivery Services. Questo è il modello di base: annullare qualsiasi richiesta in-flight, mostrare il caricamento, chiamare la funzione e instradare il risultato a 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 esegue il wrapping di renderResult(), che consente di alternare tra il caricamento, l’errore e il markup di successo. Un errore generato viene indirizzato attraverso formatError(), che distingue un errore di rete (la funzione Edge di AEM non è raggiungibile, pertanto il server di sviluppo locale non è in esecuzione o la route CDN non è ancora distribuita) da un errore di business restituito appositamente dalla funzione Edge di AEM, ad esempio una SKU sconosciuta. L’handler completo convalida anche il codice postale lato client prima di richiamare la funzione e disabilita il pulsante di invio mentre è in corso una richiesta. Vedere il listener completo, renderResult(), e formatError() in estimated-delivery.js.

Eseguire il test del ciclo completo localmente

Con entrambi i server di sviluppo in esecuzione, apri la pagina creata alle http://localhost:3000/dev/branches/estimated-delivery, invia il modulo e conferma il rendering del risultato come scheda di colore dello stato con i dati delle chiamate a monte della funzione AEM Edge.

Verifica quindi gli altri due stati:

Apri la console del browser per selezionare una di queste opzioni. Se una richiesta non riesce in modo imprevisto, verifica innanzitutto se si tratta di un errore CORS (correzione nella funzione Edge di AEM) o di un errore di connessione (il server di sviluppo della funzione Edge di AEM non è in esecuzione).

Passaggi successivi

In Distribuisci e verifica, distribuisci entrambi i progetti e confermi che lo stesso flusso funziona sul tuo sito di sviluppo, non solo localmente.

Risorse aggiuntive