必须包含在每个页面中的 webApplicationInjector.js 文件。 Spartacus 的 SmartEdit 安装说明详细介绍了如何将此 js 文件包含到您的应用程序中。
A preview ticket API mechanism
Get cmsTicketId (also called previewToken)
当在 SmartEdit 中启动 Spartacus 时,SmartEdit 会以 cmsTicketId 作为参数向 Spartacus 发送请求。当在 SmartEdit 中启动 Spartacus 时,SmartEdit 会以 cmsTicketId 作为参数向 Spartacus 发送请求。
https://localhost:4200/cx-preview?cmsTicketId=6477500489900224fda62f41-167a-40fe-9ecc-39019a64ebb9
默认情况下,SmartEdit 将 /cx-preview 附加到店面 URI,以便它可以预览您的店面。 但是您可以配置 SmartEdit 以将请求路由到应用程序中的另一个端点。 使用 impex 中的 storefrontPreviewRoute 属性指定自定义店面路由,如下例所示:
cmsTicketId 在后端生成。 它包含许多SmartEdit 所需的信息,例如site-id 或catalogVersion。
Smartedit Interceptor
为了使 SmartEdit 能够在 Spartacus 中加载页面,它需要获取所有必需的上下文数据,包括站点、内容目录和内容目录版本,也可以是指定语言或日期和时间的。 因此,需要将 cmsTicketId 附加到从 Spartacus 发送到后端的任何 CMS 请求。
在 Spartacus 中,我们有 CmsTicketInterceptor。 如果 cmsTicketId 存在并且请求是 cms 指定的,它将添加 cmsTicketId 作为请求参数之一。
例子:https://localhost:9002/rest/v2/electronics-spa/cms/pages?fields=DEFAULT&lang=en&curr=USD&cmsTicketId=6477500489900224fda62f41-167a-40fe-9ecc-39019a64ebb9
HTML Markup Contract
HTML 标记合同规定每个 CMS 组件和每个内容槽都必须包装在一个 HTML 标签中并包含特定元素。
properties in CMS items received from backend
使用 cmsTicketId 发送 CMS 请求,响应 JSON 数据中会有属性字段。 properties 包含包含 CMS 项目所需的动态属性组。 例如,CMS 页面中的属性可能包含以下数据:
cmsTicketId 在后端生成。 它包含许多SmartEdit 所需的信息,例如site-id 或catalogVersion。
Smartedit Interceptor
为了使 SmartEdit 能够在 Spartacus 中加载页面,它需要获取所有必需的上下文数据,包括站点、内容目录和内容目录版本,也可以是指定语言或日期和时间的。 因此,需要将 cmsTicketId 附加到从 Spartacus 发送到后端的任何 CMS 请求。
在 Spartacus 中,我们有 CmsTicketInterceptor。 如果 cmsTicketId 存在并且请求是 cms 指定的,它将添加 cmsTicketId 作为请求参数之一。
例子:https://localhost:9002/rest/v2/electronics-spa/cms/pages?fields=DEFAULT&lang=en&curr=USD&cmsTicketId=6477500489900224fda62f41-167a-40fe-9ecc-39019a64ebb9
HTML Markup Contract
HTML 标记合同规定每个 CMS 组件和每个内容槽都必须包装在一个 HTML 标签中并包含特定元素。
properties in CMS items received from backend
使用 cmsTicketId 发送 CMS 请求,响应 JSON 数据中会有属性字段。 properties 包含包含 CMS 项目所需的动态属性组。 例如,CMS 页面中的属性可能包含以下数据:
在组 smartedit 中,有课程。 这是此 CMS 页面所需的 SmartEdit 合同。 因此,我们需要将这些“类”添加到 html body 标签的类列表中。 如果您检查 html 页面源代码,您将看到 body 标签具有“类”。CMS 插槽和组件也包含这些属性。 我们需要将这些属性添加到组件/插槽标签中。 以下是“HelpLink”组件的示例。对应的 HTML 代码:DynamicAttributeService
在 Spartacus 中,我们有 DynamicAttributeService。 它可以为 DOM 添加动态属性。 这些属性是从从后端接收的 CMS 项目的属性中提取的。
可以有许多不同的属性组,其中之一是 smartedit。 但是 EC 允许插件创建不同的组。 例如,个性化可以添加脚本组等。
要将 SmartEdit HTML 标记合约添加到 Slot,我们有以下功能:
addDynamicAttributes 函数在 3.2 版中已弃用。 如果您使用的是 Spartacus 3.2 或更新版本,请改用 addAttributesToComponent 和 addAttributesToSlot 函数。
Rerendering Components and Content Slots After Editing
在用户对组件或内容槽进行更改后,用户将希望看到页面上反映的更改。 SmartEdit 通过仅重新渲染更改的内容来优化此功能。
对于前端呈现的页面,店面重新呈现页面而不是 SmartEdit。 在这种情况下,Spartacus 在 window.smartedit 命名空间中实现了 renderComponent 函数,如以下代码摘录所示:
如果 parentId 不存在,则 CMS 项是一个槽,然后 renderComponent 实际上刷新整个 CMS 页面。 如果 parentId 确实存在,则 CMS 项是一个组件,在这种情况下,只会刷新此 CMS 组件。
Default Preview Category/Product
每个站点都有 defaultPreviewCategory、defaultPreviewProduct 和 defaultPreviewCatalog。 例如:
在 SmartEdit 中打开分类或产品页面时,您会发现不仅加载了 CMS 页面,还加载了默认的预览产品/分类。
在 SmartEdit 中,在产品详细信息页面中打开代码为 2053367 的产品: