1. テーマ

商取引ベースのテーマの使用

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecoreの9.0.3リリース以前は、商取引機能のJavaScriptはAssetServiceパイプラインを使ってロードされていました。パフォーマンス向上とマルチサイト拡張性を向上させるため、商取引業務機能をサポートするすべてのJavaScriptはディスク上のファイルからsitecore/Media Library/Base Themesフォルダに移されました。

このフォルダには、より複雑な機能を提供するスクリプトやスタイルを含む基礎テーマ や商取引テーマが入っています。例えば、Bing/Googleマップコネクタ、コアライブラリ(JQuery、lo-dash)、編集体験に影響を与えるスクリプト(付箋、編集テーマ、ドラッグ&ドロップ、部分的なデザインのハイライトなど)などの共有機能などです。

スクリプトをディスク上のファイルからテーマに移すことで、いくつかの利点が得られます。まず、SXAがスクリプトを処理し、コンテンツの束縛とミニサイズ化を行います。これによりパフォーマンスと転送時間が向上します。次に、各サイトが独自のベーステーマを参照できます。

店舗のベーステーマ

利用可能な5つの基本テーマは、コンポーネントに必要なフロントエンドロジック(JavaScript)、共通サービス、サードパーティライブラリ、フレームワークを維持し、以下のフォルダにまとめられています。

  • Commerce Core Libraries
  • Commerce Services Theme
  • Commerce Core Theme
  • Commerce Main Theme
  • Commerce Components Theme

テーマ

概要

コマース・コアライブラリ

このテーマには、KnockoutJS、jQuery、BootstrapなどのStorefrontコンポーネントで使用されるサードパーティライブラリが含まれています。KnockoutはSXA Storefrontでデータバインディングに使われる主要なフレームワークです。

商業サービステーマ

このテーマには、すべてのStorefrontコンポーネントで使用される共有サービス(例えば、APIへのAjax呼び出しを処理するためのAjaxサービス)が含まれます。また、パブリッシャー-サブスクライバーパターンに従うコンポーネント間の通信およびメッセージングロジックも含まれます。

コマースコアテーマ

これはすべてのコンポーネントで使われる共通のJSロジックを含むFoundationレイヤーです。アプリケーションロジック、コンポーネント定義、初期化が含まれます。

商業 メインテーマ

このテーマには、Storefrontのフロントエンドアプリケーション初期化へのエントリーポイントを表すmain.jsファイルが含まれています。

コマースコンポーネントテーマ

このテーマはフィーチャーレイヤーを表し、コンポーネント固有のロジックをすべて含みます。各Storefrontコンポーネントには、その初期化、データバインディング、ユーザーとコンポーネント間の一部のやり取りを処理するコンポーネント名の独自のJavaScriptファイルがあります。

KnockoutJSビューモデルを使用するコンポーネントは、それぞれ別のファイルにビューモデルを持っています(-model.js)。

>[!重要]
> コンポーネント-モデルファイルは対応するコンポーネントより先に読み込む必要があります。なぜなら、コンポーネントはモデルに依存しているためです。

基本テーマは密接に関連しており、以下の順序で読み込む必要があります:

  1. コマース・コアライブラリ
  2. 商業サービステーマ
  3. コマースコアテーマ
  4. 商業 メインテーマ
  5. コマースコンポーネントテーマ

!警告スクリプトの読み込み順序はフォルダ内のスクリプトの順序によって決まります。スクリプトの順序を変えないことが非常に重要です。

テーマ間の依存関係は以下の図で示されています。

ThemeDependency.png

ストアフロントブランド拡張テーマとカスタムテーマ

カスタマイズを簡素化するため、SitecoreはStorefront Brandedテーマのコンテンツを新しいStorefront Branded Extensionテーマに移しました。既存のStorefront Brandedテーマは空きとなり、拡張テーマおよびベーステーマ、コアライブラリへの参照となっています。

ExtensionThemes.png

Storefront Branded Themeには、選択リストに示されている以下のスクリプトが必要です:

  • ベーシック2
  • ストアフロントブランド拡張
  • コマース・コアライブラリ
  • 商業サービステーマ
  • コマースコアテーマ
  • コマースコンポーネントテーマ
  • 商業 メインテーマ

!重要スクリプトの順序を変更しないでください。変更すると、ストアフロントレンダリングが正しく機能しなくなる可能性があります。

BrandedExtension.png

!重要既存のテーマが新しいテーマと動作するようにするには、アップグレード手順に従い、Commerce Experience Accelerator/Upgrade/Upgrade Scriptsフォルダ内のスクリプトを実行するよう促されます。

この記事を改善するための提案がある場合は、 お知らせください!