官方文档

SmartEdit 是一个可插拔的 JavaScript 框架,附带一个 UI,使开发人员能够管理现有的网页。

SmartEdit 生态系统由共同提供 SmartEdit 产品的 modules 和 extensions 组成。

SmartEdit 是 SmartEdit 模块中一个前端驱动的可扩展应用程序。 CMS REST 调用的 SAP Commerce Cloud 实现是 WCMS 模块的一部分。 SmartEdit 的所有前端扩展 SmartEdit 都需要 npm-ancillary modules 用于其构建生命周期。

您必须安装 smarteditaddon AddOn 才能使用 SmartEdit 编辑 SAP Commerce Cloud Accelerator 店面。 smarteditaddon 插件在任何基于 coreaccelerator 的店面中实现 SmartEdit contract.

You must configure your storefront so that you can edit it using SmartEdit. SAP provides the SmartEdit Contract for this purpose. The SmartEdit framework is designed to work on any storefront, SAP Commerce Cloud Accelerator or third party, that implements the SmartEdit Contract. Once you have implemented this contract, the SmartEdit web application will provide you with the necessary hooks to enhance the customer experience.

If you use an SAP Accelerator storefront, the smarteditaddon AddOn implements the conditions of the contract so you don’t have to.

SmartEdit 是一个用于管理店面内容的 Web 应用程序。 如果店面遵守 SmartEdit 店面设计 contract,则该网站的店面可以由 SmartEdit 进行编辑。

对于使用 yacceleratorstorefront 或 yb2bacceleratorstorefront EXTENSION 创建的店面,您可以通过启用 smarteditaddon AddOn 使用 SmartEdit 编辑店面。 此插件确保可以使用 SmartEdit Web 应用程序编辑基于 coreaccelerator 的店面的内容。

cx-for-spa recipe 里是包含了 SmartEdit:

当允许使用 SmartEdit Web 应用程序编辑店面时,各种菜单和操作将显示在店面页面内容的顶部。 页面内容可以根据多种条件而变化,例如站点、内容目录、内容目录版本、语言以及日期和时间。 这些变量中的每一个都构成了用户的体验上下文。 SmartEdit 使用 previewwebservices extension提供的 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 Web 应用程序,用户必须输入有效的用户名和密码才能登录。如果用户有效,则将用户凭据发送到授权服务器并返回 OAuth 令牌。 SAP Commerce Cloud Platform 支持此授权功能。 同样,所有 CMS API 都受到保护,并要求在请求标头中提供适当的授权令牌。

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的原创文章,尽在:“汪子熙”:

SAP Commerce Cloud SmartEdit 学习笔记相关推荐

  1. SAP Commerce Cloud SmartEdit 的安装

    执行手动安装时要包含的扩展,必须在 localextensions.xml文件中包含以下扩展: cmsbackoffice cmssmartedit cmssmarteditwebservices c ...

  2. SAP Commerce Cloud Spartacus UI 的购物车 Cart 功能

    此功能是在 TUA Spartacus 库的 1.0 版中引入的. 购物车在 TUA Spartacus 与核心 Commerce Spartacus 中的工作方式不同,需要支持产品供应以及复杂的定价 ...

  3. SAP Commerce Cloud Storefront 框架选型:Accelerator 还是 Spartacus?

    Choosing Which Storefront to Use for Your SAP Commerce Cloud Solution 有许多使用 SAP Commerce Cloud 创建店面的 ...

  4. 选择 SAP Spartacus 作为 SAP Commerce Cloud Storefront 实现框架的五个理由

    原文:Five Reasons to Move to a Project Spartacus JavaScript Storefront 如果您已经阅读了 SAP Commerce Cloud Pro ...

  5. 将您的基于 Accelerator 的 SAP Commerce Cloud Storefront 迁移到 Spartacus Storefront

    原文:Migrate Your Accelerator-based Storefront to Project Spartacus 如果您已阅读过"迁移到 Spartacus javascr ...

  6. 一小时内在本地搭建 SAP Commerce Cloud(电商云)的前后台运行环境

    这是Jerry 2021年的第 21 篇文章,也是汪子熙公众号总共第 292 篇原创文章. 最近一段时间, Jerry 陆续把自己在 SAP Commerce Cloud (电商云) 新一代前台页面开 ...

  7. SAP 产品一脉相承的 UI 增强思路,在 SAP Commerce Cloud(电商云) UI 增强实现中的体现

    本文首先快速回顾几种 SAP 产品中的 UI 增强思路,然后具体介绍该思路是如何在 SAP Commerce Cloud(电商云) UI 增强中贯彻实施的. Jerry 之前的文章:Jerry 在 2 ...

  8. SAP Commerce Cloud (电商云) UI 的懒加载功能

    最近工作中处理了 SAP Commerce Cloud (电商云) UI 的一个懒加载 (Lazy Load) 功能的问题,这里把自己学到的东西做个记录. UI 懒加载,有时又称惰性加载,延迟加载,是 ...

  9. 如何使用API的方式消费SAP Commerce Cloud的订单服务

    最近Jerry在做一个微信和SAP Commerce Cloud集成的项目,需要在微信里调用后者的Restful API进行订单创建和读取.以前Jerry对SAP Commerce Cloud知之甚少 ...

最新文章

  1. OpenCV像素点处理
  2. linux下如何查看文件大小 快速找到最大文件的方法
  3. flex弹性布局操练2
  4. C语言 程序代码编写规范
  5. Windows删除删除文件提示无法读源文件或磁盘解决方法
  6. fiddler基础入门
  7. 单例设计模式 序列化破坏单例模式原理解析及解决方案?
  8. Ubuntu 软件源sources.list
  9. linux c的内存映像
  10. 如何建立MFC绘图工程:外貌框架_基于对话框(开发平台VS2017)
  11. 你们投资在p2p的钱都怎么样了?
  12. 数据挖掘与其商务智能上的应用的实验报告
  13. 初始化和清理(垃圾回收器)
  14. 我的oh my zsh主题
  15. python分秒换算_如何将度分秒转换为度分
  16. MDM主数据管理平台开发精要
  17. xml 处理大于号与小于号
  18. js 删除节点小案例
  19. 如何提高自身代码能力
  20. android通讯录照片同步,通讯录同步助手

热门文章

  1. linux sed i 大文件,sed -i   修改链接文件注意事项   破坏了原文件
  2. 知道自己想要什么,保持自己的节奏。
  3. MySQL学习笔记(二):MyISAM 存储引擎
  4. 图形系统中的仿射变换
  5. 数据结构 - 树形选择排序 (tree selection sort) 具体解释 及 代码(C++)
  6. Android优化系列之apk瘦身
  7. 跨域iframe的高度自适应
  8. asp.net ajax1.0基础回顾(六):调用ASPX页面方法
  9. jvm 06-G1收集器
  10. css 样式通用样式