Zen Cart Preview Email
The Preview Email mod allows you to easily test styling changes to Zen Cart HTML emails.Donate: This is free software. Show your appreciation by supporting my efforts.
Relevance: Zen Cart™ 1.5.5-1.5.7, 1.5.8+
Current Version: 2.1 (version history)
Support Thread: Preview Email Support Thread
Cost: Free, but donation appreciated
Installed Cost: $100.00 Buy Professional Installation by That Software Guy
Installation Difficulty: Easy, but actually improving your emails requires CSS skills.
Installation Instructions: click here for installation instructions
Common Installation Issues: click here for installation issues
Location: Zen Cart Plugins, under Admin Tools
Download: Preview Email in Zen Cart Plugins
FAQ: click here for FAQ
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 calleddirect_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:
- Back up everything! Try this in a test environment prior to installing it on a live shop.
- Copy the contents of the unzipped folder to the root directory of your shop.
- Run the preview_email.sql file against your database, using Admin > Tools > Install SQL Patches.
- 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:
- 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
- Back In Stock emails:
Both
Ceon Back In Stock Notification and
Ajax Back In Stock are supported.
- 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
toincludes/languages/english/recover_cart_sales.php
.
Then, replace the contents ofadmin/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';
- 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. - 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
Resources on Zen Cart Email
Major Versions
- 2.1 07/07/2024 - Handle storefront language file overrides.
- 2.0 07/03/2024 - Updates for Zen Cart 1.5.8+.
- 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 ofzen_build_html_email_from_template()
. - Pull the EMAIL_LOGO_* definitions from a 1.5.5f copy of
includes/languages/english/email_extras.php
.