Do we need to send a custom email? We must create custom email templates.
We will create a custom email template. Emails are an essential part of every website. Hence, emails must be unique and relevant. Magento provides a mechanism to override default email templates—for example, the Sales order email template. We can override it on the admin side using the marketing tab’s email template section, or we can override it in the theme and the custom module.
But What about the new functionality we must introduce using a custom module? In that case, we will create a custom email template in our custom module.
Creating a custom email template is much more accessible. So Let’s check it out in this post.
We will build the SbDevBlog_Inquiry module to demonstrate the process.
Magento 2: Create a custom email template
Create an email_templates.xml in the etc directory of the custom module.
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="../../../Magento/Email/etc/email_templates.xsd">
<template id="sbdevblog_inquiry_inquiry_email_template" label="Inquiry Email Template" file="inquiry_template.html" type="html" module="SbDevBlog_Email" area="frontend" />
</config>
The email_templates.xml file is essential to creating a custom email template. It contains a template tag along with several attributes, as described below:
Attribute | Description |
id | A unique email template ID. It must match the system.xml’s section/group/field ID that we bind with the system configuration. |
label | The label of the email template is accessible from the email templates section under the marketing tab. |
file | This attribute points to the HTML file, which we use as an email template. |
type | It must be HTML since we are rendering HTML tags in emails. |
module | Name of the custom module. |
area | These could be, for example, ‘frontend ’, ‘adminhtml ’ or ‘webapi_rest ’. |
Create the system.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="sbdevblog" translate="label" sortOrder="10">
<label>SB Dev Blog</label>
</tab>
<section id="sbdevblog_inquiry" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>Inquiry</label>
<tab>sbdevblog</tab>
<resource>SbDevBlog_Config::sbdevblog_config_inquiry</resource>
<group id="inquiry" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1"
showInStore="1">
<label>SbDevBlog Inquiry</label>
<field id="email_template" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="10"
translate="label comment" type="select">
<label>Inquiry Email Template</label>
<source_model>Magento\Config\Model\Config\Source\Email\Template</source_model>
</field>
</group>
</section>
</system>
</config>
Create a config.xml to define default email template.
<?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>
<sbdevblog_inquiry>
<inquiry>
<email_template>sbdevblog_inquiry_inquiry_email_template</email_template>
</inquiry>
</sbdevblog_inquiry>
</default>
</config>
Finally, Let’s create a template (HTML) file with the name inquiry_template.html as described in email_templates.xml inside the frontend area of the module.
<!--@subject {{trans "Inquiry Received"}} @-->
<!--@vars {
"var data.comment":"Comment",
"var data.email":"Sender Email",
"var data.name":"Sender Name",
"var data.telephone":"Sender Telephone"
} @-->
{{template config_path="design/email/header_template"}}
<table class="message-details">
<tr>
<td><strong>{{trans "Name"}}</strong></td>
<td>{{var data.name}}</td>
</tr>
<tr>
<td><strong>{{trans "Email"}}</strong></td>
<td>{{var data.email}}</td>
</tr>
<tr>
<td><strong>{{trans "Phone"}}</strong></td>
<td>{{var data.telephone}}</td>
</tr>
</table>
<p><strong>{{trans "Message"}}</strong></p>
<p>{{var data.comment}}</p>
{{template config_path="design/email/footer_template"}}
That’s it. We will use this email template to send inquiry notifications to the admin in the next blog. Thanks for reading the post – Magento 2: Create a custom email template. Please use the comment box for your suggestions. Also, Please subscribe and share SbDevBlog with your connections.
Click here to create a custom cron.
Note: Please verify the code of this blog and the relevant git repository before using it in production.
🙂 HAPPY CODING 🙂
One thought on “Magento 2: Create a custom email template”