- 本地啟動 Hybris 伺服器
- 本地啟動 Spartacus
- Backoffice WCMS site 裡維護的 preview url 為:
http://localhost:4299/powertools-spa
- 確保瀏覽器裡輸入
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
response:得到一個 CSR Spartacus home page:
完整的 url:http://localhost:4299/powerto...
把這個 url 直接貼上到瀏覽器位址列,也能工作:
換一個不存在的 cmsTicketId
試試。
http://localhost:4299/powerto...
似乎仍然可以工作:
為了使 SmartEdit 能夠在 Spartacus 中載入頁面,它需要獲取所有需要的上下文資料,包括站點、內容目錄和內容目錄版本,也可以是指定的語言,或日期和時間。 因此,cmsTicketId 需要附加到從 Spartacus 傳送到後端的任何 CMS 請求中。
這些 cmsTicketId
可以在 Chrome 開發者工具裡觀察到。Spartacus 在正常模式下執行,是看不到這個欄位的。
在 Spartacus 中,我們有 CmsTicketInterceptor。 如果 cmsTicketId 存在並且請求是 cms 指定的,它會將 cmsTicketId 新增為請求引數之一。
使用 cmsTicketId 傳送 CMS 請求,響應 JSON 資料中會有 properties 欄位。 properties 包含包含 CMS 專案所需的動態屬性組。 例如,CMS 頁面中的屬性可能包含以下資料:
在 Spartacus 中,我們有 DynamicAttributeService。 它可以為 DOM 新增動態屬性。 這些屬性是從從後端接收的 CMS 專案的屬性中提取的。
要將 SmartEdit HTML 標記合約新增到 Slot,我們有以下功能:
private addSmartEditContract(slot: ContentSlotData): void {
this.dynamicAttributeService.addDynamicAttributes(
slot.properties,
this.hostElement.nativeElement,
this.renderer
);
}
對於前端呈現的頁面,店面重新呈現頁面而不是 SmartEdit。 在這種情況下,Spartacus 在 window.smartedit 名稱空間中實現了 renderComponent 函式,如以下程式碼摘錄所示:
window.smartedit.renderComponent = function(componentId, componentType, parentId) { ... };
如果 parentId 不存在,則 CMS 專案是一個插槽,然後 renderComponent 會實際重新整理整個 CMS 頁面。 如果 parentId 確實存在,則 CMS 項是一個元件,在這種情況下,僅重新整理此 CMS 元件。