--- title: "ウォークスルー:Commerceメールメッセージテンプレートの作成" slug: "walkthrough--building-a-commerce-email-message-template" abstract: "このウォークスルーでは、Commerceメールメッセージテンプレートを作成するために必要なコードを提供します。" --- # ウォークスルー:Commerceメールメッセージテンプレートの作成 サイト作成時にCommerceマーケティングオートメーションキャンペーンを選択すると: - メールマネージャーのルートは、Emailsという命名規則で作成されます。 - Commerceのメールで使われるテンプレートは */sitecore/Templates/Feature/Commerce Experience Accelerator/Emails*フォルダにあります。 ![Diagram showing where email templates are stored in the Content Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/EmailOrderHeader.png) - Commerceの [メールで使用されたレンダリング](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/commerce-email-renderings-for-marketing-automation.html) は*sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/Commerce Emails*フォルダにあります。 ![EmailrenderingsTree3.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/EmailrenderingsTree3.png) - 商務メールで使用されるレイアウトは*sitecore/Layout/Layouts/Feature/Commerce Experience Accelerator/Commerce Emails*フォルダにあります。 ![EmailRenderingTreeLayout93.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/EmailRenderingTreeLayout93.png) 顧客がカートを操作したり注文を行ったりすると、その顧客は自動的に該当するマーケティング自動化プランに追加されます。自動化サービスはプランを評価し、顧客にメールを送信する必要があるかどうかを判断します。自動化サービスからメールが送信されると、メールリクエストは [メッセージバス](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/commerce-marketing-automation-campaigns-data-flow.html "Commerce Marketing Automation campaigns data flow")に送信されます。Content Management (CM)サーバーはこの情報を受け取り、コマースクエリパラメータを含むURLを作成します。これはメールレンダリングに含まれ、放棄されたカートメールメッセージや注文されたメールメッセージの形で顧客に送信されます。 > !注コンポーネント(例えばメールメッセージ)をカスタマイズする際にコードを変更する必要を避けるために、データテンプレート上でラベルやメッセージを定義してください。 提供されたテンプレートを使いたくない場合は、独自のCommerceメールメッセージテンプレートを作成するか、既存のテンプレートを拡張することができます。そのためには: 1. [メッセージ内容欄の作成または修正](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/walkthrough--building-a-commerce-email-message-template.html#UUID-f63580e9-2130-96a0-2e53-0437ccf104b3_section-5cc079822b5a5-idm45444647949424 "Create or modify message content fields")。 2. [メッセージレンダリングを修正する](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/walkthrough--building-a-commerce-email-message-template.html#UUID-f63580e9-2130-96a0-2e53-0437ccf104b3_section-5cc0799f74ac6-idm45444648187008 "Modify message renderings") 3. [メールメッセージでレンダリングするためにCommerceデータを取得してください](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/walkthrough--building-a-commerce-email-message-template.html#UUID-f63580e9-2130-96a0-2e53-0437ccf104b3_section-5cc07f38c917d-idm45510780555360 "Retrieve Commerce data for rendering in the email message")。 4. [メールブランチテンプレート用のレンダリングを作成します](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/walkthrough--building-a-commerce-email-message-template.html#UUID-f63580e9-2130-96a0-2e53-0437ccf104b3_section-5cc08507a98ac-idm45510781703072 "Create a rendering for the email branch template")。 > !注Send Emailのマーケティングアクションには、メールメッセージ内に商取引データは含まれていません。 例えば、「新しい注文を置いた」メールメッセージは、エクスペリエンスエディターで次のように表示されます。 ![NewOrderPlaced.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/NewOrderPlaced.png) ## メッセージ内容フィールドの作成または変更 メッセージ内容フィールドの作成または変更: 1. Sitecore Launchpadで「 **Content Editor**」をクリックしてください。 2. *sitecore/Templates/Feature/Commerce Experience Accelerator/Emails*に行って。 3. *Cart*、*Order*、*Products*、または*Shared*フォルダを展開します。 ![MessageContentFolders93.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/MessageContentFolders93.png) 4. メールのコンポーネント(ヘッダー、行、合計など)を選択します。 5. **ビルダー**タブで、テンプレートのフィールドラベルやタイプを追加、修正、削除できます。 6. 変更を保存するには「 **保存** 」をクリックしてください。 ## メッセージレンダリングを修正する 1. **コンテンツエディター**で*sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/Commerce Emails*フォルダに移動します。 2. *Email* *Cart*、*カタログ、**Order*、または*Shared*フォルダを展開してください。 3. メールコンポーネント(カートの列、カート合計など)を選択してください。 4. **コンテンツ**タブの**データ**セクションで、必要に応じてコントローラーの操作を変更します。 5. 変更を保存するには「 **保存** 」をクリックしてください。 ## メールメッセージでレンダリングするためのCommerceデータを取得する CommerceのメールメッセージがストアフロントからCommerceデータを取得するためには、以下のコントローラーコードを追加する必要があります。 public ActionResult OrderHeader() { EmailOrderModel model = null; string renderingViewPath = string.Empty; var visitorContext = Foundation.Connect.VisitorContext.Current; // This code sets up the context for the Commerce site and user if the Sitecore and contact // information are present based on the query parameters. using (var commerceSiteContext = new SetupCommerceSiteContext(visitorContext)) { var linkRepository = ServiceLocator.ServiceProvider.GetService(); model = linkRepository.GetOrder(commerceSiteContext); // This code calls the base GetRenderingView() controller method, which supports the SXA view // override feature. renderingViewPath = GetRenderingView("EmailOrderHeader"); } return View(renderingViewPath, model); } > !注SXAビューの詳細については、「 [サイトごとのHTMLレンダリングカスタマイズ](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/customize-rendering-html-per-site.html)」をご覧ください。 リポジトリメソッドコードは、SetupCommerceSiteContextコンテキストスイッチ内のコントローラーから呼び出しられ、提供されたクエリパラメータに基づいてSitecoreサイトと現在ログイン中のユーザーを設定します。 public virtual EmailOrderModel GetOrder(SetupCommerceSiteContext commerceSiteContext) { var orderId = string.Empty; // This code looks for the order\_id query parameter and, if specified, retrieves the model for // a specific order. if (Sitecore.Modules.EmailCampaign.Core.ExmContext.QueryString != null) { orderId = Sitecore.Modules.EmailCampaign.Core.ExmContext.QueryString"order\_id"; } var model = ModelProvider.GetModel(); ; var visitorContext = Foundation.Connect.VisitorContext.Current; // This code verifies if the user context was switched to a valid user.  If the context was // switched, the order is retrieved using the Storefront foundation code. if (commerceSiteContext.HasSwitchedUsers) { var storefrontContext = ServiceLocator.ServiceProvider.GetService(); var customerId = visitorContext.CustomerId; Engine.Connect.Entities.CommerceOrder order = null; // This code caches the returned order on the site context items collection. To avoid // retrieving the same order multiple times when an email has multiple renderings using the // same model (called from within the same HttpContext), the order is retrieved once and // cached so all other calls retrieve the order from the cache.  The site context item // collection is emptied at the end of the HttpRequest. if (SiteContext.ItemsOrderModelKey != null) { order = (Engine.Connect.Entities.CommerceOrder)SiteContext.ItemsOrderModelKey; } else { var orderManager = ServiceLocator.ServiceProvider.GetService(); var response = orderManager.GetOrderDetails(storefrontContext.CurrentStorefront, visitorContext, orderId); order = response.Result as Engine.Connect.Entities.CommerceOrder; SiteContext.ItemsOrderModelKey = order; } model.Init(order); } else { model.InitMockData(); } return model; } cshtmlビューをレンダリングするには、以下のメールオーダーヘッダービューが必要です。 @using System.Web.Mvc.Ajax @using System.Web.Mvc.Html @using Sitecore.XA.Foundation.SitecoreExtensions.Extensions @using Sitecore.Commerce.XA.Foundation.Common.ExtensionMethods @using Sitecore.Mvc @using Sitecore.Commerce.XA.Feature.Emails @using Sitecore.Commerce.XA.Feature.Emails.Models @using System.Linq @model EmailOrderModel @{ var orderInformationLabel = Html.Sitecore().Field(Constants.Templates.EmailOrderHeader.FieldNames.OrderInformationLabel, Html.Sitecore().CurrentItem); // This code retrieves the labels from the item data source. These are the values retrieved // from the template. var orderDateLabel = Html.Sitecore().Field(Constants.Templates.EmailOrderHeader.FieldNames.OrderDateLabel, Html.Sitecore().CurrentItem); var orderIdLabel = Html.Sitecore().Field(Constants.Templates.EmailOrderHeader.FieldNames.OrderIdLabel, Html.Sitecore().CurrentItem); var orderStatusLabel = Html.Sitecore().Field(Constants.Templates.EmailOrderHeader.FieldNames.OrderStatusLabel, Html.Sitecore().CurrentItem); var deliveryAddressLabel = Html.Sitecore().Field(Constants.Templates.EmailOrderHeader.FieldNames.OrderDeliveryAddressLabel, Html.Sitecore().CurrentItem); var billingAddressLabel = Html.Sitecore().Field(Constants.Templates.EmailOrderHeader.FieldNames.OrderBillingAddressLabel, Html.Sitecore().CurrentItem); } // This code specifies the CSS for this view.  Each view must define its own embedded // CSS unlike standard web pages. The rest of the view (.cshtml file) retrieves the data from // the EmailOrderModel. ## メールブランチテンプレートのレンダリングを作成します 各メールタイプには分岐テンプレートがあります。*新たに注文された*メールには以下の分岐があります: ![EmailBranch.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/EmailBranch.png) 以下の手順は、既存のオーダーヘッダーがブランチテンプレートに新たに配置されたブランチに追加された方法を説明します。この手順はどのブランチテンプレートでも同じです。 新しいレンダリングを「新しい順序の配置」分岐テンプレートに追加するには: 1. **コンテンツエディター**で、*sitecore/テンプレート/branch/feature/Commerce Experience Accelerator/Commerce Emails/新規注文*の順に行ってください。 2. **メッセージ**ルートを右クリックし、「**Insert」→「Insert」→「Insert from Template**」をクリックします。 3. *テンプレート/機能/コマース体験アクセラレーター/メール/注文/メールオーダーヘッダー*に行き、**アイテム名**欄に*メールオーダーヘッダー*を入力して**挿入をクリックします。** 4. コンテンツツリーで「新しい注文された」ブランチの **「メッセージルート** 」をクリックしてください。 5. リボンの上で「 **プレゼンテーション** 」タブをクリックし、「 **レイアウト** 」セクションで **「詳細**」をクリックしてください。 6. **デフォルト**セクションで**編集**をクリックし、**デバイスエディター**のダイアログボックスで**コントロール**タブをクリックします。 7. **追加**をクリックして、*レンダリング/フィーチャー/コマース体験アクセラレーター/コマースメール/メールオーダー/メールオーダーヘッダー*に行き、「**選択**」をクリックします。 ![DeviceEditor.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/DeviceEditor.png) 8. メールオーダーヘッダーを選択し、**編集**をクリックします。 9. **コントロールプロパティ**のダイアログボックスの**「一般**」セクションで、「**データソース**の下の**ブラウズ」**をクリックし、メッセージのルートへ移動します。メール注文ヘッダー項目を選択し、**OK**をクリックします。 10. **コントロールプロパティ**のダイアログボックスで**OK**をクリックし、**デバイスエディター**のダイアログボックスで**OK**をクリックします。 メールオーダーヘッダーコントローラーとそのデータソースはメールメッセージの一部となります。新たに注文したメールメッセージが作成されると、レンダリングも含まれます。