理解Sitecore商业Javascript架构

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

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

的主题

Sitecore 商务提供了以下五个主题. 理解这些主题所包含的内容是很重要的,这样您就可以以类似的方式构建您的主题.

  1. 商务核心库 —提供组件中需要的第三方依赖项. 这包括使用验证、jquery、BrainTree和Bootstrap的knockout
  2. 商务核心主题 —这提供了主要的应用程序代码. 这是组件初始化发生的地方.
  3. 商业主题 -这包含了一些在组件代码中有用的全局实用函数,如货币格式化和检索站点详细信息.
  4. 商务服务主题 -这个主题包含了所有组件之间共享的代码,如ajax服务和事件代理(更多在一些).
  5. 商业组件的主题 -此主题包含所有组件功能. 这是你将花费大部分时间的地方.

事件代理模式

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

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

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

组件

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

(函数(根,工厂){
  使用严格的;
  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);
  };

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

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

  返回组件;
}));

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

正如你所看到的 根.ProductPrice_ComponentClass 初始化器中的属性匹配组件HTML上的类. 全局变量, 根.ProductPrice,也匹配 data-cxa-组件-class 数据属性. 应用程序使用此属性来调用 初始化 组件的函数. 函数的所有元素 data-cxa-组件-class 属性,并循环遍历每一个来初始化它们. 重要的是要注意,如果一个组件发生错误,其余组件将因此而无法加载.

结束

我没有讲太多细节,但我希望这足以让你们开始. 我鼓励您深入挖掘商业主题,看看所有部分是如何相互作用的. 一个好的开始是看产品的价格渲染. 它是一个简单而小巧的组件,但是可以与其他组件交互,并且易于遵循.

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