チュートリアル: 住所エディター レンダリングのカスタマイズ

概要

レンダリングをカスタマイズする方法の例。

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

AddressBook.png

次の図は、SXA Storefront の基本的な MVC アーキテクチャを示しています。MVC レンダリングと同じように、フロントエンド コンポーネントとバックエンド コンポーネントの両方が含まれています。フロントエンドは、ビュー ファイルと、Commerce ベース テーマの一部である JS スクリプトで構成されています。

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. 次のコードを含むパッチ ファイル (この例では Sitecore.Commerce.XA.Samples.AddressEditorExtensions.config) を使用して、IoC に新しいコントローラーとモデルを登録します。

    <sitecore xmlns:patch="http://www.sitecore.net/xmlconfig/">
        <services><register serviceType="Sitecore.Commerce.XA.Samples.AddressBookExtensions.Controllers.MyAccountAddressController, Sitecore.Commerce.XA.Samples.AddressBookExtensions" implementationType="Sitecore.Commerce.XA.Samples.AddressBookExtensions.Controllers.MyAccountAddressController, Sitecore.Commerce.XA.Samples.AddressBookExtensions" lifetime="Transient"/>
        </services>
        <commerce.XA>
            <models>
                <MyAddressItemJsonResult type="Sitecore.Commerce.XA.Samples.AddressBookExtensions.Models.JsonResults.MyAddressItemJsonResult, Sitecore.Commerce.XA.Samples.AddressBookExtensions" />
            </models>
        </commerce.XA>
    </sitecore>
    
  5. ビューをカスタマイズするには、レンダリングで新しいフィールドを表示するためのマークアップを追加し、デフォルトのレンダリング/ビュー AddressEditor.cshtml をカスタム ビュー フォルダーにコピーして、次のコードを追加します。

    <div class="address-address address-part">
        <label for="addressBook-Address">@Html.Sitecore().Field("Address 2 label", currentItem)<span class="required">*</span></label>
        <input type="text" placeholder="@currentItem["Address 2 Hint Text"]" data-bind="text: address2, value: address2" required="required" data-val-required="@currentItem["Address Missing Message"]" />
        </div>
  6. ベース テンプレート Scripts フォルダーから、コンポーネントの JS ファイルをダウンロードします。

    コンポーネント JS ロジックは、/sitecore/media library/Base Themes/Commerce Components Theme にあるベース テンプレートに含まれています。

  7. account-address-editor-model.js ファイルを変更し、必要な変更を適用して、Knockout ビュー モデルに Address2 フィールド バインディングを追加します。これを行うには、AddressEditorItemViewModel (住所) を更新し、Address1 フィールド初期化行の直後に次の行を追加します。

    self.address2 = populate ? ko.validatedObservable(address.Address2).extend({ required: true }) : ko.validatedObservable().extend({ required: true });
  8. 変更したファイルをアップロードし、ベース テーマの既存のファイルを上書きします。

新しいカスタム フィールドのラベルとツールチップを表示するには、レンダリング データ ソースをカスタマイズする必要があります。

ソース データをカスタマイズするには、次の手順に従います。

  1. カスタマイズされたレンダリングを保存する新しいフォルダーを作成するには、コンテンツ エディターで sitecore/Templates/Feature フォルダーを右クリックし、[挿入]、[テンプレート フォルダー] をクリックします。

    重要

    Sitecore アップグレードのインストール時に上書きされないように、カスタマイズされたレンダリング用に新しいフォルダーを作成することをお勧めします。

  2. [メッセージ] ウィンドウで、フォルダーの名前を入力し、[OK] をクリックします。

  3. コンテンツ ツリーで、新しく作成したフォルダーを選択し、[フォルダー] タブで [新しいテンプレート] をクリックします。

  4. [名前] フィールドでテンプレートの名前を指定し、デフォルトの住所エディター データ ソース テンプレート (/sitecore/templates/Feature/Commerce Experience Accelerator/Account/Datasource/Address Editor) をベース テンプレートとして選択して、[次へ] をクリックし、[場所] ページで、新しく作成したフォルダーを場所として受け入れて、[次へ] をクリックし、[閉じる] をクリックします。

  5. 手順 5 で作成したテンプレートを選択し、[ビルダー] タブで、Address 2 の新しいシンプル テキスト フィールドを追加します。

  6. 変更を保存します。

  7. サイトの Data フォルダーで、新しく作成したデータ ソース テンプレートに基づいて新しいコンテンツ アイテムを作成し、それをデータ ソースとして使用するように住所エディター レンダリングを設定します。

アドレス帳コンポーネントに [Address2] フィールドを表示するには、コンポーネントのビュー モデルにプロパティ マッピングを追加します。

ビュー モデルにプロパティ マッピングを追加するには、次の手順に従います。

  1. デフォルトの Sitecore.Commerce.XA.Feature.Account.Models.JsonResults.AddressItemJsonResult から継承する MyAddressItemJsonResult という名前の新しいモデルを作成し、Initialize メソッドを上書きします。

    public override void Initialize(CommerceParty address)
        {
            this.Address2 = address.Address2;
            base.Initialize(address);
        }
  2. デフォルトの Sitecore.Commerce.XA.Feature.Account.Models.JsonResults.AddressItemListJsonResult から継承する AddressItemListJsonResult という名前の別のモデル クラスを作成し、Initialize メソッドを上書きします。

    public override void Initialize(IEnumerable<CommerceParty> addresses)
        {
            foreach (var address in addresses)
            {
              var result = this.ModelProvider.GetModel<MyAddressItemJsonResult>();
              result.Initialize(address);
              this.Addresses.Add(result);
            }
        }
  3. 導入された新しい実装を使用し、さきほど作成したパッチ ファイル (Sitecore.Commerce.XA.Samples.AddressEditorExtensions.config) に追加するために、IoC の AddressItemListJsonResult 登録を上書きします。

    <sitecore xmlns:patch="http://www.sitecore.net/xmlconfig/">
        <services><register                   serviceType="Sitecore.Commerce.XA.Samples.AddressBookExtensions.Controllers.MyAccountAddressController, Sitecore.Commerce.XA.Samples.AddressBookExtensions" implementationType="Sitecore.Commerce.XA.Samples.AddressBookExtensions.Controllers.MyAccountAddressController, Sitecore.Commerce.XA.Samples.AddressBookExtensions" lifetime="Transient"/>
         </services>
        <commerce.XA>
        <models>
            <AddressItemListJsonResult>
                <patch:attribute name="type">Sitecore.Commerce.XA.Samples.AddressBookExtensions.Models.JsonResults.AddressItemListJsonResult, Sitecore.Commerce.XA.Samples.AddressBookExtensions</patch:attribute>
            </AddressItemListJsonResult>
            <MyAddressItemJsonResult type="Sitecore.Commerce.XA.Samples.AddressBookExtensions.Models.JsonResults.MyAddressItemJsonResult, Sitecore.Commerce.XA.Samples.AddressBookExtensions" />
        </models>
        </commerce.XA>
    </sitecore>
  4. プロジェクトをコンパイルします。

  5. .dll ファイルをサイトの bin フォルダーにコピーし、view .chtml ファイルを対応するカスタム ビュー フォルダーにコピーします。

  6. カスタマイズされたコンポーネントを含むページをリロードします。