チュートリアル: Commerce電子メールメッセージテンプレートの作成

Version:

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

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

サイト作成時にCommerceマーケティングオートメーションキャンペーンを選択すると、次のようになります。

メールマネージャールートは、Emails <site>命名規則で作成されます。
Commerceメールで使用されるテンプレートは、/sitecore/Templates/Feature/Commerce Experience Accelerator/Emailsフォルダーにあります。
Commerceメールで使用されるレンダリングは、sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/Commerce Emailsフォルダーにあります。
Commerceメールで使用されるレイアウトは、sitecore/Layout/Layouts/Feature/Commerce Experience Accelerator/Commerce Emailsフォルダーにあります。

顧客がカートを操作したり、注文したりすると、関連するマーケティングオートメーションプランに自動的に追加されます。自動化サービスはプランを評価し、顧客にメールを送信する必要があるかどうかを判断します。自動化サービスからEメールが開始されると、Eメール要求はメッセージバスに配置されます。コンテンツ管理 (CM) サーバーは、この情報を受け取り、URL (コマースクエリパラメーターを含む) を作成します。これは、電子メールのレンダリングに含まれ、放棄されたカートの電子メールメッセージまたは注文された電子メールメッセージの形式で顧客に送信されます。

メモ

コンポーネント (電子メールメッセージなど) をカスタマイズするときにコードを変更する必要がないようにするには、データテンプレートでラベルとメッセージを定義します。

提供されているテンプレートを使用しない場合は、独自のCommerceメールメッセージテンプレートを作成するか、既存のテンプレートを拡張できます。これを行うには、次の手順を実行します。

手記

「メールを送信」マーケティングアクションでは、メールメッセージにコマースデータは含まれません。

たとえば、「新規注文」のメールメッセージは、エクスペリエンスエディターで次のようにレンダリングされます。

メッセージコンテンツフィールドを作成または変更する

メッセージ内容フィールドを作成または変更するには:

Sitecoreスタート画面で、Content Editorをクリックします。
sitecore/Templates/Feature/Commerce Experience Accelerator/Emailsに移動します。
Cart、Order、Products、またはSharedフォルダを展開します。
メールコンポーネント (ヘッダー、行、合計など) を選択します。
Builderタブで、必要に応じてテンプレートフィールドのラベルとタイプを追加、変更、または削除します。
「 Save 」をクリックして変更を保存します。

メッセージのレンダリングを変更する

Content Editorで、sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/Commerce Emailsフォルダに移動します。
Email Cart、Catalog, Order、またはSharedフォルダーを展開します。
メールコンポーネント (カート品目、カート合計など) を選択します。
ContentタブのDataセクションで、必要に応じてコントローラーのアクションを変更します。
「 Save 」をクリックして変更を保存します。

メールメッセージでレンダリングするための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<IEmailOrderRepository>();
     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をカスタマイズする」を参照してください。

リポジトリメソッドコードは、指定されたクエリパラメーターに基づいてSitecoreサイトと現在ログインしているユーザーを設定するSetupCommerceSiteContextコンテキストスイッチ内のコントローラーから呼び出されます。

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<EmailOrderModel>(); ;
  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<IStorefrontContext>();
  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.Items[OrderModelKey] != null)
 {
     order = (Engine.Connect.Entities.CommerceOrder)SiteContext.Items[OrderModelKey];
 }
 else
 {
     var orderManager = ServiceLocator.ServiceProvider.GetService<IOrderManager>();
     var response = orderManager.GetOrderDetails(storefrontContext.CurrentStorefront, visitorContext, orderId);
     order = response.Result as Engine.Connect.Entities.CommerceOrder;
     SiteContext.Items[OrderModelKey] = 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.

<style type="text/css">
    .message-area {
        display: flex;
        justify-content: space-between;
    }

        .message-area .email-text-container {
            flex-basis: 70%;
            box-sizing: border-box;
        }

        .message-area .email-order-header-container {
            flex-basis: 30%;
            margin-right: 20px;
            margin-bottom: 20px;
            border: 1px solid #6B717B;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            box-sizing: border-box;
        }

    .email-order-header-container {
        padding: 20px;
        font-family: "Open Sans",sans-serif !important;
        font-size: 14px;
        color: #6B717B;
    }

        .email-order-header-container .order-header {
            font-size: 16px;
            font-weight: bold;
            color: #383C41;
            margin: 0;
        }

        .email-order-header-container .order-header + .order-details {
            margin-top: 20px;
        }

        .email-order-header-container .order-address-line + .order-address-line {
            margin-top: 5px;
        }

    .order-information-container .order-detail {
        display: flex;
        justify-content: space-between;
    }

              .order-information-container .order-detail + .order-detail {
                     margin-top: 5px;
              }

              .order-information-container .order-detail .label:after {
                     content: ": ";
              }
              
              .order-information-container .order-detail .value {
                     max-width: 60%;
                     word-wrap: break-word;
              }

    .order-billing-container,
    .order-delivery-container {
        margin-top: 40px;
    }
</style>
<div class="email-order-header-container">
    @if (!string.IsNullOrWhiteSpace(Model.RenderingMessage))
    {
        <h2>@Model.RenderingMessage</h2>
    }
    else
    {
        <div class="component-content">
            <div class="order-information-container">
                <h3 class="order-header">
                    @orderInformationLabel
                </h3>
                <div class="order-details">
                    <div class="order-detail order-number">
                        <span class="label">
                            @orderIdLabel
                        </span>
                        <span class="value">
                            @Model.TrackingNumber
                        </span>
                    </div>
                    <div class="order-detail order-date">
                        <span class="label">
                            @orderDateLabel
                        </span>
                        <span class="value">
                            @Model.Created.ToDisplayedDate()
                        </span>
                    </div>
                    <div class="order-detail order-status">
                        <span class="label">
                            @orderStatusLabel
                        </span>
                        <span class="value">
                            @Model.Status
                        </span>
                    </div>
                </div>
            </div>
            @if (Model.BillingAddress != null)
            {
                <div class="order-billing-container">
                    <h3 class="order-header">
                        @billingAddressLabel
                    </h3>
                    <div class="order-details">
                        <div class="order-address-line">
                            <span class="billing-address-line">
                                @Model.BillingAddress.Address1,
                            </span>
                            <span class="billing-address-city">
                                @Model.BillingAddress.City
                            </span>
                        </div>
                        <div class="order-address-line">
                            <span class="billing-address-state">
                                @Model.BillingAddress.State, 
                            </span>
                            <span class="billing-address-zipcode">
                                @Model.BillingAddress.ZipPostalCode
                            </span>
                        </div>
                        <div class="order-address-line">
                            <span class="billing-address-country">
                                @Model.BillingAddress.Country
                            </span>
                        </div>
                    </div>
                </div>
            }
            @if (Model.IsSingleShipping && Model.ShippingAddress != null)
            {
                <div class="order-delivery-container">
                    <h3 class="order-header">
                        @deliveryAddressLabel
                    </h3>
                    <div class="order-details">
                        <div class="order-address-line">
                            <span class="shipping-address-line">
                                @Model.ShippingAddress.Address1,
                            </span>
                            <span class="shipping-address-city">
                                @Model.ShippingAddress.City
                            </span>
                        </div>
                        <div class="order-address-line">
                            <span class="shipping-address-state">
                                @Model.ShippingAddress.State, 
                            </span>
                            <span class="shipping-address-zipCode">
                                @Model.ShippingAddress.ZipPostalCode
                            </span>
                        </div>
                        <div class="order-address-line">
                            <span class="shipping-address-country">
                                @Model.ShippingAddress.Country
                            </span>
                        </div>
                    </div>
                </div>
            }
        </div>
    }
</div>

メールブランチテンプレートのレンダリングを作成する

各メールタイプにはブランチテンプレートがあります。New order placedメールには次の分岐があります。

次の手順では、既存の注文ヘッダーが分岐テンプレートの New Order Placed 分岐に追加された方法について説明します。手順は、どのブランチテンプレートでも同じです。

新しいレンダリングをNew Order Placedブランチテンプレートに追加するには:

Content Editorで、sitecore/Templates/Branches/Feature/Commerce Experience Accelerator/Commerce Emails/New order placedに移動します。
Message Rootを右クリックし、Insert, Insert from Templateをクリックします。
Templates/Feature/Commerce Experience Accelerator/Emails/Order/Email order headerに移動し、Item NameフィールドにEmail order headerと入力してInsertをクリックします。
コンテンツツリーで、新規発注ブランチのMessage Rootをクリックします。
リボンのPresentationタブをクリックし、LayoutセクションでDetailsをクリックします。
Defaultセクションで「Edit」をクリックし、「Device Editor」ダイアログボックスで「Controls」タブをクリックします。
「 Add 」をクリックして「 Renderings/Feature/Commerce Experience Accelerator/Commerce Emails/Email Order/Email order header」に移動し、「 Select」をクリックします。
「メール注文」ヘッダーを選択した状態で、「Edit」をクリックします。
Control PropertiesダイアログボックスのGeneralセクションで、Data Sourceの下のBrowseをクリックし、メッセージルートに移動します。「メール注文」ヘッダー項目を選択し、「OK」をクリックします。
Control Propertiesダイアログボックスで「OK」をクリックし、「Device Editor」ダイアログボックスで「OK」をクリックします。

メール注文ヘッダーコントローラーとそのデータソースがメールメッセージの一部になりました。新規注文の電子メールメッセージが作成されると、レンダリングが含まれます。

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

チュートリアル: Commerce電子メール メッセージ テンプレートの作成

メッセージコンテンツフィールドを作成または変更する

メッセージのレンダリングを変更する

メール メッセージでレンダリングするためのCommerceデータを取得する

メール ブランチ テンプレートのレンダリングを作成する

チュートリアル: Commerce電子メールメッセージテンプレートの作成

メールメッセージでレンダリングするためのCommerceデータを取得する

メールブランチテンプレートのレンダリングを作成する