1. レンダリング

攻略

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

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

このウォークスルーでは、アドレス帳コンポーネントに新しいアドレスフィールドを追加することで、アドレスエディター のレンダリングをカスタマイズする方法を説明します。

AddressBook.png

SXA Storefrontの基本的なMVCアーキテクチャは以下の図に示されています。他のMVCレンダリングと同様に、フロントエンドとバックエンドの両方のコンポーネントが含まれています。フロントエンドはViewファイルとJSスクリプトで構成されており、これはCommerceのベーステーマの一部です。

MVCArch.png

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

アドレスエディターコンポーネントの拡張

レンダリングをカスタマイズするには、まずアドレスエディターコンポーネントを拡張し、例えば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と呼ばれます)を用いて登録します。以下のコードが含まれています。

  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. カスタマイズされたコンポーネントを含むページを再読み込みしてください。

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