Desarrollo del bloque de Edge Delivery Services

Nuestro objetivo es crear un bloque de Edge Delivery Services dinámico que llame a una función de Edge de AEM para recuperar datos dinámicos de una API de terceros.

El segundo paso es desarrollar el bloque de Edge Delivery Services, que andamiza un modelo JSON, JavaScript y CSS y lo crea en el editor universal. Para obtener sintaxis de modelo de bloque y conceptos básicos de estructura CSS y JavaScript, consulte Crear un bloque y Crear un bloque. Aquí solo se tratan las partes específicas de este tutorial.

Este paso aún no llama a la función Edge de AEM que creamos en el paso anterior. El bloque de Edge Delivery Services procesa un resultado de marcador de posición hasta que Conecte el bloque a la función de AEM Edge transfiera la recuperación.

Crear una rama

En el proyecto del sitio de Edge Delivery Services, cree una rama para esta función.

$ git checkout -b estimated-delivery

Definición del modelo de bloque

Antes de escribir JavaScript, defina qué campos controla un autor y qué campos procesa el código por su cuenta, de modo que el modelo de contenido se mantenga pequeño.

El modelo de _estimated-delivery.json expone solo dos campos, el encabezado y la etiqueta de botón. La lista de productos, el marcado del formulario y los estados de resultado se representan mediante JavaScript del bloque de Edge Delivery Services, no mediante contenido creado.

// 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": []
}

Para los tipos de campo más allá de text, siga la sintaxis del modelo en Crear un bloque.

Registre el bloque para Universal Editor

El archivo del modelo de bloque por sí solo no es suficiente para que Universal Editor ofrezca el bloque en su selector de inserción. Otros dos archivos necesitan primero una entrada manual, ya que enumeran los bloques por nombre en lugar de descubrirlos automáticamente.

Agregar el bloque al grupo “Bloques” en models/_component-definition.json:

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

Si el bloque debe poder insertarse dentro de una sección, agregue también su id. a filters[0].components de models/_section.json:

"estimated-delivery"

models/_component-models.json no necesita este tratamiento. Incluye cada bloque automáticamente mediante un comodín ../blocks/*/_*.json#/models, de modo que el esquema de campo del bloque por sí solo es suficiente para alcanzar component-models.json. models/_component-definition.json y models/_section.json no utilizan un comodín para este proyecto, por lo que un nuevo bloque es invisible en el selector hasta que se agrega a ambos por nombre, aunque su modelo se compila correctamente.

Compile ambas ediciones en los archivos agregados del proyecto (component-definition.json, component-filters.json y component-models.json), incluidos en Generar el proyecto JSON.

Implementación del bloque

Archivos que agregará

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

Procesar el formulario y un resultado de marcador de posición

Genere la función decorate() para procesar una selección de producto, una entrada de código postal, un botón de envío y un área de resultados vacía. Mantenga el controlador de envío como un código auxiliar por ahora.

readBlockContent() lee los dos campos creados desde el DOM del bloque. El editor universal procesa cada campo de modelo como un elemento secundario <div> en el orden de campos, de modo que el encabezado es el texto del primer elemento secundario y la etiqueta del botón es del segundo, volviendo a un valor predeterminado cuando un campo está vacío:

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

data-aue-prop, data-aue-label y data-aue-type marcan el encabezado y el texto del botón como campos editables en el Editor universal, el mismo patrón usado en Crear un bloque. Este es el andamio, no el archivo final. La implementación de referencia estimated-delivery.js también incluye la lógica de captura de Conecte el bloque a la función Edge de AEM, que se vincula al archivo completo una vez que dicha lógica esté implementada.

Aplicar estilo al bloque

Agregue CSS para la presentación del formulario, el estado del marcador de posición y los estados de resultado que el bloque de Edge Delivery Services procesará más adelante (carga, error, éxito), después de Desarrollar un bloque con CSS y JavaScript. Un extracto representativo 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;
}

El archivo completo también aplica estilo al control de número de carga y a los colores de estado de la tarjeta de éxito (in-stock, low-stock, out-of-stock), que el bloque de Edge Delivery Services no procesa hasta Conectar el bloque a la función de AEM Edge.

Código push y creación del bloque

Previsualización del bloque localmente

Ejecute el sitio de Edge Delivery Services localmente y confirme que el marcador de posición se procesa antes de cablear la llamada de recuperación.

$ aem up

Abra la página que creó en http://localhost:3000/dev/branches/estimated-delivery y confirme el encabezado, el formulario y el texto del marcador de posición representados como creados. El botón Enviar aún no hace nada.

Próximos pasos

En Conecte el bloque a la función Edge de AEM, conecte este bloque Edge Delivery Services a la función Edge de AEM que creó en el paso anterior y reemplace el resultado del marcador de posición por datos activos.

Recursos adicionales