Limyee 电商平台使用小组件来实现用户界面的各个单元。
小组件是脚本化的、升级安全的、可本地化的、可配置的、可分发的、可在浏览器中完全编辑的,并且可以通过 REST 和小组件扩展访问平台 API。
小组件实现了 Limyee 电商平台的几乎整个用户界面,包括页眉,页脚,内容和管理界面等等的元素。可以创建和编辑小组件,完全自定义这些体验。
为什么使用小组件?
每当需要自定义用户界面时,就会使用小组件,这超越了通过主题配置可以执行的操作(例如:调整页面布局或这些页面上的小组件配置)。现有的小组件可以以安全的方式进行调整,并且可以编写或安装新的小组件。小组件的一个不太常见但很重要的用途是启用实现了 IScriptablePlugin 的插件以提供可脚本化的标记。
小组件在哪里?
小组件无处不在。如果您正在查看用户界面,则可能正在查看小组件。以下屏幕截图显示了一个商品详情的页面,突出显示了各个小组件。
图:商品详情页面
图:在编辑视图的商品详情页面,标识小组件
小组件的组件
在主题中
小组件通常由主题使用。主题定义页眉、页脚和页面。它们的每一个都定义了一个布局。布局包含一个或多个区域,每个区域都可以容纳小组件的实例。小组件可以作为独立的、可配置的实例在整个主题中多次使用。
在小组件中
小组件包含几个主要组件:
- 概述元数据:有关小组件的一般信息,包括其名称、描述、缓存、可用上下文和其他详细信息。
- 内容脚本:用 Velocity 编写的主脚本,定义了小组件的界面。
- 配置脚本:XML,用于定义可供管理员使用的配置小组件的动态字段。
- 标题脚本:可以动态定义小组件标题内容的脚本。
- CSS类 脚本:可以动态定义要应用于小组件包装器的 CSS 类的脚本。
- 语言资源:小组件使用的语言资源的定义以及这些资源的默认翻译。
- 附件:小组件所需的任何其他文件的集合,例如 JavaScript 文件、图像、样式表或单独的速度脚本。
小组件有:
脚本
小组件是用常见的 Web 技术编写的,如HTML,CSS,JavaScript和一种名为 Velocity 的简单服务器端脚本语言。
<ul>
## Say hello 10 times
#foreach($i in [1..10])
<li>Hello from a Widget!</li>
#end
</ul>
API 使用者
小组件可以通过两种方式完全访问平台 API:
- 服务器端可让小组件调用 API,由小组件的 Velocity 脚本直接调用。
- 客户端的 REST API 与 JavaScript。
#set ($unreadCount = $limyee_v1_notification.List("%{ IsRead = 'false', PageSize = 1, PageIndex = 0 }").TotalCount) Hello from a Widget! You have ${unreadCount} unread notifications.
除了平台 API 之外,小组件还可以访问任何自定义 API,如小组件扩展或插件提供的自定义 REST 端点。
升级安全
小组件与平台的非 UI 组件严格分离。由于小组件只能访问公共的、受支持的平台 API,这些 API 已经保证是升级安全的,因此,小组件本身也是升级安全的。当前版本平台编写的小组件将继续可以在未来的版本上工作,即使引入了其他平台 API 也是如此。
关于小组件可升级性,唯一需要注意的项目是主题升级,因为小组件通常依赖于主题进行样式设置。
可本地化
小组件是完全可本地化的。小组件需要向用户显示的所有语言字符串,以及这些资源的一组或多组默认翻译,均由小组件定义。可以导出、翻译和重新导入小组件资源,以便为现有的小组件引入更出色的本地化。
配置
小组件可由管理员和非开发人员完全配置。小组件可以根据需要定义任意数量的配置选项,并根据需要使用该配置。
可分发
小组件可以单独打包为可导出的 XML 文件,也可以成组打包。小组件导出包含小组件的所有组件,包括其概述、内容脚本、配置脚本、标头脚本、CSS 类脚本、语言资源和所有小附件。小组件导出的文件可以导入到其他 Limyee 电商平台环境中。
浏览器内可编辑
可以使用小组件工作室在浏览器中完全管理、编辑和创作小组件,包括安装、导出、翻译和编辑,以及创建新小组件。
小组件版本
小组件可以存在于多个版本中。
主题与非主题
小组件可以使用主题版本。小组件的主题版本是小组件的完全独立实现,可以完全重新定义自己的脚本。它仅与非主题版本共享小组件的标识符。
当主题中的页面、页眉或页脚配置要使用小组件时,将首先查找与主题匹配的该小组件的特定变体,然后再回退到非主题版本。一个小组件可以有任意数量的主题版本。同样,小组件也可以存在非主题变体。
网站消息的优先使用主题版本,而不是非主题版本。网站标题没有主题版本,因此使用非主题版本。
自定义和出厂默认值
小组件可以以自定义或出厂默认状态存在。
出厂默认小组件由 CFS 中的源文件定义。出厂默认小组件与出厂默认小组件提供程序插件相关联,包括直接与平台或第三方插件捆绑在一起的插件。出厂默认插件仍可在小组件工作室中进行自定义,但这些自定义项将作为替代出厂默认定义。因此,当主题配置要调用给定的小组件时,它将首先尝试使用小组件的自定义版本(如果存在),然后再进入出厂默认实现。自定义小组件版本始终可以恢复为出厂默认设置。
自定义小组件不仅覆盖出厂默认版本。完全原创的小组件可以直接在小组件工作室中创建,纯粹地作为自定义小组件。虽然自定义小组件也可以有自己的主题变体,但自定义小组件无法恢复为默认值,只能删除。
以上所有内容都说明了小组件工作室的标准用法。Limyee 电商平台也可以配置为在开发人员模式下进行本地开发 ,甚至允许在小组件工作室中编辑出厂默认小组件。
暂存/预览
小组件更改将与其他主题更改一起暂存 。暂存意味着对小组件所做的编辑不会立即公开。它们仅供正在编辑的开发人员使用。在编辑期间,还可以在站点上实时预览暂存的小组件修改。然后,可以发布暂存小组件更改或将其还原回非暂存状态。
可编写脚本的插件
除了主题之外,小组件还为实现 IScriptablePlugin 的插件提供了可编写脚本的用户界面。
一个示例用例是一个 IActivityStoryType 插件,它定义了一种在动态流中显示的新类型动态,以及围绕创建时间和方式的逻辑。由于 IActivityStoryType 插件还负责定义动态的渲染,因此还实现了 IScriptablePlugin,可以使小组件通过脚本执行实际渲染。该小组件甚至可以注册,因此也可以在小组件工作室中进行编辑。