Site icon MageComp Blog

How to add a Custom Parameter in Customer Order Email of Magento 2

How to add custom parameter in Customer Order Email of Magento 2

Even in the constant growth of technology and advancement, Email remains one of the most powerful tools for businesses to get in touch with their customers. For Ecommerce orders, it plays a vital role to inform and communicate with the customer in a cost-effective way. And, the order confirmation is one of it, which is used to provide store order placement acknowledgment to your customers to prevent miscommunication. It emphasizes customer relationships and provides more clear information regarding their transactions in your Magento 2 store.
Generally, these emails can be manipulated from the Magento backend. But you can change and update content or design, you can’t add dynamic value inside the mail. To include dynamic value inside your email template, you have to add your custom parameter too. So, here is three steps guide that will help you to add custom parameters in Customer Order Email of Magento 2.
First, you need to create “events.xml” file inside your extension folder.
app\code\Vendor\Extension\etc\events.xml

<pre class="lang:default decode:true">
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
	<event name="email_order_set_template_vars_before">
    	<observer name="order-add-custom-field-data" instance="Vendor\Extension\Observer\Emailtemplatevars"/>
	</event>
</config>
</pre>

After that, you need to create “Emailtemplatevars.php” file using below code inside that file. In this file, you can add one or more parameters.
app\code\Vendor\Extension\Observer\Emailtemplatevars.php

<pre class="lang:default decode:true">
<?php
namespace Vender\Extension\Observer;
 
class Emailtemplatevars implements \Magento\Framework\Event\ObserverInterface
{
	protected $helper;
	public function execute(\Magento\Framework\Event\Observer $observer)
	{
    	$transport = $observer->getTransport();
        $transport['Customvariable1'] = 'Your Values...';
            	//add multiple parameter
	}
}
</pre>

After that you need to create “order_new.html” file inside your extension folder and add below code inside that file.
app\design\frontend\Themes\Yourtheme\Magento_Sales\email\order_new.html

<pre class="lang:default decode:true">
<!--@subject Your {{var store.getFrontendName()}} order confirmation @-->
<!--@vars {
"var formattedBillingAddress|raw":"Billing Address",
"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",
"var payment_html|raw":"Payment Details",
"var formattedShippingAddress|raw":"Shipping Address",
"var order.getShippingDescription()":"Shipping Description"
} @-->
 
{{template config_path="design/email/header_template"}}
 
<h3>{{var Customvariable1|raw}}</h3>
 
<!-- add your all custom parameter -->
 
<table>
	<tr class="email-intro">
    	<td>
        	<p class="greeting">{{trans "%customer_name," customer_name=$order.getCustomerName()}}</p>
        	<p>
    	       
            	{{trans "Thank you for your order from %store_name." store_name=$store.getFrontendName()}}
            	{{trans "Once your package ships we will send you a tracking number."}}
            	{{trans 'You can check the status of your order by <a href="%account_url">logging into your account</a>.' account_url=$this.getUrl($store,'customer/account/',[_nosid:1]) |raw}}
        	</p>
        	<p>
            	{{trans 'If you have questions about your order, you can email us at <a href="mailto:%store_email">%store_email</a>.' store_email=$store_email |raw}}
        	</p>
    	</td>
	</tr>
	<tr class="email-summary">
    	<td>
        	<h1>{{trans 'Your Order <span class="no-link">#%increment_id</span>' increment_id=$order.increment_id |raw}}</h1>
        	<p>{{trans 'Placed on <span class="no-link">%created_at</span>' created_at=$order.getCreatedAtFormatted(1) |raw}}</p>
    	</td>
	</tr>
	<tr class="email-information">
    	<td>
        	{{depend order.getEmailCustomerNote()}}
        	<table class="message-info">
            	<tr>
                	<td>
                    	{{var order.getEmailCustomerNote()|escape|nl2br}}
                	</td>
            	</tr>
        	</table>
        	{{/depend}}
        	<table class="order-details">
            	<tr>
                	<td class="address-details">
                        <h3>{{trans "Billing Info"}}</h3>
                        <p>{{var formattedBillingAddress|raw}}</p>
                	</td>
                	{{depend order.getIsNotVirtual()}}
                	<td class="address-details">
                        <h3>{{trans "Shipping Info"}}</h3>
                        <p>{{var formattedShippingAddress|raw}}</p>
                	</td>
                	{{/depend}}
            	</tr>
            	<tr>
                	<td class="method-info">
                        <h3>{{trans "Payment Method"}}</h3>
              	      {{var payment_html|raw}}
                	</td>
                	{{depend order.getIsNotVirtual()}}
                	<td class="method-info">
                        <h3>{{trans "Shipping Method"}}</h3>
                        <p>{{var order.getShippingDescription()}}</p>
                	</td>
                	{{/depend}}
            	</tr>
        	</table>
        	{{layout handle="sales_email_order_items" order=$order area="frontend"}}
    	</td>
	</tr>
</table>
{{template config_path="design/email/footer_template"}}
</pre>

That’s it. You are free to manipulate this code according to your need of adding one or more parameters inside the order confirmation mail of Magento 2 or you can use our ready-made Magento 2 order confirmation email.
Lastly, if you found this blog helpful, don’t forget to share it with your colleagues and Magento Friends and Let us know if you are facing any issues while implementing this code.
Happy Coding!

Exit mobile version