1. テーマ

コマース ベース テーマの使用

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

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

Sitecoreの9.0.3リリースより前は、コマース用のJavaScript機能はAssetServiceパイプラインを使用して読み込まれていました。パフォーマンスとマルチサイトの拡張性を向上させるために、コマース ビジネス機能をサポートするすべてのJavaScriptがディスク上のファイルからsitecore/Media Library/Base Themesフォルダーに移動されました。

このフォルダには、より複雑な機能を提供するためのスクリプトとスタイルを含むコマーステーマとともに、基本的なテーマ があります。たとえば、Bing/Googleマップ コネクタ、コア ライブラリ (JQuery、ローダッシュ)、編集エクスペリエンスに影響を与えるスクリプト (付箋、編集テーマ、ドラッグ アンド ドロップ、パーシャル デザインの強調表示など) などの共有機能などです。

スクリプトをディスク上のファイルからテーマに移動すると、いくつかの利点があります。まず、SXAがスクリプトを処理し、スクリプトがコンテンツをバンドルして最小化します。これにより、パフォーマンスと転送時間が向上します。次に、すべてのサイトが独自の基本テーマのセットを参照できます。

ストアフロントの基本テーマ

使用可能な5つの基本テーマは、コンポーネント、共通サービス、サードパーティ ライブラリ、およびフレームワークに必要なフロントエンド ロジック (JavaScript) を保持し、次のフォルダーにグループ化されています。

  • Commerce Core Libraries

  • Commerce Services Theme

  • Commerce Core Theme

  • Commerce Main Theme

  • Commerce Components Theme

テーマ

形容

Commerceコア ライブラリ

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

コマースサービスのテーマ

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

コマースコアテーマ

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

コマースのメインテーマ

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

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

このテーマはFeatureレイヤーを表し、すべてのコンポーネント固有のロジックが含まれています。各Storefrontコンポーネントには、初期化、データバインディング、およびユーザーとコンポーネント間の一部のインタラクションを処理するコンポーネントにちなんで名付けられた独自のJavaScriptファイルがあります。

KnockoutJSビュー モデルを使用するコンポーネントには、別のファイル (<component name>-model.js) に独自のビュー モデルがあります。

大事な

component-modelファイルは、対応するコンポーネントの前に読み込む必要があります。これは、コンポーネントがモデルに依存しているためです。

基本テーマは複雑に関連しており、次の順序でロードする必要があります。

  1. Commerceコア ライブラリ

  2. コマースサービスのテーマ

  3. コマースコアテーマ

  4. コマースのメインテーマ

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

警告

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

テーマ間の依存関係を次の図に示します。

Storefront Branded Extensionテーマとカスタムテーマ

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

このStorefront Branded Themeには、Selected リストに表示される次のスクリプトが必要です。

  • ベーシック2

  • Storefront Branded Extension

  • Commerceコア ライブラリ

  • コマースサービスのテーマ

  • コマースコアテーマ

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

  • コマースのメインテーマ

大事な

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

大事な

既存のテーマが新しいテーマで機能するようにするには、Commerce Experience Accelerator/Upgrade/Upgrade Scriptsフォルダで使用可能なスクリプトを実行するように求められるアップグレード手順に従う必要があります。

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