---
title: "ウォークスルー:カスタマイズされたCommerceエンティティの直接ナビゲーションを可能にする"
slug: "walkthrough--enabling-direct-navigation-for-customized-commerce-entities"
abstract: "カテゴリや商品のカスタムテンプレートを使用する際の直接ナビゲーションを有効にする方法。"
---
# ウォークスルー:カスタマイズされたCommerceエンティティの直接ナビゲーションを可能にする

Sitecore XC Business Toolsでは、[Composer](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/en/adding-properties-to-commerce-entities.html)機能を使って[販売可能なアイテム](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/en/work-with-a-sellable-item.html)の情報を拡張・カスタマイズできます。カスタマイズされたエンティティごとに、コマースエンジンのデータに合わせてテンプレートがSitecore生成されます。

デフォルトでは、カタログ上で5つのコマーステンプレート(Commerce Category、Commerce Product、Commerce Product Variant、Commerce Bundle、Commerce Dynamic Bundle)を設定でき、データプロバイダーがカタログアイテムを公開する際に利用できます。カスタマイズされたCommerceエンティティの直接ナビゲーションを有効にするには、まず既存のエンティティ定義を拡張し、それをカスタムページデザインに関連付けます。

Composerを使ってCommerceエンティティを作成すると、Sitecoreで対応する2つのテンプレートが作成されます。このウォークスルーでは以下の通りです:

-   *Headphones*
-   *HeadphonesVariant*

このウォークスルーを完了することで、*Studio X Over-the-Earワイヤレスヘッドホン* を含むオーディオ部門のすべてのヘッドホンを、3つの新しいプロパティを含むカスタマイズテンプレートに関連付けることができます。 [ダイレクトナビゲーション](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/enable-direct-navigation.html "Enable direct navigation")を有効にした後は、コンテンツエディターから体験エディター内のどのヘッドホンも直接開くことができます。

このウォークスルーでは、以下の方法をご紹介します:

