Magento 2 Email Templates - Gordon Lesti · trans Translation with variables { Example I Store con g general/store information/name has value MageBln Shop I i18n/de DE.csv "It is

Magento 2 Email Templates45th Magento Stammtisch Meetup Berlin

Gordon Lesti

brandung GmbH & Co. KGLeuschnerdamm 13

10999 Berlinhttps://www.agentur-brandung.de/

November 28, 2017

https://www.agentur-brandung.de/

Outline

Create Email TemplateAdminCode

Directivestransconfig

Custom configurations

blockvartemplateifdependcssinlinecsslayout

Resources

Create Email TemplateAdmin

Admin Preview

Create Email TemplateCode

I view/frontend/email/it is your birthday.html

<!−−@subject It is your Birthday @−−>Happy Birthday,<br/>all the best for you.<br/><br/>Best Regards<br/>MageBln

I etc/email templates.xml

<?xml version=”1.0”?><config xmlns:xsi=”http://www.w3.org/2001/XMLSchema−instance”

xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento Email:etc/email templates.xsd”><template id=”it is your birthday”

label=”It is your Birthday”file=”it is your birthday.html”type=”html”module=”MageBln EmailTemplates”area=”frontend”/>

</config>

Directives

I Similar to a template engine for email templates

I Start with {{, followed by a keyword

I End with }}I Processed by Magento\Email\Model\Template\Filter

trans

I Keyword is trans

I Translates strings

I Can process injected variables

I Uses function under the hood

I Usable in subject and content

transTranslation – Example

I i18n/de DE.csv

”It is your Birthday”,”Es ist dein Geburtstag””Best Regards”,”Beste Gruße”


<!−−@subject {{trans ”It is your Birthday”}} @−−>Happy Birthday,<br/>all the best for you.<br/><br/>

{{trans ”Best Regards”}}<br/>MageBln

transTranslation – Example

Preview

transTranslation with variables – Example

I Store config general/store information/name has valueMageBln Shop

I i18n/de DE.csv

”It is your Birthday”,”Es ist dein Geburtstag””all the best for you from %store name.”,”nur das Beste fur dich von %store name.””Best Regards”,”Beste Gruße”


<!−−@subject {{trans ”It is your Birthday”}} @−−>Happy Birthday,<br/>{{trans ”all the best for you from %store name.” store name=$store.getFrontendName()}}<br/><br/>{{trans ”Best Regards”}}<br/>MageBln

transTranslation with variables – Example

Preview

transTranslation with URL variable – Example

I Route birthday/gift/download exists

I $customer variable is injected

I i18n/de DE.csv

”It is your Birthday”,”Es ist dein Geburtstag””all the best for you from %store name.”,”nur das Beste fur dich von %store name.””Your <a href=””%url””>gift</a>.””Best Regards”,”Beste Gruße”


<!−−@subject {{trans ”It is your Birthday”}} @−−>Happy Birthday,<br/>{{trans ”all the best for you from %store name.” store name=$store.getFrontendName()}}{{trans ’Your <a href=”%url”>gift</a>.’

url=”$this.getUrl($store,’birthday/gift/download/’,[ query:[id:$customer.id], nosid:1])”|raw}}

<br/><br/>{{trans ”Best Regards”}}<br/>MageBln

transTranslation with URL variable – Example

Preview

config

I Keyword is config

I Injects store config data

I Restricted by Magento\Email\Model\Source\Variables

configAvailable configurations

value labelweb/secure/base url Base Secure URLtrans email/ident general/name General Contact Nametrans email/ident general/email General Contact Emailtrans email/ident sales/name Sales Representative Contact Nametrans email/ident sales/email Sales Representative Contact Emailtrans email/ident custom1/name Custom1 Contact Nametrans email/ident custom1/email Custom1 Contact Emailtrans email/ident custom2/name Custom2 Contact Nametrans email/ident custom2/email Custom2 Contact Emailgeneral/store information/name Store Namegeneral/store information/phone Store Phone Numbergeneral/store information/hours Store Hoursgeneral/store information/country id Countrygeneral/store information/region id Region/Stategeneral/store information/postcode Zip/Postal Codegeneral/store information/city Citygeneral/store information/street line1 Street Address 1general/store information/street line2 Street Address 2

configConfiguration – Example





<br/><br/>{{trans ”Best Regards”}}<br/>{{config path=”general/store information/name”}}

configConfiguration – Example

Preview

configCustom configurations – Example

I Create custom configuration field for a bitcoin addressI etc/adminhtml/system.xml


xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento Config:etc/system file.xsd”><system>

<section id=”general”><group id=”bitcoin”

translate=”label”type=”text”sortOrder=”900”showInDefault=”1”showInWebsite=”1”showInStore=”1”><label>Bitcoin</label><field id=”address”

translate=”label”type=”text”sortOrder=”1”showInDefault=”1”showInWebsite=”1”showInStore=”1”><label>Address</label>

</field></group>

</section></system>

</config>


I Magento\Email\Model\Source\Variables is responsible toinsert configuration value while sending email

I Magento\Email\Block\Adminhtml\Template\Edit\Formis responsible to show configurations in the admin form

I etc/di.xml


xsi:noNamespaceSchemaLocation=”urn:magento:framework:ObjectManager/etc/config.xsd”><type name=”Magento\Email\Model\Source\Variables”>

<plugin name=”mageBlnEmailTemplatesEmailSourceVariables”type=”MageBln\EmailTemplates\Plugin\Email\Model\Source\Variables”/>

</type><type name=”Magento\Email\Block\Adminhtml\Template\Edit\Form”>

<plugin name=”mageBlnEmailTemplatesEmailAdminhtmlTemplateEditForm”type=”MageBln\EmailTemplates\Plugin\Email\Block\Adminhtml\Template\Edit\Form”/>

</type></config>


I Plugin/Email/Model/Source/Variables.php

<?phpdeclare(strict types=1);

namespace MageBln\EmailTemplates\Plugin\Email\Model\Source;

class Variables{

private $additionalConfigVariables = [];

public function construct(){

$this−>additionalConfigVariables = [[’value’ => ’general/bitcoin/address’, ’label’ => (’Bitcoin Address’)],

];}

public function getAdditionalConfigVariables() : array{

return $this−>additionalConfigVariables;}

public function afterGetData(Magento\Email\Model\Source\Variables $subject, $result){

return array merge($result, $this−>getAdditionalConfigVariables());}

}


I Plugin/Email/Block/Adminhtml/Template/Edit/Form.php<?phpdeclare(strict types=1);

namespace MageBln\EmailTemplates\Plugin\Email\Block\Adminhtml\Template\Edit;

class Form{

private $variables;

public function construct(MageBln\EmailTemplates\Plugin\Email\Model\Source\Variables $variables){

$this−>variables = $variables;}

public function afterGetVariables(Magento\Email\Block\Adminhtml\Template\Edit\Form $subject, $result){

$optionArray = [];foreach ($this−>variables−>getAdditionalConfigVariables() as $variable) {

$optionArray[] = [’value’ => ’{{config path=”’ . $variable[’value’] . ’”}}’,’label’ => $variable[’label’],

];}if ($optionArray) {

$result[] = [’label’ => (’Bitcoin’), ’value’ => $optionArray];}return $result;

}}


Insert Variable...


I Store config general/bitcoin/address has value**********************************




<br/>{{trans ”Send your bitcoins to”}} {{config path=”general/bitcoin/address”}}.<br/><br/>{{trans ”Best Regards”}}<br/>{{config path=”general/store information/name”}}


Preview

block

I Keyword is block


I Can insert PHP templates

I Can insert CMS blocks

blockTemplate – Example

I etc/email templates.xml<?xml version=”1.0”?><config xmlns:xsi=”http://www.w3.org/2001/XMLSchema−instance”

xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento Email:etc/email templates.xsd”><!−− ... −−><template id=”date”

label=”The current date”file=”date.html”type=”html”module=”MageBln EmailTemplates”area=”frontend”/>

<!−− ... −−></config>

I view/frontend/email/date.html<!−−@subject {{trans ”The current date”}} @−−>Hello,<br/>{{block class=’Magento\\Framework\\View\\Element\\Template’

area=’frontend’template=’MageBln EmailTemplates::email/date.phtml’}}<br/>

{{block class=’Magento\\Framework\\View\\Element\\Template’area=’frontend’template=’MageBln EmailTemplates::email/date.phtml’timestamp=”1447750229”}}<br/>

<br/>{{trans ”Best Regards”}}<br/>MageBln


I view/frontend/templates/email/date.phtml

<?phpdeclare(strict types=1);

$timestamp = $block−>getTimestamp();// ignore that the date format does not change with the locale$date = date(’F j, Y’);if ($timestamp) {

$date = date(’F j, Y’, (int) $timestamp);}echo sprintf( (”The current date is %s”), $date);


