- 本地啟動 Hybris 伺服器
- 本地啟動 Spartacus
- Backoffice WCMS site 裡維護的 preview url 為：`http://localhost:4299/powertools-spa`

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

- 確保瀏覽器裡輸入 `http://localhost:4299/powertools-spa` 之後，可以正常訪問。url 自動變為：`http://localhost:4299/powertools-spa/en/USD/`

第一個請求，這個 `cmsTicketId` 不是 Spartacus 生成的。應該是 SmartEdit 從 Hybris 伺服器獲取的。

> GET /powertools-spa/cx-preview?cmsTicketId=647882292103273617673d6f-5d1f-4c1e-96c0-a97f1560226a HTTP/1.1
![](https://img-blog.csdnimg.cn/img_convert/a807a1f5a10e2dcd626fbbe17d2ba48a.png)

response：得到一個 CSR Spartacus home page：
![](https://img-blog.csdnimg.cn/img_convert/6230a5c1c78ebcad8c86b7b9c1b84d91.png)

完整的 url：http://localhost:4299/powertools-spa/cx-preview?cmsTicketId=647882292103273617673d6f-5d1f-4c1e-96c0-a97f1560226a

把這個 url 直接貼上到瀏覽器位址列，也能工作：
![](https://img-blog.csdnimg.cn/img_convert/8e5488de15e0e11fe43170885012225e.png)

換一個不存在的 `cmsTicketId` 試試。

http://localhost:4299/powertools-spa/en/USD/cx-preview?cmsTicketId=6

似乎仍然可以工作：
![](https://img-blog.csdnimg.cn/img_convert/40258ce8494f555817c61341556ea62a.png)

為了使 SmartEdit 能夠在 Spartacus 中載入頁面，它需要獲取所有需要的上下文資料，包括站點、內容目錄和內容目錄版本，也可以是指定的語言，或日期和時間。 因此，cmsTicketId 需要附加到從 Spartacus 傳送到後端的任何 CMS 請求中。

這些 `cmsTicketId` 可以在 Chrome 開發者工具裡觀察到。Spartacus 在正常模式下執行，是看不到這個欄位的。

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

在 Spartacus 中，我們有 CmsTicketInterceptor。 如果 cmsTicketId 存在並且請求是 cms 指定的，它會將 cmsTicketId 新增為請求引數之一。

使用 cmsTicketId 傳送 CMS 請求，響應 JSON 資料中會有 properties 欄位。 properties 包含包含 CMS 專案所需的動態屬性組。 例如，CMS 頁面中的屬性可能包含以下資料：

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

在 Spartacus 中，我們有 DynamicAttributeService。 它可以為 DOM 新增動態屬性。 這些屬性是從從後端接收的 CMS 專案的屬性中提取的。

要將 SmartEdit HTML 標記合約新增到 Slot，我們有以下功能：

```typescript
private addSmartEditContract(slot: ContentSlotData): void {
    this.dynamicAttributeService.addDynamicAttributes(
      slot.properties,
      this.hostElement.nativeElement,
      this.renderer
    );
}
```

對於前端呈現的頁面，店面重新呈現頁面而不是 SmartEdit。 在這種情況下，Spartacus 在 window.smartedit 名稱空間中實現了 renderComponent 函式，如以下程式碼摘錄所示：

```typescript
window.smartedit.renderComponent = function(componentId, componentType, parentId) { ... };
```

如果 parentId 不存在，則 CMS 專案是一個插槽，然後 renderComponent 會實際重新整理整個 CMS 頁面。 如果 parentId 確實存在，則 CMS 項是一個元件，在這種情況下，僅重新整理此 CMS 元件。

更多Jerry的原創文章，盡在："汪子熙":
![](https://img-blog.csdnimg.cn/img_convert/7b404afa4f4e4ab757caba4ec6a782e6.png)

SAP Commerce Cloud SmartEdit 開啟 Spartacus home page 的網路請求

相關文章