-   [ヘッドホンカテゴリのテンプレート定義を拡張してください](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--enabling-direct-navigation-for-customized-commerce-entities.html#UUID-c0fde273-cb98-d7ea-eb90-e31a9c2f4e89_section-5c59d9f8659a8-idm46105002468640 "Extend the template definition for the Headphones category")
-   [カスタムテンプレートを割り当ててください](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--enabling-direct-navigation-for-customized-commerce-entities.html#UUID-c0fde273-cb98-d7ea-eb90-e31a9c2f4e89_section-5d207cf5ea717-idm45315552107968 "Assign the custom template")
-   [ヘッドホンテンプレートを承認し公開してください](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--enabling-direct-navigation-for-customized-commerce-entities.html#UUID-c0fde273-cb98-d7ea-eb90-e31a9c2f4e89_section-5c59f711044a1-idm45401287742928 "Approve and publish the Headphones template")
-   [カタログテンプレートにエンティティタイプの新しいフィールドを追加してください](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--enabling-direct-navigation-for-customized-commerce-entities.html#UUID-c0fde273-cb98-d7ea-eb90-e31a9c2f4e89_section-5c59dada72bf7-idm45401291122960 "Extend the catalog template with a new field for the entity type")
-   [エンティティタイプごとにカスタムページを作成します](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--enabling-direct-navigation-for-customized-commerce-entities.html#UUID-c0fde273-cb98-d7ea-eb90-e31a9c2f4e89_section-5d1b67de739b9-idm45694663288384 "Create a custom page for the entity type")
-   [カスタムアイテムテンプレートをカスタムページデザインに関連付けます](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--enabling-direct-navigation-for-customized-commerce-entities.html#UUID-c0fde273-cb98-d7ea-eb90-e31a9c2f4e89_section-5d1b68b2a7df3-idm45315554555152 "Associate the custom item template to the custom page design")

> !注このウォークスルーでは、StorefrontサイトテンプレートとHabitatカタログを使って、カスタムCommerceエンティティの直接ナビゲーションを有効にする方法を示しています。Habitatカタログがインストールされており、手順を順番に完了していることを前提としています。ただし、このウォークスルーの内容は、SXA StorefrontなしでSitecore Commerceを使用する場合にも適用されます。

## ヘッドホンカテゴリのテンプレート定義を拡張してください

このウォークスルーの文脈では、カスタマイズされたComposerテンプレートを使って販売可能なアイテムに直接ナビゲーションを適用するには、まずテンプレート定義を拡張して新しいフィールドを追加します。

ヘッドホンカテゴリのテンプレート定義を拡張すると:

1.  Sitecore Launchpadで「 **Business Tools**」「 **マーチャンダイジング** 」をクリックし、**カタログ** セクションで「 **Habitat\_Master**」をクリックしてください。
    
2.  **カテゴリ**セクションで**「部門**」をクリックし、次に**「オーディオ**」をクリックします。
    
3.  販売可能な商品リストから「*Studio X オーバーイヤーワイヤレスヘッドホン*」をクリックしてください。
    
    ![StudioXEntity.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioXEntity.png)
    
4.  **エンティティバージョン**セクションで新しいバージョンを作成するには、「**Add Entity Version**(+)」をクリックし、エンティティバージョンを追加したいか確認してください。
    
5.  新しいエンティティバージョンをクリックして選択し、**まとめ** セクションのドロップダウンリストから「**View 追加**」をクリックします。
    
6.  **「View 追加**」ダイアログボックスの**「Name**」欄と**「Display Name**」欄の両方で*Headphones*を入力し、変更を確認してください。
    
7.  **ヘッドホン**セクションのドロップダウンリストから**「プロパティを追加**」をクリックし、プロパティ**を追加**ダイアログボックスの**「名前**」欄と**表示名**欄の両方で「*Type*」を入力して、**文字列**のプロパティタイプを割り当ててください。変更を確認してください。
    
8.  ステップ8を繰り返し、次の2つの性質を加えます。
    
    名称
    
    表示名
    
    財産
    
    ノイズキャンセリング
    
    ノイズキャンセリング
    
    ブール
    
    IncludesMicrophone
    
    マイクも含まれます
    
    ブール
    
9.  **ヘッドホン**セクションのドロップダウンリストから「**選択オプション制約を追加**」をクリックし、以下の図に示された制約を定義し、変更を受け入れます。
    
    ![StudioXAddSelectionConstraints.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioXAddSelectionConstraints.png)
    
10.  **ヘッドホン**セクションのドロップダウンリストから**「Edit View**」をクリックし、表示したいデフォルトプロパティを指定します。変更を確認してください。
     
     ![StudioXAddProperties.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioXAddProperties.png)
     
11.  **ヘッドホン**セクションのドロップダウンリストから「**テンプレート作成**」をクリックし、テンプレート**作成**ダイアログボックスの**「名前**」と**「表示名**」欄で*Headphones Template*を入力して変更を確認してください。
     

## カスタムテンプレートを割り当ててください

新しいフィールドをすべてのヘッドホンで表示するには、作成したカスタムテンプレートをアイテム定義に割り当てる必要があります。

カスタムテンプレートを割り当てるには:

1.  Business Toolsのダッシュボードで「 **Composer**」をクリックします。
    
    **テンプレート**セクションでは、作成したカスタムテンプレート*Headphones Template*を見ることができます。
    
    ![StudioXComposer.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioXComposer.png)
    
2.  **テンプレート**セクションのドロップダウンリストから「**アイテム定義へのアソシエイト**」をクリックします。
    
3.  カタログ**リストから**「**アイテム定義へのアソシエイト**」ダイアログボックスで、**Habitat\_Master**をクリックして変更を確認してください。
    
4.  ヘッド **ホン** のチェックボックスを選択して変更を確認してください。
    
    ![StudioXAssociate.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioXAssociate.png)
    

## ヘッドホンテンプレートを承認し公開してください

新しいプロパティをストアフロントで見るには、エンティティアイテムの更新版を承認し公開する必要があります。

エンティティ項目の承認および公開:

1.  Business Toolsで「 **マーチャンダイジング**」をクリックしてください。
    
2.  カタログセクションで**「****Habitat\_Master**」をクリックしてください。
    
3.  **カテゴリ**セクションで**「部門**」をクリックし、次に**「オーディオ**」をクリックします。
    
4.  販売可能な商品リストから、商品ページを開くには「*Studio X オーバー・ザ・イヤー・ワイヤレスヘッドホン*」をクリックしてください。
    
5.  **Summary**セクションのドロップダウンリストで「**次のワークフロー状態へプロモート**」をクリックし、**Command**ドロップダウンリストで「**送信**」をクリックして変更を確認してください。
    
6.  ワークフローを完了するには、**Summary**セクションのドロップダウンリストで **「次のワークフロー状態へプロモート** 」をクリックし、**Command**ドロップダウンリストで **「承認**」をクリックして変更を確認してください。
    
7.  Sitecoreでテンプレートを更新し、コンテンツエディターで変更を確認するには、Sitecore Launchpadの「 **Content Editor**」をクリックしてください。
    
8.  リボンの **コマース** タブで **「データテンプレートの更新**」をクリックします。
    
    このステップでは、前の手順で定義した新しい定義を使ってテンプレートを生成し、新しいプロパティが利用可能になります。Composerでフィールドやテンプレートを削除した場合は、データテンプレートを削除し、変更を確認するために更新する必要があります。
    
9.  **Commerce**タブで「**Commerce Cacheを更新**」をクリックします。
    
    変更内容を見るには、*sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat\_Master/Departments/Audio*の「 **Noise-Canceling Over-the\_Ear Headphones**」をクリックしてください。
    
    ![StudioTemplateOther.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioTemplateOther.png)
    

## カタログテンプレートにエンティティタイプの新しいフィールドを追加してください

エンティティタイプの新しいフィールドでカタログテンプレートを拡張するには:

1.  コンテンツツリーで*sitecore/Templates/Commerce/Catalog*に行き、**Commerce Catalog**をクリックします。
    
2.  **ビルダー**タブの**テンプレートオーバーライド**セクションで、「**新しいフィールドを追加」**をクリックします。
    
3.  カスタムテンプレートのフィールド名 *(HeadphonesTemplate*)を定義し、このセクションの他のテンプレートと同じプロパティを指定し、「 **保存**」をクリックします。
    
    これにより **、テンプレートオーバーライド** セクションに新しいフィールドが追加されます(*sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat\_Master*)。
    
    ![StudioXBuilderTab.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioXBuilderTab.png)
    

## エンティティタイプごとにカスタムページを作成します

エンティティタイプ用のカスタムページを作成するには:

1.  テナントレベルで新しいページアイテムテンプレートを作成するには、コンテンツツリーで*sitecore/Templates/Project/Sitecore*に行き、*Commerce Product*テンプレートを右クリックして「 **複製**」をクリックします。
    
2.  **メッセージ**ダイアログボックスで*Headphones Product*を入力し、**OK**をクリックします。
    
3.  *Headphones Product*を選択し、**コンテンツ**タブの**データ**セクションで、**ベーステンプレート**リストから*Headphones*テンプレート(*Templates\\Commerce\\Catalog Generated*)を**選択リスト**に追加します。
    
4.  **選択**リストで*Commerce Product*テンプレートをダブルクリックして**選択**リストから移動し、上下矢印を使って選択したテンプレートの順序を変更します。選択済みテンプレートリストは以下のようになります:
    
    ![StudioXBaseTemplateSelected.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioXBaseTemplateSelected.png)
    
5.  リボンの上で **「保存** 」をクリックし、その後「 **OK** 」をクリックして変更を確認します。
    
6.  *sitecore/Content/Sitecore/Storefront/Home/Catalogs*に行き、**Habitat\_Master**をクリックし、**テンプレートオーバーライド**セクションの**HeadphonesTemplate**フィールドで*Headphones Product*(*Templates\\Project\\Sitecore*)をクリックし、リボンの上で**保存**をクリックします。
    
    ![StudioXTemplateOverride.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioXTemplateOverride.png)
    
7.  リボンの **「Commerce** 」タブで「Commerce Cache」を **リフレッシュ**をクリックします。
    

## カスタムアイテムテンプレートをカスタムページデザインに関連付けます

カスタムテンプレート*Headphones*カスタムページデザインに関連付ける必要があります。

カスタムアイテムテンプレートをカスタムページデザインに関連付けるには:

1.  コンテンツツリーで、*sitecore/Content/Sitecore/Storefront/Presentation/Page Designs*へ行ってください。
    
2.  「 **Commerce Product Page**」を右クリックし、「 **Duplicate」** をクリックし、**メッセージ** ダイアログボックスの「 **ページ欄の新しい名前を入力」の「Enter a new name** 」で「 *Headphones Page Design*」と入力し、**OK**をクリックします。
    
3.  コンテンツツリーで **「ページデザイン** (*sitecore/Content/Sitecore/Storefront/Presentation*)」をクリックし、**コンテンツ** タブの **デザイン** セクションで*Headphones Product*テンプレートを*Headphones Page Design*にマッピングしてください。
    
    ![HeadphonePageDesign94.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/HeadphonePageDesign94.png)
    
4.  リボンの上で「 **保存**」をクリックします。
    
    *Studio Xのオーバーイヤーワイヤレスヘッドホン*を選択すると、**クイックインフォ**のセクションでこの販売可能なアイテムが新しいテンプレートにリンクされているのが確認できます。
    
    ![StudioXTemplateLinking.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/StudioXTemplateLinking.png)
    
    サイト *コア/コンテンツ/Sitecore/ストアフロント/ホーム/カタログ/Habitat\_Master/部門/オーディオ*に移動し、右クリックで**Studio X Over-the-Earワイヤレスヘッドホン** を右クリックしてエクスペリエンスエディターでページを開くことができます。
    
    > !重要カタログアイテムを直接開くときやカタログアイテムに移動する際には、エクスペリエンスエディターでレイアウトやコンポーネントを編集することはできませんが、一部のテキストは編集できます。コンポーネントを編集するには、コンテンツエディターで*sitecore/Content/Sitecore/Storefront/Presentation/Part Designs/Default Main Product Page Content*へ行ってください。