Développement du bloc Edge Delivery Services

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 deuxième étape consiste à développer le bloc Edge Delivery Services, qui crée un modèle JSON, JavaScript et CSS dans l’éditeur universel. Pour en savoir plus sur la syntaxe de modèle de bloc et les notions de base de la structure JavaScript et CSS, voir Création d’un bloc et Création d’un bloc. Seules les parties spécifiques à ce tutoriel sont abordées ici.

Cette étape n’appelle pas encore la fonction AEM Edge que nous avons créée à l’étape précédente. Le bloc Edge Delivery Services génère un résultat d’espace réservé jusqu’à ce que Connectez le bloc à la fonction AEM Edge connecte la récupération.

Création d’une branche

Dans votre projet de site Edge Delivery Services, créez une branche pour cette fonctionnalité.

$ git checkout -b estimated-delivery

Définition du modèle de bloc

Avant d’écrire le JavaScript, définissez les champs contrôlés par l’auteur et les champs que le code effectue lui-même, de sorte que le modèle de contenu reste petit.

Le modèle dans _estimated-delivery.json n’expose que deux champs, l’en-tête et le libellé du bouton. La liste de produits, le balisage de formulaire et les états de résultats sont rendus par le JavaScript du bloc Edge Delivery Services, et non par le contenu créé.

// blocks/estimated-delivery/_estimated-delivery.json
{
  "definitions": [
    {
      "title": "Estimated Delivery",
      "id": "estimated-delivery",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Estimated Delivery",
              "model": "estimated-delivery",
              "title": "When will it arrive?",
              "ctaText": "Check estimated delivery"
            }
          }
        }
      }
    }
  ],
  "models": [
    {
      "id": "estimated-delivery",
      "fields": [
        {
          "component": "text",
          "valueType": "string",
          "name": "title",
          "value": "When will it arrive?",
          "label": "Heading",
          "description": "Main heading shown above the delivery checker form."
        },
        {
          "component": "text",
          "valueType": "string",
          "name": "ctaText",
          "value": "Check estimated delivery",
          "label": "CTA Text",
          "description": "Label for the submit button."
        }
      ]
    }
  ],
  "filters": []
}

Pour les types de champ au-delà de text, suivez la syntaxe du modèle dans Créer un bloc.

Enregistrer le bloc pour l’éditeur universel

Le fichier de modèle de bloc seul ne suffit pas pour que l’éditeur universel propose le bloc dans son sélecteur d’insertion. Deux fichiers supplémentaires nécessitent d’abord une saisie manuelle, car ils répertorient les blocs par nom au lieu de les découvrir automatiquement.

Ajoutez le bloc au groupe « Blocs » dans models/_component-definition.json :

{ "...": "../blocks/estimated-delivery/_*.json#/definitions" }

Si le bloc doit pouvoir être inséré dans une section, ajoutez également son identifiant au filters[0].components de models/_section.json :

"estimated-delivery"

