---
title: "攻略:アドレスエディターレンダリングのカスタマイズ"
slug: "walkthrough--customizing-the-address-editor-rendering"
abstract: "レンダリングのカスタマイズ方法の例です。"
---
# 攻略:アドレスエディターレンダリングのカスタマイズ
このウォークスルーでは、アドレス帳コンポーネントに新しいアドレスフィールドを追加することで、[アドレスエディター](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/en/commerce-account-renderings.html) のレンダリングをカスタマイズする方法を説明します。
SXA Storefrontの基本的な[MVC](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-manager/en/mvc.html)アーキテクチャは以下の図に示されています。他のMVCレンダリングと同様に、フロントエンドとバックエンドの両方のコンポーネントが含まれています。フロントエンドはViewファイルとJSスクリプトで構成されており、これはCommerce[のベーステーマ](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/using-the-commerce-base-themes.html "Using the commerce base themes")の一部です。
このウォークスルーでは、以下の方法を説明します:
- [アドレスエディターコンポーネントの拡張](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--customizing-the-address-editor-rendering.html#UUID-5474f1b8-cac4-3ea2-9b83-d02f76365139_section-idm46026195577296 "Extend the Address Editor component")
- [レンダリングデータソースをカスタマイズする](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--customizing-the-address-editor-rendering.html#UUID-5474f1b8-cac4-3ea2-9b83-d02f76365139_section-idm45492042678480 "Customize the rendering data source")
- [プロパティマッピングをビューモデルに追加](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--customizing-the-address-editor-rendering.html#UUID-5474f1b8-cac4-3ea2-9b83-d02f76365139_section-5c65bd5c8e125-idm45693341606240 "Add the property mapping to the View model")
## アドレスエディターコンポーネントの拡張
レンダリングをカスタマイズするには、まずアドレスエディターコンポーネントを拡張し、例えばAddress2という新しいテキストフィールドを追加する必要があります。
アドレスエディターコンポーネントを拡張するには:
1. Visual Studioで、型class libraryの新しいプロジェクトを作成します。
2. *Models*フォルダ内に、標準のStorefront AddressEditorInputModelクラスから継承する新しいクラスMyAddressEditorInputModelを作成し、以下のコードを追加します。
using Sitecore.Commerce.Engine.Connect.Entities;
namespace AddressBookExtensions.Models
{
public class MyAddressEditorInputModel: Sitecore.Commerce.XA.Feature.Account.Models.InputModels.AddressEditorInputModel
{
public string Address2 { get; set; }
public override CommerceParty ToPartyEntity()
{
var party = base.ToPartyEntity();
party.Address2 = this.Address2;
return party;
}
}
}
このコードスニペットはコンポーネントToPartyEntityメソッドを新しい実装で上書きし、元の実装を呼び出してAddress2プロパティをマッピングします。
3. AccountAddressControl.csファイル内で、新しいビューモデルを受け入れるエンドポイントを作成します:
public MyAccountAddressController(
IAddressRepository addressRepository,
IAddressEditorRepository addressEditorRepository,
IAccountManager accountManager,
IStorefrontContext storefrontContext,
IVisitorContext visitorContext,
IModelProvider modelProvider,
IContext sitecoreContext) : base(addressRepository, addressEditorRepository, accountManager, storefrontContext, visitorContext, modelProvider, sitecoreContext)
{
}
System.Web.Http.HttpPost
ValidateHttpPostHandler
System.Web.Http.Authorize
ValidateAntiForgeryToken
OutputCache(NoStore = true, Location = OutputCacheLocation.None)
public ActionResult MyAddressEditorModify(MyAddressEditorInputModel address)
{
var result = this.AddressEditorRepository.SaveAddress(address);
return this.Json(result, JsonRequestBehavior.AllowGet);
}
> !注このコードスニペットにはベース構造体への呼び出しが含まれています。
4. 新しいコントローラとモデルをIoCにパッチファイル(この例ではSitecore.Commerce.XA.Samples.AddressEditorExtensions.configと呼ばれます)[を用いて](https://doc.sitecore.com/xp/en/developers/100/platform-administration-and-architecture/en/use-a-patch-file-to-customize-the-sitecore-configuration.html)登録します。以下のコードが含まれています。
5. ビューをカスタマイズするには、マークアップを追加して新しいフィールドをレンダリングに表示し、デフォルトのレンダリング/ビュー AddressEditor.cshtmlをカスタムビューフォルダにコピーし、以下を追加してください:
6. ベースのテンプレート*Scripts*フォルダからコンポーネントのJSファイルをダウンロードします。
コンポーネントJSロジックは *、/sitecore/media library/Base Themes/Commerce Components Theme*にあるベーステンプレートに含まれています。
7. account-address-editor-model.jsファイルを修正し、ノックアウトビューモデルにAddress2フィールドのバインディングを追加するために必要な変更を加えます。これは、AddressEditorItemViewModel(アドレス)を更新し、Address1フィールドの初期化行の直後に次の行を追加することで行えます:
self.address2 = populate ? ko.validatedObservable(address.Address2).extend({ required: true }) : ko.validatedObservable().extend({ required: true });
8. 修正ファイルをアップロードし、ベーステーマで既存のファイルを上書きします。
## レンダリングデータソースをカスタマイズする
新しいカスタムフィールドのラベルとツールチップを表示するには、レンダリングデータソースをカスタマイズする必要があります。
データソースをカスタマイズするには:
1. カスタマイズされたレンダリングを保存するための新しいフォルダを作成するには、コンテンツエディターで*sitecore/Templates/Feature*フォルダを右クリックし、「 **Insert, Template」フォルダ**をクリックします。
> !重要カスタマイズされたレンダリング用に新しいフォルダを作成することをお勧めします。Sitecoreのアップグレード時に上書きされないようにするためです。
2. **メッセージ**ウィンドウでフォルダ名を入力し、**OK**をクリックします。
3. コンテンツツリーで新しく作成したフォルダを選択し、**フォルダ** タブで「 **新しいテンプレート**」をクリックします。
4. **名前**欄でテンプレートの名前を指定し、デフォルトのアドレスエディターのデータソーステンプレートをベーステンプレート(*/sitecore/templates/Feature/Commerce Experience Accelerator/Account/Datasource/Address Editor*)として選択し、「**次へ**」をクリックし、**位置情報**ページで新しく作成したフォルダを場所として受け入れ、「**次へ**」をクリックしてから**閉じ**ます。
5. ステップ5で作成したテンプレートを選択し、**ビルダー** タブで新しいシンプルなテキストフィールドをアドレス2に追加します。
6. 変更を保存してください。
7. サイトの*Data*フォルダで、新たに作成されたデータソーステンプレートに基づいて新しいコンテンツ項目を作成し、アドレスエディターのレンダリングでそれをデータソースとして使用するように設定します。
## プロパティマッピングをビューモデルに追加
アドレス帳コンポーネントの*Address2*フィールドを見るには、プロパティマッピングをコンポーネントのビューモデルに追加してください。
プロパティマッピングをビューモデルに追加するには:
1. デフォルトのSitecore.Commerce.XA.Feature.Account.Models.JsonResults.AddressItemJsonResultを継承し、Initializeメソッドを上書きする新しいモデルを作成MyAddressItemJsonResult:
public override void Initialize(CommerceParty address)
{
this.Address2 = address.Address2;
base.Initialize(address);
}
2. Sitecore.Commerce.XA.Feature.Account.Models.JsonResults.AddressItemListJsonResultから継承し、Initialize メソッドを上書きする別のモデルクラスAddressItemListJsonResultを作成します。
public override void Initialize(IEnumerable addresses)
{
foreach (var address in addresses)
{
var result = this.ModelProvider.GetModel();
result.Initialize(address);
this.Addresses.Add(result);
}
}
3. IoCのAddressItemListJsonResult登録を上書きして新たに導入した実装を使い、以前作成したパッチファイル(Sitecore.Commerce.XA.Samples.AddressEditorExtensions.config)に追加してください:
Sitecore.Commerce.XA.Samples.AddressBookExtensions.Models.JsonResults.AddressItemListJsonResult, Sitecore.Commerce.XA.Samples.AddressBookExtensions
4. プロジェクトをコンパイルします。
5. .dllファイルをサイトのbinフォルダにコピーし、view .chtmlファイルを対応するカスタムビューフォルダにコピーします。
6. カスタマイズされたコンポーネントを含むページを再読み込みしてください。