开发Edge Delivery Services块

我们的目标是生成动态Edge Delivery Services块，该块调用AEM Edge函数以从第三方API获取动态数据。

第二步是开发Edge Delivery Services块，该块为JSON模型、JavaScript和CSS提供基架，并在通用编辑器中创作它。 有关块模型语法以及JavaScript和CSS结构基础知识，请参阅创建块和创作块。 此处仅介绍本教程的特定部分。

此步骤尚未调用我们在上一步中构建的AEM Edge函数。 Edge Delivery Services块呈现占位符结果，直到将该块连接到AEM Edge函数连接获取为止。

创建分支

在Edge Delivery Services站点项目中，为此功能创建一个分支。

$ git checkout -b estimated-delivery

定义块模型

在编写JavaScript之前，请定义作者控制哪些字段以及代码自行渲染哪些字段，以便保持内容模型较小。

_estimated-delivery.json中的模型仅公开两个字段：标题和按钮标签。 产品列表、表单标记和结果状态由Edge Delivery Services块的JavaScript渲染，而不是由创作的内容渲染。

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

对于text以外的字段类型，请遵循创建块中的模型语法。

为通用编辑器注册块

仅使用块模型文件不足以让通用编辑器在其插入选取器中提供块。 还有两个文件需要首先手动输入，因为它们按名称列出块，而不是自动发现块。

将块添加到models/_component-definition.json中的“块”组：

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

如果块应在节中可插入，则还应将其ID添加到models/_section.json的filters[0].components：

"estimated-delivery"

models/_component-models.json不需要此处理。 它通过通配符../blocks/*/_*.json#/models自动包含每个块，因此仅该块的字段架构就足以达到component-models.json。 models/_component-definition.json和models/_section.json未对此项目使用通配符，因此新块在按名称添加到两个中之前在选取器中不可见，即使其模型编译正确。

将这两个编辑编译到项目的聚合文件（component-definition.json、component-filters.json和component-models.json）中，这些文件在生成项目JSON中涉及。

实施块

您将添加的文件

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

呈现表单和占位符结果

构建decorate()函数以呈现产品选择、邮政编码输入、提交按钮和空的结果区域。 暂时将提交处理程序保留为存根。

readBlockContent()从块的DOM中读取两个已编写的字段。 通用编辑器按字段顺序将每个模型字段呈现为子<div>，因此标题是第一个子项的文本，按钮标签是第二个子项的文本，当字段为空时，将回退到默认值：

// 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和data-aue-type在通用编辑器中将标题和按钮文本标记为可编辑字段，此模式与创建块中使用的模式相同。 这是基架，不是最终文件。 引用实现的estimated-delivery.js还包括从将块连接到AEM Edge函数中的获取逻辑，该逻辑一旦到位，就会链接到完整文件。

设置块的样式

为表单布局添加CSS以及占位符状态，结果将声明Edge Delivery Services块稍后呈现（加载、错误、成功），然后遵循使用CSS和JavaScript开发块。 来自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;
}

完整文件还会为加载旋转图标和成功卡的状态颜色(in-stock、low-stock、out-of-stock)设置样式，在将该块连接到AEM Edge函数之前，Edge Delivery Services块不会呈现这些颜色。

推送代码并创作块

在本地预览块

在本地运行Edge Delivery Services站点，并在连接获取调用之前确认占位符渲染。

$ aem up

打开您在http://localhost:3000/dev/branches/estimated-delivery上创作的页面，并确认标题、表单和占位符文本呈现为已创作。 提交按钮还未执行任何操作。

后续步骤

在将块连接到AEM Edge函数中，您将此Edge Delivery Services块连接到上一步中构建的AEM Edge函数，并用实时数据替换占位符结果。

其他资源