---
title: "商取引ベースのテーマの使用"
slug: "using-the-commerce-base-themes"
abstract: "Commerceベースのテーマは、コンポーネントに必要なフロントエンドロジック(JavaScript)、共通サービス、サードパーティライブラリ、フレームワークを維持します。"
---
# 商取引ベースのテーマの使用

Sitecoreの9.0.3リリース以前は、商取引機能のJavaScriptは[AssetService](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/the-sxa-pipelines.html)パイプラインを使ってロードされていました。パフォーマンス向上とマルチサイト拡張性を向上させるため、商取引業務機能をサポートするすべてのJavaScriptはディスク上のファイルからsitecore/Media Library/Base Themesフォルダに移されました。

このフォルダには、より複雑な機能を提供するスクリプトやスタイルを含む[基礎テーマ](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/the-sxa-themes.html) や商取引テーマが入っています。例えば、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](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/ThemeDependency.png)

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

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

![ExtensionThemes.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/ExtensionThemes.png)

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

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

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

![BrandedExtension.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/BrandedExtension.png)

> !重要既存のテーマが新しいテーマと動作するようにするには、[アップグレード](https://dev.sitecore.net/Downloads/Sitecore_Commerce.aspx)手順に従い、Commerce Experience Accelerator/Upgrade/Upgrade Scriptsフォルダ内のスクリプトを実行するよう促されます。