The EmailTester extension

The EmailTester extension, available for both Magento 1 and Magento 2 (but see at the bottom of this post for the realy story on Magento 1 support), has been a long-running gift from Yireo to the Magento community, as it solves an important shortcoming in Magento:

Within the Magento Admin Panel, you can customize transactional emails and you can even preview them without any additional extension. However, the preview lacks sample data. And even if those sample data were there, you wouldn't be able to easily determine which product, customer or order record to use with a specific email. That's where the EmailTester extension comes in.

v1.6: Easily select your customer, order and product

The EmailTester allows you to select a customer, order or product within its form page. Next, you select the transactional email you want to preview. And then you can send this mail to an email address of your choice, or preview the mail in your browser.

The selection of a customer, order and product has now - with version 1.6 (or actually 1.5) - become a lot easier: Instead of using a long dropdown, a popup form allows you to search for records in a grid. Select the record you need and the popup closes again. It is behaviour that you are familiar with, for instance when creating sales orders in the Magento Admin Panel.

Look mom, React in the Magento backend!

It seems a really simple thing, but proofed to be extremely hard. The EmailTester is using the UiComponent XML layer for its form page, as it should, complying to Magento standards. But within that UiComponent XML there is no ready-made component available to select a product, customer or order in a popup. The mentioned sales order form, where a product popup actually exists, is not based on UiComponent XML but legacy PHP hacks instead. Dead-ugly and not reusable. For this reason, I postponed this feature for quite some time. I played around with a jQuery UI autocomplete widget, but it didn't really improve the user experience.

As you might know, I'm quite busy with PWA technology (React, Vue, GraphQL). So one idea I had for some time was to easily add React components to the Magento Admin Panel, allowing me to create new UiComponents fast. I'm really proud to say that this worked out really nice with the new EmailTester release: The UiComponent XML layer calls upon a custom Knockout template, which again calls upon a custom React component loader, which loads the relevant React component.

And thanks to the ease of React, I was able to easily add a search box button, triggering a modal effect, loading a popup screen with a data grid table, displaying customizable entities - all made possible with readable React components and a few simple AJAX calls.

Open new tabs while previewing

Another nice addition of the latest EmailTester release is the simple UI trick of opening up the Preview of a transactional email in a new window, instead of the existing window. This required a re-right again with the UiComponent logic, because instead of a form being submitted using a POST request, this is now turned into a simple GET request of the preview page with the right parameters.

The beauty of this is not only that the preview link opens in a new tab. In addition, the new page could be easily refreshed, because it no longer is a POST request but a GET request: You can modify GET parameters in the URL if you want. And you could even use some kind of page monitoring tool to refresh the page, once the underlying template is modified. Cool.

What about the Magento 1 version?

All of these new features are added to the Magento 2 version of the extension, not the Magento 1 version. As of yet, the Magento 1 version is still supported but no new features will be added to it. The Magento 1 End-Of-Life is almost there. And while there would be a business aspect into maintaining Magento 1 extensions, there is no personal interest in this for me. So all Magento 1 extensions will be deprecated somewhere in the upcoming months.

Let me know what you like about EmailTester

Let me know what you think of this new EmailTester release. And also, if you have any ideas for features to add to the existing extension, do let me know as well. It is a nice handy extension and I'm happy to improve it to make your life as a Magento developer easier.