理解Sitecore 商务 Javascript架构

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

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

的主题

开箱即用Sitecore 商务提供了以下五个主题. 理解这些主题包含的内容非常重要,这样您就可以以类似的方式构建主题.

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

事件代理模式

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

简单地说,组件将一个事件传递给一个集中的事件代理,后者将通知列出特定事件的组件. 这些代理还充当上下文项,可以存储特定特性的当前状态. 这些都可以在 商务服务主题. 最初的经纪人提供者是:

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

组件

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

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

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

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

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

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

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

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

  返回组件;
}));

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

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

结束

我没有讲太多细节,但我希望这些足够让你们开始. 我鼓励你深入挖掘商业主题,看看所有组件是如何相互作用的. 一个好的开始是看产品的价格呈现. 它是一个简单的小组件,但与其他组件交互,易于操作.

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

友情链接: 1 2 3