所謂 express checkout(快速結賬），是一種超快速結賬表格，通常為回頭客設計，可減少表單欄位以確保更快的結賬流程。運輸、計費和付款資訊在站點的一個包含區域中提交，從而為客戶提供簡單和高效的服務。快速結帳允許使用者跳過所有步驟，並在單擊“轉到結帳”後立即看到評論摘要頁面。

Angular Page Guard 將檢查使用者是否至少有 1 個送貨地址和 1 種付款方式 - 如果有更多，它將選擇預設值。 設定好地址後，會選擇當前配置的預設投遞方式。

如果一切都成功了，使用者應該被重定向到評論摘要。 否則，他將完成結帳步驟。

在評論摘要步驟中，使用者將看到預先設定的資料，也有可能更新步驟。

![](https://img-blog.csdnimg.cn/img_convert/a8733595bd392b2e94ebd332d5b7b5d5.png)

# 如何啟用

該功能由 2 個新的可選屬性控制：

- express 標記位：在預設運輸方式和付款方式可用時允許快速結帳。
- 陣列 defaultDeliveryMode：i.a. 的預設交付模式。 用於快速結帳。 按一般偏好（例如 DeliveryModePreferences.LEAST_EXPENSIVE）或特定交付程式碼的順序設定偏好。

```typescript
checkout?: {
    //...
    express?: boolean;
    defaultDeliveryMode?: Array<deliverymodepreferences string="">;
  };
```

Spartacus 支援下列幾種交貨模式的偏好設定：

```typescript
enum DeliveryModePreferences {
  FREE = 'FREE',
  LEAST_EXPENSIVE = 'LEAST_EXPENSIVE', // but not free
  MOST_EXPENSIVE = 'MOST_EXPENSIVE',
}
```

預設的配置：

```typescript
  checkout: {
    //...
    express: false,
    defaultDeliveryMode: [DeliveryModePreferences.FREE],
  };
```

客戶可以使用下面的程式碼讓自己的配置生效：

```typescript
provideConfig({
  //...
  checkout: {
    //...
    express: true,
    defaultDeliveryMode: ['sample-code'],
  },
});
```

express checkout 的實現程式碼：

![](https://img-blog.csdnimg.cn/img_convert/9122513a91913b22e14d2064216090d9.png)

注意第 53 行 debounceTime(0) 的用法。

debounceTime 將源發出的值延遲給定的到期時間。 如果在此時間內有新值到達，則刪除先前的掛起值並重置計時器。 以這種方式 debounceTime 跟蹤最近的值並在給定的到期時間過去時發出該最近的值。

該運算元多用於每秒可觸發數十次甚至數百次的事件。 最常見的例子是 DOM 事件，例如滾動、滑鼠移動和按鍵。 使用 debouceTime 時，您只關心最終狀態。 例如，使用者停止滾動時的當前滾動位置，或使用者停止輸入字元後搜尋框中的最終文字。 實際上，使用運算子允許將多個順序事件組合成一個事件，因此只執行一次回撥。 這可以大大提高效能。

去抖動的常見場景是調整大小、滾動和 keyup/keydown 事件。 此外，您應該考慮將任何觸發過多計算或 API 呼叫的互動包含在去抖動中。</deliverymodepreferences>

SAP Spartacus express checkout 設計

相關文章