Preview

blockCMS block – Example

I The content of the CMS block with id 19<h1>Do you know the date?</h1>

I view/frontend/email/date.html

<!−−@subject {{trans ”The current date”}} @−−>Hello,<br/>{{block id=”19”}}<br/>{{block class=’Magento\\Framework\\View\\Element\\Template’

area=’frontend’template=’MageBln EmailTemplates::email/date.phtml’}}<br/>

<br/>{{trans ”Best Regards”}}<br/>MageBln

blockCMS block – Example

Preview

var

I Keyword is varI Prints variables that are injected by PHP or parent template

I Set variables by PHP function setTemplateVars ofMagento\Sales\Model\Order\Email\Container\Template

I Make variables in admin accessable via varsI Those variables will be extended if Load Template button

was used to create

varVariable – Example


<!−−@subject {{trans ”It is your Birthday”}} @−−><!−−@vars {”var variable key”:”Variable Label”} @−−>Happy Birthday,<br/>{{trans ”all the best for you from %store name.” store name=$store.getFrontendName()}}{{var variable key}}<br/><br/>{{trans ”Best Regards”}}<br/>{{config path=”general/store information/name”}}

varVariable – Example

Admin

template

I Keyword is template


I Can insert child templates as header, footer, ...

templateHeader & Footer – Example