models/_component-models.json n’a pas besoin de ce traitement. Il inclut chaque bloc automatiquement par le biais d’un caractère générique, ../blocks/*/_*.json#/models, de sorte que le schéma de champ du bloc à lui seul suffit à component-models.json atteindre. models/_component-definition.json et models/_section.json n’utilisent pas de caractère générique pour ce projet, de sorte qu’un nouveau bloc est invisible dans le sélecteur jusqu’à ce qu’il soit ajouté aux deux par son nom, même si son modèle est correctement compilé.

Compilez les deux modifications dans les fichiers agrégés du projet (component-definition.json, component-filters.json et component-models.json), traités dans Créer le projet JSON.

Implémentation du bloc

Fichiers que vous ajouterez

blocks/estimated-delivery/
├── _estimated-delivery.json   # the block model, shown above
├── estimated-delivery.js      # decorate() renders the form and result states
└── estimated-delivery.css     # form layout and result state styling

Restituer le formulaire et le résultat d’un espace réservé

Créez la fonction decorate() pour effectuer le rendu d’une sélection de produit, d’une entrée de code postal, d’un bouton d’envoi et d’une zone de résultats vide. Conservez le gestionnaire d’envoi sous forme de stub pour l’instant.

Le readBlockContent() lit les deux champs créés à partir du DOM du bloc. L’éditeur universel effectue le rendu de chaque champ de modèle en tant qu’enfant <div> dans l’ordre des champs. De ce fait, l’en-tête est le texte du premier enfant et le libellé du bouton est celui du second enfant, en revenant à une valeur par défaut lorsqu’un champ est vide :

// blocks/estimated-delivery/estimated-delivery.js
const DEFAULTS = {
  title: 'When will it arrive?',
  ctaText: 'Check estimated delivery',
};

const PRODUCTS = [
  { value: 'house-blend-medium-roast', label: 'House Blend - Medium Roast' },
  { value: 'frescopa-smart-machine', label: 'Fréscopa Smart Machine' },
  { value: 'insulated-travel-thermos', label: 'Insulated Travel Thermos' },
];

const PRODUCT_OPTIONS_HTML = PRODUCTS.map(
  (p) => `<option value="${p.value}">${p.label}</option>`,
).join('');

function getBlockText(el, fallback) {
  const text = el?.textContent?.trim();
  return text || fallback;
}

function readBlockContent(block) {
  const props = [...block.children].map((row) => row.firstElementChild);

  return {
    title: getBlockText(props[0], DEFAULTS.title),
    ctaText: getBlockText(props[1], DEFAULTS.ctaText),
  };
}

export default function decorate(block) {
  const { title, ctaText } = readBlockContent(block);

  block.innerHTML = `
    <div class="estimated-delivery">
      <h3 data-aue-prop="title" data-aue-label="Heading" data-aue-type="text">${title}</h3>
      <form class="estimated-delivery__form">
        <select name="sku">${PRODUCT_OPTIONS_HTML}</select>
        <input name="postcode" type="text" placeholder="e.g. 10001" required />
        <button type="submit" data-aue-prop="ctaText" data-aue-label="CTA Text" data-aue-type="text">${ctaText}</button>
      </form>
      <div class="estimated-delivery__result" aria-live="polite">
        <p>Select a product, enter your postcode, and click the button.</p>
      </div>
    </div>
  `;

  // form submit logic added in the next step
}

Les data-aue-prop, data-aue-label et data-aue-type marquent le texte d’en-tête et de bouton comme des champs modifiables dans l’éditeur universel, le même modèle que celui utilisé dans Créer un bloc. Il s’agit du modèle automatique, pas du fichier final. Le estimated-delivery.js de l’implémentation de référence inclut également la logique de récupération de Connectez le bloc à la fonction AEM Edge, qui établit un lien vers le fichier complet une fois cette logique en place.

Donner un style au bloc

Ajoutez le CSS pour la disposition du formulaire, l’état de l’espace réservé et les états de résultats que le bloc Edge Delivery Services affiche ultérieurement (chargement, erreur, succès), après Développement d’un bloc avec CSS et JavaScript. Extrait représentatif de estimated-delivery.css :

/* blocks/estimated-delivery/estimated-delivery.css */
.estimated-delivery__form {
  display: grid;
  gap: var(--spacing-small);
  padding: var(--spacing-medium);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
}

.estimated-delivery__placeholder {
  display: grid;
  gap: var(--spacing-xsmall);
  align-content: center;
  border: 2px dashed var(--color-neutral-400);
  border-radius: 12px;
  text-align: center;
}

Le fichier complet définit également le style de la double flèche de chargement et des couleurs de statut de la carte de succès (in-stock, low-stock, out-of-stock), que le bloc Edge Delivery Services ne rend pas tant que Connectez le bloc à la fonction AEM Edge.

Code push et création du bloc

Prévisualiser le bloc localement

Exécutez le site Edge Delivery Services localement et confirmez le rendu de l’espace réservé avant de connecter l’appel de récupération.

$ aem up

Ouvrez la page que vous avez créée à l’adresse http://localhost:3000/dev/branches/estimated-delivery et confirmez que le texte de l’en-tête, du formulaire et de l’espace réservé est généré. Le bouton Envoyer ne fait rien pour l’instant.

Étapes suivantes

Dans Connecter le bloc à la fonction AEM Edge, vous connectez ce bloc Edge Delivery Services à la fonction AEM Edge que vous avez créée à l’étape précédente, en remplaçant le résultat de l’espace réservé par des données actives.

Ressources supplémentaires