了解Sitecore 商务 Javascript架构

时间阅读: 大约7 - 10分钟
用于: 前端开发人员、Sitecore 商务开发人员和Sitecore开发人员
主要结论: 了解Sitecore 商务呈现如何在前端相互交互.

在最近的Sitecore 商务项目中,我们需要扩展和添加几个新的商务组件来支持自定义功能. 为了做到这一点,我们需要了解现有组件的前端是如何构成的. 我的任务是深入研究javascript,并与团队其他成员分享这些发现. 在这篇文章中,我也将与你分享我的发现.

的主题

Sitecore 商务提供了以下五个主题. 理解这些主题包含什么内容是很重要的,这样你才能以类似的方式构建主题.

  1. 商务核心库 —提供组件所需的第三方依赖关系. 这包括knockout with validation、jquery、BrainTree和Bootstrap
  2. 商务核心主题 -这提供了主要的应用程序代码. 这是组件初始化发生的地方.
  3. 商业主题 -这包含了一些在组件代码中有用的全局实用函数,比如货币格式化和获取站点详细信息.
  4. 商务服务主题 -这个主题包含了所有组件之间共享的代码,比如ajax服务和事件代理(稍后会详细介绍).
  5. 商业组件的主题 -此主题包含所有组件功能. 你将在这里度过大部分时间.

事件代理模式

许多商务组件需要协同工作,才能制作出功能性的web页面. 然而,组件之间也没有任何直接的知识. 因此,它们需要在不直接引用其他组件的情况下进行通信. 这是使用事件代理模式完成的.

简而言之,组件将事件传递给集中式事件代理,而集中式事件代理又将通知正在列出特定事件的组件. 这些代理还充当上下文项,可以存储特定特性的当前状态. 这些都可以在 商务服务主题. 最初的代理提供者是:

  1. productselection -处理产品、变体或包更改事件
  2. productprice —当产品价格设置后,用于通知组件
  3. cart-context -用于通知其他组件购物车已更新
  4. 消息传递 -处理来自组件的应该显示给用户的消息

组件

总的来说,您将主要扩展 商业组件的主题 在使用商业组件时. 大多数组件javascript使用MVVM模式使用KnockoutJS来驱动视图. 每个组件将被拆分为一个或两个文件. 第一个是初始化器,它被 应用程序.js 在核心主题中. 初始化器在代理中注册事件,并在需要时初始化Knockout视图模型. 第二个文件是驱动Knockout视图的视图模型.

(function (根, factory) {
  使用严格的;
  If (typeof 定义 === 'function') && 定义.amd) {
    //使用AMD的定义函数来支持AMD的模块
    定义(“出口”,工厂);
  } else if (typeof exports === 'object') {
    //支持CommonJS
    工厂(出口);
  }

  //浏览器全局变量
  根.ProductPrice =工厂;
  根.ProductPrice_ComponentClass = " cxa-productprice-组件”;
}(this, function (element) {
  使用严格的;
  var组件=新组件(元素);
  组件.的名字 = " CXA /功能/ ProductPrice”;
  组件.priceInfoVM =零;

  / / ProductPriceContext处理程序
  组件.ProductPriceSetPriceHandler =函数(源,数据){
    组件.priceInfoVM.switchInfo(数据);
  };

  组件.InExperienceEditorMode = function () {
    组件.视觉.禁用();
  };

  组件.StartListening = function () {
    组件.HandlerId = ProductPriceContext.SubscribeHandler(组件.ProductPriceSetPriceHandler);
  };

  组件.StopListening = function () {
    如果(组件.HandlerId) {
      ProductPriceContext.UnSubscribeHandler(组件.HandlerId);
    }
  };

  组件.初始化 = function () {
    组件.priceInfoVM =新的PriceInfoViewModel(组件.RootElement);
    ko.applyBindingsWithValidation(组件.priceInfoVM,);
    组件.视觉.出现();
    组件.StartListening ();
  };

  返回组件;
}));

上面是一个组件初始化器的例子. 它取自产品价格部分. 我不会讲太多细节,但理解初始化器是如何被调用的很重要. 当组件在页面上找到时,应用程序代码会动态地初始化它们. 组件由组件html的根元素上的特定数据属性定位.

你可以看到 根.ProductPrice_ComponentClass 属性与组件HTML上的类匹配. 全局变量, 根.ProductPrice,也与 data-cxa-组件-class 数据属性. 此属性是应用程序用于调用 初始化 组件的函数. 元素查找所有元素 data-cxa-组件-class 属性并循环遍历每个变量以初始化它们. 需要注意的是,如果一个组件出现错误,那么其他组件将无法加载.

结束

我没有讲太多细节,但我希望这些足够让你们开始. 我鼓励您深入研究开箱即用的商业主题,看看所有部分是如何相互交互的. 一个好的开始是看产品价格表. 它是一个简单而小的组件,但与其他组件交互,易于遵循.

我希望这篇文章对你有用. 如果你有任何问题,请随时留下评论.