Overview:

Zen Cart provides HTML formatted emails for a variety of situations - but customizing them can be time consuming. Preview Email allows you to see how emails Zen Cart sends will look directly from your admin panel. It fabricates the fields required by the email using real data from your cart. For example, previewing the Checkout email uses the order data from one of the last 20 checkouts in your cart.

To run Preview Email, follow the installation instructions below, then go to Admin > Customers > Preview Email. Select one of the emails shown and press the preview button. This is what an order confirmation email looks like before any changes have been made (circa Zen Cart 1.5.5).

Preview Email in Zen Cart Admin - Before

Now remember that browsers cache CSS, so as you change your CSS, you'll need to clear your cache. There are a few ways of doing this, but the one I use most often is detailed in this StackOverflow post.

The first thing we'd like to do is get rid of the pink and green. Again, there are many ways to discover the class you'd like to modify; the one I use is Chrome Devtools. This shows us that the green class is order-detail-area. Edit email/email_common.css and change the background-color on order-detail-area (to, say, #FFF). Similarly, change the background color on the comments class, and things will be looking better already. Refresh the admin page where you are running Preview Email, and you'll see something like this:

Preview Email in Zen Cart Admin - Phase 2

Much better! But now we can really notice that the box with the order line items and the box with the address information are overflowing their bounds. Using your DOM inspector, you can discover that the relevant class here is order-detail-area. The comments class is also a bit too wide. Tighten those up to 520px, and things look better.

Preview Email in Zen Cart Admin - Phase 3

But now, if we use Chrome Inspect (or any similar tool) to render the page as if it was viewed on a mobile device, we see we still have an issue.

Preview Email in Zen Cart Admin - Mobile Display

You'll notice a couple of issues - the address information box is too wide, and the horizontal line separating billing and shipping overflows a bit beyond the table border.

Let's fix this. As you can imagine, there's a media query which needs a bit of adjusting. We'll just tweak this, and voila!

Preview Email in Zen Cart Admin - Mobile Display FIXED

Direct Email

Zen Cart offers the ability to send an email to a customer or group of customers from the Admin > Tools > Send Email screen. Since this email has no pre-defined content, I thought the easiest way to allow you to test and refine it would be to read from a test HTML file. Accordingly, if you place a file called direct_test.html at the root of your cart, Preview Email will read and display this file.

In the example below, I have used a newsletter sent out by MailChimp. The only change I made to what came from MailChimp was to reduce the width of the table which the content was placed in. For clarity, I made the background of the email white, which can be done either by editing email/email_common.css or by adding to the style block in the template. (Obviously you'd want to edit this further to reduce whitespace, etc. before sending the email.)

Installation Instructions:

1. Back up everything! Try this in a test environment prior to installing it on a live shop.
2. Copy the contents of the unzipped folder to the root directory of your shop.
3. Run the preview_email.sql file against your database, using Admin > Tools > Install SQL Patches.

The following native Zen Cart emails are supported:

• Checkout
• Contact Us
• Coupon
• Default
• Direct
• GV Mail
• GV Queue
• GV Sent
• Order Status
• Password Forgotten
• Product Notification
• Welcome

Also some emails based on mods:

• Abandoned Cart (see abandoned cart required changes)
• Back In Stock plugins - both Ceon's and Larry Bislew's versions (see back in stock)

Common Installation Issues:

1. If you're running one of the newer versions of One Page Checkout, see this forum post for the changes needed to use Preview Email
2. Back In Stock emails: Both Ceon Back In Stock Notification and Ajax Back In Stock are supported.
   
3. Making Abandoned Cart emails work:
   The abandoned cart email is sent by the Recover Cart Sales mod.
   To make abandoned cart work, you must move the file
   admin/includes/languages/english/recover_cart_sales.php to includes/languages/english/recover_cart_sales.php.
   Then, replace the contents of admin/includes/languages/english/recover_cart_sales.php with

   <?php
   // File is now shared with the catalog side 
   require_once DIR_FS_CATALOG . '/includes/languages/english/recover_cart_sales_base.php';
   

4. Handling additional fields you have added to your email templates: A file is provided called admin/includes/functions/extra_functions/custom_preview_email.php. Place your customizations in there, following the example provided.
5. Remember that language file definitions are defined constants that can only be set once. This means that if the admin side defines a constant (say, EMAIL_LOGO_FILENAME), your storefront override won't change it in Preview Email. For most things this is not an issue, since the admin and storefront will most likely match, but it could be a source of confusion when they don't. If this occurs, Preview Email will be a less than perfect imitation of what will actually be sent.

Related Plugins

• Test Checkout Email
• Email Archive Manager

Resources on Zen Cart Email

• Documentation on Zen Cart Email
• Zen Cart Email Modifications

Major Versions

• 1.4 05/23/2022 - Updates for PHP 1.5.7, fix PHP notices.
• 1.3.1 06/21/2021 - Add support for Ceon's Back in Stock plugin
• 1.3 08/01/2020 - Allow population of direct email with test content
• 1.2 05/07/2020 - More email types
• 1.1 03/05/2020 - Updates for 1.5.6
• 1.0 11/01/2018 - First Release

FAQ

Q: What's the difference between Preview Email and Test Checkout Email ?
A: Preview Email shows you what one of the HTML emails sent by the cart (including the checkout email) will look like after you make changes to the HTML template and CSS. Test Checkout Email actually *re-sends* a checkout email for an order to the store owner, so you can verify both the text and HTML emails after making changes.

Q: I have a brand new cart and Preview Email doesn't work!
A: Preview Email assumes you have at least 20 orders, customers and saved carts. If the number is smaller than this because it's a brand new installation, just modify admin/includes/functions/extra_functions/preview_email.php and set PREVIEW_LOOKBACK_COUNT at the top of the file to 1.

Q: I have 1.5.4 and I'd like to use this mod! What can I do?
A: This mod depends on the newer 1.5.5 email templates, which include the email/email_common.css file. Your best route is to upgrade your cart, but if you can't do that immediately, you can make it work in 1.5.4 by making the following changes:

• Copy the contents of the /email directory from 1.5.5f.
• Modify includes/functions/functions_email.php to use the 1.5.5f version of zen_build_html_email_from_template().
• Pull the EMAIL_LOGO_* definitions from a 1.5.5f copy of includes/languages/english/email_extras.php.

---