<!−−@subject {{trans ”It is your Birthday”}} @−−>{{template config path=”design/email/header template”}}

Happy Birthday,<br/>{{trans ”all the best for you from %store name.” store name=$store.getFrontendName()}}<br/><br/>{{trans ”Best Regards”}}<br/>{{config path=”general/store information/name”}}

{{template config path=”design/email/footer template”}}

templateHeader & Footer – Example

Preview

templateCustom middle template – Example

I etc/email templates.xml<?xml version=”1.0”?><config xmlns:xsi=”http://www.w3.org/2001/XMLSchema−instance”

xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento Email:etc/email templates.xsd”><!−− ... −−><template id=”design email middle template”

label=”Middle”file=”middle.html”type=”html”module=”MageBln EmailTemplates”area=”frontend”/>

<!−− ... −−></config>

I etc/config.xml<?xml version=”1.0”?><config xmlns:xsi=”http://www.w3.org/2001/XMLSchema−instance”

xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento Store:etc/config.xsd”><default>

<design><email>

<middle template>design email middle template</middle template></email>

</design></default>

</config>


I view/frontend/middle.html

</td></tr>

</table>In the middle of {{var thing}}!<table class=”main” align=”center”>

<tr><td class=”main−content”>



Happy Birthday,<br/>{{trans ”all the best for you from %store name.” store name=$store.getFrontendName()}}

{{template config path=”design/email/middle template” thing=”NOWHERE”}}

{{trans ”Best Regards”}}<br/>{{config path=”general/store information/name”}}



Preview

if

I Keywords are if, else and /ifI A logic operator, similar to PHP if

I Returns false if string casted value is equal to empty string

I else is not required

I Can not be nested with other if, but once with depend

ifIf – Example

I view/frontend/middle.html</td>

</tr></table>{{if thing}}

In the middle of {{var thing}}!{{else}}

In the middle of NOWHERE!{{/if}}<table class=”main” align=”center”>


I view/frontend/email/it is your birthday.html<!−−@subject {{trans ”It is your Birthday”}} @−−>{{template config path=”design/email/header template”}}


{{template config path=”design/email/middle template”}}{{template config path=”design/email/middle template” thing=”the NIGHT”}}



ifIf – Example

Preview

depend

I Keywords are depend and /depend

I The same as if without else

I Can not be nested with other depend, but once with if

dependDepend in If – Example

I view/frontend/middle.html

</td></tr>

</table>{{if thing}}{{depend highlight}}<label style=”color:#c00”>{{/depend}}

In the middle of {{var thing}}!{{depend highlight}}</label>{{/depend}}

{{else}}{{depend highlight}}<label style=”color:#00c”>{{/depend}}

