プレーンテキストのメールテンプレート作成手順

このエントリはMagento Advent Calendar 2017の18日目です。

今回はMagento2でプレーンテキストのメールテンプレート作成手順について解説したいと思います。
Magento2では標準がHTMLメールのため「今更プレーンテキスト？」という方がほとんどかと思いますが、一部ではまだまだ根強い人気がありますので、ご参考いただければ幸いです。

テーマを使う

Magento2でメールテンプレートを作成するにはいくつか方法があります。

管理画面から作成する
テーマに追加する
モジュールを作成する

管理画面から作成できる範囲は意外と大雑把でブロック単位での再配置などになってしまい、Webサイト特有の文章の配置は少し難しかったりします。なので、今回はある程度柔軟に文章を配置でき、かつそこまで大掛かりな作業を行わずともメール文章を自由にカスタマイズできる「テーマに追加する」のパターンを「注文完了メールのカスタマイズ」でご紹介します。

大まかな手順

大まかな手順としては以下のような流れになります。

カスタマイズしたいメールのテンプレートを上書きするファイルを作成する (order_new.html)
テンプレート内で呼び出すブロックを定義する (各layout.xml)
テンプレートを実装する (各phtml)
管理画面からテンプレートを読み込む
注文完了メールに作ったテンプレートを設定する

カスタマイズしたいメールのテンプレートを上書きするファイルを作成する (order_new.html)

今回は注文完了メールを override する形にするため、 Magento_Sales のディレクトリをテーマの下に作り、 order_new.html を用意します。
最終的なソースツリーも含めて今回は以下のような構成になります。
次に order_new.html は以下のように記載します。テンプレート内で呼び出している sample_sales_email_order_payment などのブロック定義は次項で記載します。

<!--@subject [] ご注文受付のお知らせ @-->
<!--@vars {
"var order.getEmailCustomerNote()":"Email Order Note",
"var order.increment_id":"Order Id",
"layout handle=\"sales_email_order_items\" order=$order area=\"frontend\"":"Order Items Grid"
} @-->
Dear 

でのご注文ありがとうございます。
お荷物の出荷後には送り状番号をお知らせいたします。

[ORDER NO.] {{var order.increment_id |raw}}
[ORDER DATE.] {{var order.getCreatedAtFormatted(2) |raw}}

--------------------------------------------------------------
[ORDERER INFORMATION.]

E-MAIL. {{var order.getCustomerEmail()}}
--------------------------------------------------------------
[SHIPPING INFORMATION.]

==============================================================



--------------------------------------------------------------

テンプレート内で呼び出すブロックを定義する (各layout.xml)

上記 order_new.html 内で呼び出している独自ブロックは以下のように定義します。

支払方法をカスタマイズするブロック sample_sales_email_order_payment.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" label="Email Order Payment Method" design_abstraction="custom">
    <body>
        <block class="Magento\Sales\Block\Order\Email\Items" name="payment" template="email/order/payment.phtml"/>
    </body>
</page>

配送先/請求先情報をカスタマイズするブロック sample_sales_email_order_address.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" label="Email Order Payment Method" design_abstraction="custom">
    <body>
        <block class="Magento\Sales\Block\Order\Email\Items" name="payment" template="email/order/address.phtml"/>
    </body>
</page>

注文情報をカスタマイズするブロック sample_sales_email_order_items.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" label="Sample Sales Email Order Items" design_abstraction="custom">
    <update handle="sales_email_order_renderers"/>
    <update handle="sales_email_item_price"/>
    <body>
        <block class="Magento\Sales\Block\Order\Email\Items" name="items" template="email/order/items.phtml" cacheable="false">
            <block class="Magento\Framework\View\Element\RendererList" name="sales.email.order.renderers" as="renderer.list"/>
            <block class="Magento\Sales\Block\Order\Totals" name="order_totals" template="email/order/totals.phtml" />
        </block>
        <block class="Magento\Framework\View\Element\Template" name="additional.product.info" template="Magento_Theme::template.phtml"/>
    </body>
</page>

テンプレートを実装する (各phtml)

ブロックで定義した各phtmlを実装します。全phtml通して改行が多めに入っているのは、改行1回だとメールデータに変換される際にうまく変換されず、データが1行で表示されたりするためです。この辺りは実際にメールを送信しながら検証を行って調整してください。

email/order/payment.phtml 支払情報の表示をカスタマイズします。
支払方法の実装によってはタイトルの取得が一筋縄ではいかないことがあり、注意が必要です。

<?php
$_order = $block->getOrder();
$_method = $_order->getPayment()->getMethodInstance();
$_title = $_method->getTitle();
?>
[<?php echo __('PAYMENT METHOD.');?>] <?php echo $_title; ?>

email/order/address.phtml 配送先、請求先の住所の配置をカスタマイズします。

<?php
// @codingStandardsIgnoreFile

$_address = $block->getAddress();
?>
<?php if ($_address): ?>
<?php echo __("CUSTOMER NAME.") . $_address->getName();?>

<?php echo __("POSTCODE.") . $_address->getPostcode();?>

<?php echo __("ADDRESS.") . $_address->getRegion() . $_address->getCity() . implode("", $_address->getStreet());?>

<?php echo __("TEL.") . $_address->getTelephone();?>

<?php endif; ?>

email/order/items.phtml 注文商品のSKUや商品名、注文個数などをカスタマイズします。

<?php
// @codingStandardsIgnoreFile
?>
<?php
$_order = $block->getOrder();
$_currency = $_order->getBaseCurrency();
?>
[<?= __('ORDER ITEMS.') ?>]
<?php if ($_order): ?>
<?php $_items = $_order->getAllItems(); ?>
<?php foreach ($_items as $_item): ?>
<?php
if ($_item->getParentItem()) {
    continue;
}
?>
<?php echo $_item->getName(); ?>

[<?php echo __('SKU.')  ?>] <?php echo $_item->getSku(); ?>

[<?php echo __('PRICE(INCL TAX).')?>] <?php echo $_currency->formatTxt($_item->getPriceInclTax()); ?>

[<?php echo __('QTY.')?>] <?php echo $_item->getQtyOrdered() . __('QTY SUFFIX'); ?>

<?php endforeach; ?>
<?= $block->getChildHtml('order_totals') ?>
<?php endif; ?>

email/order/totals.phtml 注文小計や注文合計などをカスタマイズします。
サンプルコードでは表示させたくない項目を $_skipCodes で定義してスキップするようにしています。

<?php
$_skipCodes =['grand_total', 'subtotal', 'shipping'];
$_order = $block->getOrder();
$_currency = $_order->getBaseCurrency();
?>
--------------------------------------------------------------
<?php foreach ($block->getTotals() as $_code => $_total): ?>
[<?php echo $_total->getLabel() ?>] <?php echo $_currency->formatTxt($_total->getValue()); ?>

<?php endforeach?>

管理画面からテンプレートを読み込む

管理画面のマーケティング > メールテンプレートを開きます。

新しいメールテンプレートの追加を開いて、先ほど作成したメールテンプレートを読み込みます。

ここで、画面上部にある「プレーンテキストに変換」をクリックしてから保存を行ってください。HTML状態のままだと先ほど作成したテンプレートがHTML扱いとなりレイアウトが台無しになってしまいます。

「テンプレートの保存」を行いテンプレートの読み込みは完了です。

注文完了メールに作ったテンプレートを設定する

最後に作成したテンプレートを注文完了メールに設定します。

店舗 > 設定からセールス > セールスメールを開きます。

「新しい注文確認テンプレート」に先ほど保存したメールテンプレートを設定し、「設定を保存」をクリックして保存してください。

設定を行って注文を行うと以下のようなメールが送信されます。

開発 三郎様

Main Website Storeからの注文ありがとうございます。
荷物が配送された後に追跡番号をお送りします。

[ご注文番号] 000000017
[ご注文日時] 2017/12/18 18:08:58
[支払方法] Check / Money order
--------------------------------------------------------------
[請求先]
お名前 開発 三郎
郵便番号 114-0013
住所 東京都北区東田端2-5-14クロコダイル2
電話番号 03-5842-1905

E-mail  support@veriteworks.co.jp
--------------------------------------------------------------
[配送先]
お名前 開発 三郎
郵便番号 114-0013
住所 東京都北区東田端2-5-14クロコダイル2
電話番号 03-5842-1905

==============================================================

[ご注文商品]
Wayfarer Messenger Bag
[商品番号] 24-MB05
[単価(税込) ] ￥48
[数量 ] 1個
Rival Field Messenger
[商品番号] 24-MB06
[単価(税込) ] ￥49
[数量 ] 1個
--------------------------------------------------------------
[小計] ￥90
[配送料と手数料] ￥10
[総合計] ￥107


--------------------------------------------------------------

終わりに

今回はMagento2でプレーンテキストのメールを作成する方法について解説しました。今回ご紹介した方法以外でもプレーンテキストのメールテンプレート作成方法はいくつかありますが、ある程度Webサイトごとで作られることが多いテーマを使った作成手順で解説しました。

明日はMagento Advent Calendar 19日目。Yusuke Kameyama さんによる「Magento2のダッシュボードの静的ビューが反映されないことについて」です。