サイトコアコマース Javascript アーキテクチャの理解

Understanding the Sitecore Commerce Javascript Architecture
Understanding the サイトコア Commerce Javascript Architecture

最近のサイトコア Commerceのプロジェクトでは、カスタム機能をサポートするためにいくつかの新しいCommerceコンポーネントを拡張、追加する必要がありました。そのためには、既存のコンポーネントのフロントエンドがどのように構成されているかを理解する必要がありました。私はjavascriptを調べて、その結果をチームの他のメンバーと共有することを任されました。この記事では、私が発見したことを皆さんと共有します。

テーマについて

サイトコア Commerceには、以下の5つのテーマが用意されています。これらのテーマの内容を理解し、同様の方法でテーマを構成することが重要です。

  1. Commerce Core Libraries – コンポーネントで使用される必要なサードパーティの依存関係を提供します。これには、knockout with validation、jquery、BrainTree、およびBootstrapが含まれます。
  2. コマースコアテーマ – 主要なアプリケーションコードを提供します。ここでは、コンポーネントの初期化が行われます。
  3. コマースメインテーマ – 通貨の書式設定やサイトの詳細情報の取得など、コンポーネントコードの中で有用なグローバルユーティリティー関数がいくつか含まれています。
  4. コマースサービステーマ – このテーマには、ajaxサービスやイベントブローカー(詳細は後述)など、コンポーネント間で共有されるすべてのコードが含まれています。
  5. コマースコンポーネントテーマ – このテーマには、すべてのコンポーネント機能が含まれています。ほとんどの時間をここで過ごすことになります。

イベント・ブローカー・パターン

機能的なWebページを作るためには、多くのCommerceコンポーネントが連携して動作する必要があります。しかし、これらのコンポーネントはお互いを直接知ることはできません。そのため、他のコンポーネントを直接参照することなく通信する必要があります。これには、イベントブローカーパターンを使用します。

つまり、コンポーネントがイベントを中央のイベントブローカーに渡し、そのブローカーが特定のイベントをリストアップしているコンポーネントに通知するというものです。これらのブローカーは、特定の機能の現在の状態を保存するコンテキストアイテムとしても機能します。これらはすべて、Commerce Servicesテーマに含まれています。最初に提供されるブローカーは次のとおりです。

  1. product selection – 商品、バリアント、またはバンドルの変更イベントを処理する
  2. product price – 商品の価格が設定されたときにコンポーネントに通知するために使用する。
  3. cart context – カートが更新されたことを他のコンポーネントに通知するために使用されます。
  4. messaging – ユーザーに表示されるべきコンポーネントからのメッセージを処理します。

コンポーネント

コマースコンポーネントを扱う際には、基本的にCommerce Components Themeを拡張することになります。ほとんどのコンポーネント・ジャバスクリプトは、KnockoutJSを使ってビューを駆動するMVVMパターンを使用しています。各コンポーネントは1つまたは2つのファイルに分割されます。一つ目のファイルはイニシャライザで、コアテーマのApplication.jsから呼び出されます。イニシャライザーは、イベントをブローカーに登録し、必要に応じてKnockoutビューモデルも初期化します。2つ目のファイルは、Knockoutビューを駆動するビューモデルです。

(function (root, factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    // use AMD define funtion to support AMD modules if in use
    define(['exports'], factory);
  } else if (typeof exports === 'object') {
    // to support CommonJS
    factory(exports);
  }

  // browser global variable
  root.ProductPrice = factory;
  root.ProductPrice_ComponentClass = "cxa-productprice-component";
}(this, function (element) {
  'use strict';
  var component = new Component(element);
  component.Name = "CXA/Feature/ProductPrice";
  component.priceInfoVM = null;

  // ProductPriceContext Handlers
  component.ProductPriceSetPriceHandler = function (source, data) {
    component.priceInfoVM.switchInfo(data);
  };

  component.InExperienceEditorMode = function () {
    component.Visual.Disable();
  };

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

  component.StopListening = function () {
    if (component.HandlerId) {
      ProductPriceContext.UnSubscribeHandler(component.HandlerId);
    }
  };

  component.Init = function () {
    component.priceInfoVM = new PriceInfoViewModel(component.RootElement);
    ko.applyBindingsWithValidation(component.priceInfoVM, this);
    component.Visual.Appear();
    component.StartListening();
  };

  return component;
}));

上記は、コンポーネントのイニシャライザの例です。product priceコンポーネントから取ったものです。あまり詳しい説明はしませんが、イニシャライザがどのように呼び出されるかを理解することが重要です。アプリケーションコードは、コンポーネントがページ上で発見されると、動的に初期化します。コンポーネントは、コンポーネントhtmlのルート要素の特定のデータ属性によって位置が特定されます。

<div class="cxa-productprice-component" data-cxa-component-class="ProductPrice" data-cxa-component-initialized="false" data-cxa-component-type="component">

イニシャライザの root.ProductPrice_ComponentClass プロパティが、コンポーネント html のクラスと一致していることがわかります。グローバル変数の root.ProductPricedata-cxa-component-class データ属性と一致しています。この属性は、アプリケーションがコンポーネントの Init 関数を呼び出す際に使用されます。この関数は、data-cxa-component-class属性を持つすべての要素を見つけ、それぞれをループして初期化します。注意すべき点は、1つのコンポーネントでエラーが発生した場合、残りのコンポーネントはこの影響を受けてロードに失敗するということです。

まとめ

ここでは詳細を説明しませんでしたが、皆さんが始めるのに十分な内容であることを願っています。私は、すべての部品がどのように相互作用するかを見るために、箱から出したばかりのCommerce Themesを掘り下げてみることをお勧めします。手始めに、商品の価格表示を見てみましょう。シンプルで小さなコンポーネントですが、他のコンポーネントと連動しているため、簡単に見ることができます。

この記事がお役に立てれば幸いです。ご不明な点がございましたら、お気軽にコメントをお寄せください。

 

デモを申し込む

弊社の専門家は最適なソリューションをサポートさせて頂きます。

►►►サービスについて