SAP|SAP Commerce Cloud SmartEdit 学习笔记
官方文档
SmartEdit 是一个可插拔的 JavaScript 框架,附带一个 UI,使开发人员能够管理现有的网页。
SmartEdit 生态系统由共同提供 SmartEdit 产品的 modules 和 extensions 组成。
SmartEdit 是 SmartEdit 模块中一个前端驱动的可扩展应用程序。 CMS REST 调用的 SAP Commerce Cloud 实现是 WCMS 模块的一部分。 SmartEdit 的所有前端扩展 SmartEdit 都需要 npm-ancillary modules 用于其构建生命周期。
【SAP|SAP Commerce Cloud SmartEdit 学习笔记】您必须安装 smarteditaddon AddOn 才能使用 SmartEdit 编辑 SAP Commerce Cloud Accelerator 店面。 smarteditaddon 插件在任何基于 coreaccelerator 的店面中实现 SmartEdit contract.
SmartEdit 是一个用于管理店面内容的 Web 应用程序。 如果店面遵守 SmartEdit 店面设计 contract,则该网站的店面可以由 SmartEdit 进行编辑。
对于使用 yacceleratorstorefront 或 yb2bacceleratorstorefront EXTENSION 创建的店面,您可以通过启用 smarteditaddon AddOn 使用 SmartEdit 编辑店面。 此插件确保可以使用 SmartEdit Web 应用程序编辑基于 coreaccelerator 的店面的内容。
cx-for-spa recipe 里是包含了 SmartEdit:
文章图片
当允许使用 SmartEdit Web 应用程序编辑店面时,各种菜单和操作将显示在店面页面内容的顶部。 页面内容可以根据多种条件而变化,例如站点、内容目录、内容目录版本、语言以及日期和时间。 这些变量中的每一个都构成了用户的体验上下文。 SmartEdit 使用 previewwebservices 扩展提供的 Preview API 将店面加载到指定的体验上下文中。
文章图片
SmartEdit Architecture
SmartEdit 架构可以分为两个部分:前端和后端。如下:
- 前端:前端由 smartedit 和 cmssmartedit 扩展组成。这些扩展是使用 AngularJS 框架用 JavaScript 编写的。为了管理基于 JavaScript 的扩展的构建生命周期,即清理、构建、打包、缩小或美化代码,需要一些 SAP Commerce Cloud Platform 默认不提供的库。 SmartEdit 使用 npmancillary 扩展来存储和组织所需的库。
- 后端:后端由 smarteditwebservices、cmswebservices、cmssmarteditwebservices、cmsfacades、cms2 和 cms2lib 扩展组成。这些扩展是使用 Spring 框架在 Java 中构建的。
前端使用 RESTful API 与后端通信。与 CMS 相关的 REST API 在 smarteditwebservices、cmssmarteditwebservices 和 cmswebservices 扩展中定义。 CMS API 使用的业务逻辑驻留在 cmsfacades 扩展中,该扩展使用 cms2 和 cms2lib 扩展中可用的 CMS 服务。
SmartEdit 框架是一个以 UI 为中心的业务工具框架,允许用户以视觉增强的方式编辑更改。 它是一个轻量级 AngularJS JavaScript 应用程序,基于 SAP Commerce Cloud 提供的 UI(例如网站)和一组定义附加功能的模块。
具体技术设计可以看这里。
登录 smartedit,选择 site 和对应的 catalog:
文章图片
点 homepage:
文章图片
找到这个 homepage:
文章图片
编辑:
文章图片
page label 就是 url:
文章图片
如何创建新的页面 SmartEdit 提供了一个直观的向导,您可以使用它为内容目录创建类别、内容、电子邮件和产品页面。您还可以向页面添加限制,以指定在何种条件下向客户显示页面。
SmartEdit 提供了一个直观的向导来帮助您为内容目录创建页面。您可以创建类别、内容、电子邮件和产品页面。创建页面时,您可以选择创建主页面或变体页面。
primary page 是始终向所有用户显示的默认版本。您创建的所有变体页面都基于主页面。您无法为主页分配限制。当不存在变体页面或不存在与当前显示条件匹配的变体页面时,即显示条件不满足应用于现有的时间、用户组、类别等限制规则时,显示主页面变体页面。
变体页面基于主页面,但添加了限制。限制指定在何种条件下显示变体页面,例如当属于特定组的用户查看页面时,或者当用户在指定日期期间选择页面并且存在要在指定日期显示的变体页面时.您可以为变体页面添加类别、时间、用户组和其他限制。您可以添加到变体页面的限制类型取决于页面的类型。
创建页面时,您应该注意以下事项:
(1) 如果主页尚不存在,则您无法创建变体页面。变体页面必须基于主页面。
(2) 您只能为 category 和 product 页面类型创建一个主页。
(3) 您可以为 content page 类型创建多个主页面。
您只需要为内容页面指定一个页面标签,并且它在内容目录版本中必须是唯一的。您在主页上指定了一个页面标签,它被所有关联的变体页面继承。
您可以基于单个主页面创建多个变体页面。
您必须向变体页面添加至少一个限制。
SAP 建议您将页面添加到目录的暂存版本,以便您以后可以将更改与目录的在线版本同步。
文章图片
文章图片
选择一个 template:
文章图片
类型选择为 primary:
文章图片
Content Page 1 Template 的 content slots 可以在 Backoffice 里查看:
文章图片
文章图片
创建完毕后,状态为 draft:
文章图片
文章图片
点了 Sync 之后报错:
Items cannot be synched. One or more items haven't been approved for publishing
文章图片
创建完之后:
文章图片
其实可以通过 impex 的方式,直接把 page 和 content slot 等定义,直接导入系统。
page draft status:
文章图片
page 同步的前提条件是状态改为 Ready to Sync:
文章图片
To sync, update page status to Ready to Sync注意下图:我用 admin 登录进去时是看不见这些的:
文章图片
这涉及到 smartEdit 里的权限管理。
更多Jerry的原创文章,尽在:"汪子熙":
文章图片
推荐阅读
- Spring|Spring Cloud Feign实现文件上传下载的示例代码
- 为Google|为Google Cloud配置深度学习环境(CUDA、cuDNN、Tensorflow2、VScode远程ssh等)
- 【SpringCloud-Alibaba系列教程】8.一文学会使用sentinel
- java|java B2B2C 仿淘宝电子商城系统-Spring Cloud构建分布式电子商务平台
- Spring|Spring Cloud Feign组件
- Spring|Spring Cloud Alibaba之负载均衡组件 - Ribbon
- Spring|Spring Cloud学习day98(Eureka的原理和Ribbon负载均衡)
- 史上最简单的SpringCloud教程|史上最简单的SpringCloud教程 | 第十篇: 高可用的服务注册中心(Finchley版本)
- Spring|Spring Cloud Gateway真的有那么差吗()
- (三十)java版spring|(三十)java版spring cloud+spring boot+redis多租户社交电子商务平台- gateway限流