To check the email template design while creating, Magento 2 offers the preview option. That shows how the email template design will look in the frontend. However, the process is complicated and time-consuming as well.<\/p>\n\n\n\n
Here are the steps that you have to follow for checking the output of the design of the email template from the admin panel:<\/p>\n\n\n\n Login to Magento 2 admin panel<\/p>\n\n\n\n Visit Marketing > Communications > Email Templates <\/strong><\/p>\n\n\n\n Click on Add New Template<\/strong><\/p>\n\n\n\n Select and click on Load Template<\/strong><\/p>\n\n\n Now, click on Preview Template <\/strong>to see the changes that you have made.<\/p>\n\n\n\n However, the programmatic method to use phtml file in Email template in Magento 2<\/strong><\/em> can be a better option that eliminates the above steps and removes the admin\u2019s dependency.<\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/registration.php<\/strong><\/em><\/em><\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/etc\/module.xml<\/strong><\/em><\/em><\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/etc\/frontend\/routes.xml<\/strong><\/em><\/em><\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/Controller\/Index\/Index.php<\/strong><\/em><\/em><\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/view\/frontend\/layout\/extension_index_index.xml<\/strong><\/em><\/em><\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/Block\/Extension.php<\/strong><\/em><\/em><\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/view\/frontend\/templates\/template_file.phtml<\/strong><\/em><\/em><\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/view\/frontend\/email\/email_template.html<\/strong><\/em><\/em><\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/etc\/email_templates.xml<\/strong><\/em><\/em><\/p>\n\n\n\n Create app\/code\/Vendor\/Extension\/Helper\/Data.php<\/strong><\/em><\/p>\n\n\n\n That\u2019s it.<\/p>\n\n\n\n Do consider sharing this article with Magento Community via social media.<\/p>\n\n\n\n Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":" Magento 2 store owners send emails to customers for not only marketing purposes but also for sending the order, shipping, and invoice details. For branding…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-5856","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/5856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=5856"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/5856\/revisions"}],"predecessor-version":[{"id":14645,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/5856\/revisions\/14645"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=5856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=5856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=5856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Email](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/10\/Email-template-grid-1024x337.png\")
<\/figure>\n\n\n\n![\"Email](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/10\/Email-template-preview-1024x578.png\")
<\/figure>\n<\/div>\n\n\nSteps to Use phtml File in Email Template in Magento 2<\/h2>\n\n\n\n
<?php \nMagento\\Framework\\Component\\ComponentRegistrar;\n\nComponentRegistrar::register(\n ComponentRegistrar::MODULE, \n 'Vendor_Extension', \n __DIR__\n);<\/pre>\n\n\n\n
<? xml version = \"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n <module name=\"Vendor_Extension\" setup_version=\"1.0.0\">\n <\/module>\n<\/config><\/pre>\n\n\n\n
<? xml version = \"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n xsi:noNamespaceSchemaLocation=\"urn:magento:framework:App\/etc\/routes.xsd\">\n <router id=\"standard\">\n <route id=\"extension\" frontName=\"extension\">\n <module name=\"Vendor_Extension\"\/>\n <\/route>\n <\/router>\n<\/config><\/pre>\n\n\n\n
<?php namespace Vendor\\Extension\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\nuse Magento\\Framework\\App\\Action\\Action;\n\nclass Index extends Action\n{\n protected $resultPageFactory;\n\n public function __construct(Context $context, PageFactory $resultPageFactory)\n {\n parent::__construct($context);\n $this->resultPageFactory = $resultPageFactory;\n }\n\n public function execute()\n {\n return $resultPage = $this->resultPageFactory->create();\n }\n}<\/pre>\n\n\n\n<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\"\n xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n <body>\n <referenceContainer name=\"content\">\n <block class=\"Vendor\\Extension\\Block\\Extension\" name=\"extension_index_index\"\n template=\"Vendor_Extension::template_file.phtml\"\/>\n <\/referenceContainer>\n <\/body>\n<\/page><\/pre>\n\n\n\n
<?php namespace Vendor\\Extension\\Block;\n\nuse Magento\\Framework\\View\\Element\\Template;\n\nclass Extension extends Template\n{\n protected $_template = 'Vendor_Extension::template_file.phtml';\n}<\/pre>\n\n\n\nThis is the content of the phtml file<\/pre>\n\n\n\n
<!--@subject Use phtml file in email template @-->\n<!--@vars {\"store url=\\\"\\\"\":\"Store Url\", \"skin url=\\\"images\/logo_email.gif\\\" _area='frontend'\":\"Email Logo Image\"} @-->\n<!--@styles body,td { color:#2f2f2f; font:11px\/1.35em Verdana, Arial, Helvetica, sans-serif; } @--> {{template\nconfig_path=\"design\/email\/header_template\"}} \n{{var template|raw}}<\/pre>\n\n\n\n<?xml version=\"1.0\"?>\n\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Email:etc\/email_templates.xsd\">\n <template id=\"my_custom_email_template\"\n label=\"Use phtml file in email template\"\n file=\"email_template.html\"\n type=\"html\"\n module=\"Vendor_Extension\"\n area=\"frontend\"\n \/>\n\n<\/config><\/pre>\n\n\n\n
<?php\n\nnamespace Vendor\\Extension\\Helper;\n\nuse Magento\\Framework\\App\\Area;\nuse Magento\\Framework\\Exception\\LocalizedException;\nuse Magento\\Framework\\Mail\\Template\\TransportBuilder;\nuse Magento\\Framework\\View\\Element\\AbstractBlock;\nuse Magento\\Framework\\View\\Element\\Template;\nuse Magento\\Store\\Model\\App\\Emulation;\nuse Vendor\\Extension\\Block\\Extension;\n\nclass Data extends Template\n{\n\n private $transportBuilder;\n\n private $appEmulation;\n\n public function __construct(\n Emulation $appEmulation,\n TransportBuilder $transportBuilder,\n Template\\Context $context,\n array $data = []\n ) {\n parent::__construct($context, $data);\n $this->transportBuilder = $transportBuilder;\n $this->appEmulation = $appEmulation;\n }\n\n \/**\n * Create block instance\n *\n * @param string|AbstractBlock $block\n * @return AbstractBlock\n * @throws LocalizedException\n *\/\n public function createBlock($block)\n {\n if (is_string($block)) {\n if (class_exists($block)) {\n $block = $this->_layout->createBlock($block);\n }\n }\n if (!$block instanceof AbstractBlock) {\n throw new LocalizedException(__('Invalid block type: %1', $block));\n }\n return $block;\n }\n \/\/call this function to send mail\n public function sendEmail()\n {\n \/\/ this is an example and you can change template id,fromEmail,toEmail,etc as per your need.\n $templateId = 'my_custom_email_template'; \/\/ template id\n $fromEmail = 'fromMail@email.com'; \/\/ sender Email id\n $fromName = 'From Name'; \/\/ sender Name\n $toEmail = 'tomail@email.com'; \/\/ receiver email id\n\n try {\n\n $block = $this->createBlock(Extension::class);\/\/pass reference of block class here, connected with phtml file\n \/\/ make sure in your block class there is\n \/\/ $_template variable exist which specifies the reference to the phtml file like\n \/\/ protected $_template = 'Vendor_Module::template.phtml';\n $template = $this->_appState->emulateAreaCode(\n Area::AREA_FRONTEND,\n [$block, 'toHtml']\n ); \/\/ pass this variable as template variable of email template.\n \/\/ template variables pass here\n $templateVars = [\n 'template' => $template\n ];\n \/\/ use this template variable in email template as {{var template|raw}}\n $storeId = $this->_storeManager->getStore()->getId();\n\n $from = ['email' => $fromEmail, 'name' => $fromName];\n $this->inlineTranslation->suspend();\n\n $templateOptions = [\n 'area' => Area::AREA_FRONTEND,\n 'store' => $storeId\n ];\n $transport = $this->transportBuilder->setTemplateIdentifier($templateId)\n ->setTemplateOptions($templateOptions)\n ->setTemplateVars($templateVars)\n ->setFrom($from)\n ->addTo($toEmail)\n ->getTransport();\n $transport->sendMessage();\n $this->inlineTranslation->resume();\n } catch (\\Exception $e) {\n $this->_logger->info($e->getMessage());\n }\n }\n}<\/pre>\n\n\n\n