In the middle of NOWHERE!{{depend highlight}}</label>{{/depend}}

{{/if}}<table class=”main” align=”center”>






{{template config path=”design/email/middle template” thing=”the NIGHT”}}{{template config path=”design/email/middle template” highlight=”1”}}{{template config path=”design/email/middle template” highlight=”1” thing=”the STREET”}}




Preview

css

I Keyword is css

I A reference to a CSS file

I The CSS file content will be injected

cssCSS – Example

I web/css/custom email.css

.best regards {color: #0c0;

}


<!−−@subject {{trans ”It is your Birthday”}} @−−><style type=”text/css”>{{css file=”MageBln EmailTemplates::css/custom email.css”}}

</style>{{template config path=”design/email/header template”}}

Happy Birthday,<br/>{{trans ”all the best for you from %store name.” store name=$store.getFrontendName()}}<br/><br/><label class=”best regards”>{{trans ”Best Regards”}}</label><br/>{{config path=”general/store information/name”}}


cssCSS – Example

Preview

inlinecss

I Keyword is inlinecss

I A reference to a CSS file

I The CSS styles will be applied as inline CSS to the HTML

cssCSS – Example

I web/css/inline custom email.css

.inline best regards {color: #0cc;font−weight: bold;

}


<!−−@subject {{trans ”It is your Birthday”}} @−−>{{template config path=”design/email/header template”}}{{inlinecss file=”MageBln EmailTemplates::css/inline custom email.css”}}

Happy Birthday,<br/>{{trans ”all the best for you from %store name.” store name=$store.getFrontendName()}}<br/><br/><label class=”inline best regards”>{{trans ”Best Regards”}}</label><br/>{{config path=”general/store information/name”}}


cssCSS – Example

I HTML before<label class=”inline best regards”>Beste Gruße</label>

I HTML with applied inline CSS

<label class=”inline best regards” style=”color: #0cc; font−weight: bold;”>Beste Gruße</label>

inlineccsCSS – Example

Preview

layout

I Keyword is layout

I Inserts a hole tree of blocks


layoutLayout – Example

I view/frontend/layout/magebln email templates date.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=”MageBln EmailTemplates Date”design abstraction=”custom”><body>

<!−− Known from an example above −−><block class=”Magento\Framework\View\Element\Template”

name=”date”template=”MageBln EmailTemplates::email/date.phtml”/>

</body></page>

I view/frontend/email/it is your birthday.html<!−−@subject {{trans ”The current date”}} @−−>{{template config path=”design/email/header template”}}

Happy Birthday,<br/>{{layout area=”frontend” handle=”magebln email templates date”}}<br/>{{trans ”all the best for you from %store name.” store name=$store.getFrontendName()}}<br/><br/><label class=”best regards”>{{trans ”Best Regards”}}</label><br/>{{config path=”general/store information/name”}}


layoutLayout – Example

Preview

Resources

I https://gordonlesti.com/

magento-2-email-template-block-directives/


magento-2-email-template-translator-directives/


magento-2-email-template-config-directives/


magento-2-email-template-template-directives/


magento-2-email-template-logic-directives/


magento-2-email-template-style-directives/


magento-2-email-template-layout-directives/

https://gordonlesti.com/magento-2-email-template-block-directives/

https://gordonlesti.com/magento-2-email-template-block-directives/

https://gordonlesti.com/magento-2-email-template-translator-directives/

https://gordonlesti.com/magento-2-email-template-translator-directives/

https://gordonlesti.com/magento-2-email-template-config-directives/

https://gordonlesti.com/magento-2-email-template-config-directives/

https://gordonlesti.com/magento-2-email-template-template-directives/

https://gordonlesti.com/magento-2-email-template-template-directives/

https://gordonlesti.com/magento-2-email-template-logic-directives/

https://gordonlesti.com/magento-2-email-template-logic-directives/

https://gordonlesti.com/magento-2-email-template-style-directives/

https://gordonlesti.com/magento-2-email-template-style-directives/

https://gordonlesti.com/magento-2-email-template-layout-directives/

https://gordonlesti.com/magento-2-email-template-layout-directives/

Thank you for listening.

Documents

Magento 2 Email Templates - Gordon Lesti · trans Translation with variables { Example I Store con g general/store information/name has value MageBln Shop I i18n/de DE.csv "It is