Zen Cart custom software development, Zen Cart modules, Zen Cart Expert eCommerce Websites with Zen Cart!

Zen Cart Preview Email

Zen Cart Preview Email

The Preview Email mod allows you to see the largest files in your Zen Cart installation.

Donate: This is free software. Show your appreciation by supporting my efforts. Donate

Relevance: Zen Cart™ 1.5.5 and above

Current Version: 1.0

Availability: Coming soon!

Support Thread: Preview Email Support Thread

Cost: Free, but donation appreciated

Installed Cost: $60.00 Buy Professional Installation by That Software Guy

Installation Difficulty: Easy, but actually improving your emails requires web skills.

Installation Instructions: click here

Common Installation Issues: click here

Location: Zen Cart Plugins, under Admin Tools

Download: Preview Email in Zen Cart Plugins

FAQ: click here


Overview:

Zen Cart provides HTML formatted emails for a variety of situations - but you have to create your own CSS. This can be time consuming to develop and test. 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 order data from 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.

Preview Email in Zen Cart Admin - Before

Zen Cart Preview Email

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

Zen Cart Preview Email 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 a bit too wide also. Tighten those up to 520px, and things look better.

Preview Email in Zen Cart Admin - Phase 3

Zen Cart Preview Email 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

Zen Cart Preview Email on Phone - before

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

Zen Cart Preview Email on Phone - after

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.
At this time, the following emails are supported:

Common Installation Issues:

  1. Making Abandoned Cart emails work:
    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"); 
    
  2. 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.

Resources on Zen Cart Email


Major Versions

  • 1.0 11/01/2018 - First Release

FAQ

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.