1. レンダリング

チュートリアル : Address Editorのレンダリングのカスタマイズ

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

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

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

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

このチュートリアルでは、次の方法について説明します。

Address Editorコンポーネントの拡張

レンダリングをカスタマイズするには、まずAddress Editorコンポーネントを拡張する必要があります (Address2という名前の新しいテキストフィールドを追加するなど)。

Address Editorコンポーネントを拡張するには:

  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ファイルを変更し、必要な変更を適用して、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 folderをクリックします。

    大事な

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

  2. Messageウィンドウで、フォルダの名前を入力し、OKをクリックします。

  3. コンテンツ ツリーで、新しく作成したフォルダを選択し、FolderタブでNew Templateをクリックします。

  4. Nameフィールドで、テンプレートの名前を指定し、基本テンプレートとしてデフォルトのAddress Editorデータ ソース テンプレート (/sitecore/templates/Feature/Commerce Experience Accelerator/Account/Datasource/Address Editor) を選択し、Nextをクリックし、Locationページで、新しく作成したフォルダを場所として受け入れ、NextをクリックしてからCloseをクリックします。

  5. 手順5で作成したテンプレートを選択し、Builder タブで 住所2 の新しい簡易テキスト フィールドを追加します。

  6. 変更を保存します。

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

プロパティ マッピングをViewモデルに追加する

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

プロパティマッピングをViewモデルに追加するには:

  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. IoCのAddressItemListJsonResult登録をオーバーライドして、導入された新しい実装を使用し、以前に作成したパッチ ファイル(Sitecore.Commerce.XA.Samples.AddressEditorExtensions.config)に追加します。

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

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