開發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以外的欄位型別，請遵循建立區塊中的模型語法。

註冊通用編輯器的區塊

區塊模型檔案本身並不足以讓Universal Editor在其插入選擇器中提供區塊。 另外兩個檔案需要先手動輸入，因為它們會依名稱列出區塊，而不是自動探索區塊。

將區塊新增至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()函式以呈現產品選擇、郵遞區號輸入、提交按鈕和空的結果區域。 暫時保留提交處理常式作為Stub。

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)的樣式，Edge Delivery Services區塊在將區塊連線至AEM Edge函式之前不會呈現這些色彩。

推播程式碼並編寫區塊

在本機預覽區塊

在本機執行Edge Delivery Services網站，並在連線擷取呼叫之前確認預留位置轉譯。

$ aem up

開啟您在http://localhost:3000/dev/branches/estimated-delivery編寫的頁面，並確認標題、表單及預留位置文字呈現為已編寫。 提交按鈕還沒有執行任何動作。

後續步驟

在將區塊連線至AEM Edge函式中，您將此Edge Delivery Services區塊連線至您在上一步中建立的AEM Edge函式，將預留位置結果取代為即時資料。

其他資源