Common Email Styling [Support Thread]

**lloyd_borrett** · 19 Sep 2015, 07:35 PM

G'day,

This plugin comes out of customisation work lat9 has been doing for me on the online dive shop at https://www.scubadoctor.com.au/diveshop/

We've gone through and totally revised all of the site's email content plus made mods to do things like: include social media icons, and highlight 'non-standard' details of orders in the admin emails to help improve back-end workflow.

We're just about to finalise making access to a tax invoice that meets Australian Tax Office requirements available to customers via the Order Confirmation email. (It's already working from the Order Information page.)

Plus the emails now pass HTML validation, which helps with displaying them in some email readers.

Best regards, Lloyd Borrett.

**lat9** · 20 Sep 2015, 06:01 PM

v1.0.0 of the plugin is now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2028

Please note that this plugin simply

moves all CSS styling to a (later in-lined) CSS file
moves the specification of the logo's file information to a common language file
adds an HTML id= tag to each template's <body> tag
adds a <meta> viewport tag to each template's <head> section

Some of the other changes that Lloyd refers to, like the emails now passing HTML validation, are specific to his site's customizations.

**dw08gm** · 21 Sep 2015, 09:08 AM

My mouse blows bubbles on your site. Very cool. Glen Iris.

Originally Posted by lloyd_borrett

This plugin comes out of customisation work lat9 has been doing for me on the online dive shop at https://www.scubadoctor.com.au/diveshop/

**DivaVocals** · 28 Sep 2015, 02:18 AM

Originally Posted by lat9

v1.0.0 of the plugin is now available for download: https://www.zen-cart.com/downloads.php?do=file&id=2028

Please note that this plugin simply

moves all CSS styling to a (later in-lined) CSS file
moves the specification of the logo's file information to a common language file
adds an HTML id= tag to each template's <body> tag
adds a <meta> viewport tag to each template's <head> section

Some of the other changes that Lloyd refers to, like the emails now passing HTML validation, are specific to his site's customizations.

You rock!!!

**DivaVocals** · 29 Sep 2015, 06:13 AM

Years ago, I took the time to update all 13 email templates so that they were all consistent in look/feel.. Today I took those same changes and applied them to ONE FILE, and got treated to INSTANT gratification applied to ALL 13 email templates.. (all without spilling a drop of my delicious wine

)

Thanks lat9 for an AWESOME module!!

One question.. One thing I could never quite figure out is how to add the store address and/or phone/fax from the store's configuration information just below the logo. Any hints on how to do this??

**lat9** · 29 Sep 2015, 12:23 PM

Thanks, Diva. That was exactly the problem that was solved by this plugin. Lloyd (@lloyd_borrett) had tasked me with getting the same look-and-feel in all the emails sent by his shop and I could see myself applying each incremental change to 13 email templates (not my idea of a fun time). Pulling the CSS out to a separate file allowed me, like you, to make those incremental changes in one place!

One way to add extra header information (I'll note the change request in the plugin's GitHub repository) would be to update each of the templates adding the highlighted element to the email's logo area:

Code:

      <!-- Header Section -->
      <div class="header">
        <img src="$EMAIL_LOGO_FILE" alt="$EMAIL_LOGO_ALT_TEXT" title="$EMAIL_LOGO_ALT_TEXT" width="$EMAIL_LOGO_WIDTH" height="$EMAIL_LOGO_HEIGHT" border="0" />
         $EXTRA_HEADER_INFO
      </div>

Then, update the files /YOUR_ADMIN/includes/languages/english/email_extras.php and /includes/languages/english/YOUR_TEMPLATE/email_extras.php, adding:

Code:

  define ('EMAIL_LOGO_FILENAME', 'header.jpg');  //-File is present in /email folder
  define ('EMAIL_LOGO_WIDTH', '550');
  define ('EMAIL_LOGO_HEIGHT', '110');
  define ('EMAIL_LOGO_ALT_TITLE_TEXT', 'Zen Cart! The Art of E-commerce');
  define ('EMAIL_EXTRA_HEADER_INFO', '<div>Extra stuff for header</div>');

Finally, update the zen_mail function to pull that information in to all email templates:

Code:

    if (!isset ($block['EMAIL_LOGO_ALT_TEXT']) || $block['EMAIL_LOGO_ALT_TEXT'] == '') $block['EMAIL_LOGO_ALT_TEXT'] = EMAIL_LOGO_ALT_TITLE_TEXT;
    if (!isset ($block['EMAIL_LOGO_WIDTH']) || $block['EMAIL_LOGO_WIDTH'] == '') $block['EMAIL_LOGO_WIDTH'] = EMAIL_LOGO_WIDTH;
    if (!isset ($block['EMAIL_LOGO_HEIGHT']) || $block['EMAIL_LOGO_HEIGHT'] == '') $block['EMAIL_LOGO_HEIGHT'] = EMAIL_LOGO_HEIGHT;
    if (!isset ($block['EXTRA_HEADER_INFO']) || $block['EXTRA_HEADER_INFO'] == '') $block['EXTRA_HEADER_INFO'] = EMAIL_EXTRA_HEADER_INFO;

**badarac** · 29 Sep 2015, 12:37 PM

Joy fills the world and happiness abounds! Thanks Lat, you rock!!!

**countrycharm** · 30 Sep 2015, 02:28 AM

Will this work on zen cart v1.5.1?

**lat9** · 30 Sep 2015, 02:52 PM

Originally Posted by countrycharm

Will this work on zen cart v1.5.1?

Yes, but you'll need to merge the core-file changes to /includes/functions/functions_email.php (the plugin uses ZC 1.5.4 as its basis for any core-file modifications, and there were significant changes in functions_email.php between v1.5.1 and 1.5.4).

**DivaVocals** · 30 Sep 2015, 08:02 PM

Originally Posted by lat9

Thanks, Diva. That was exactly the problem that was solved by this plugin. Lloyd (@lloyd_borrett) had tasked me with getting the same look-and-feel in all the emails sent by his shop and I could see myself applying each incremental change to 13 email templates (not my idea of a fun time). Pulling the CSS out to a separate file allowed me, like you, to make those incremental changes in one place!

No it was NO fun.. which is why I saved the work I had done to reuse for other clients.. This was LOADS easier!!!

Originally Posted by lat9

One way to add extra header information (I'll note the change request in the plugin's GitHub repository) would be to update each of the templates adding the highlighted element to the email's logo area:

Code:

      <!-- Header Section -->
      <div class="header">
        <img src="$EMAIL_LOGO_FILE" alt="$EMAIL_LOGO_ALT_TEXT" title="$EMAIL_LOGO_ALT_TEXT" width="$EMAIL_LOGO_WIDTH" height="$EMAIL_LOGO_HEIGHT" border="0" />
         $EXTRA_HEADER_INFO
      </div>

Then, update the files /YOUR_ADMIN/includes/languages/english/email_extras.php and /includes/languages/english/YOUR_TEMPLATE/email_extras.php, adding:

Code:

  define ('EMAIL_LOGO_FILENAME', 'header.jpg');  //-File is present in /email folder
  define ('EMAIL_LOGO_WIDTH', '550');
  define ('EMAIL_LOGO_HEIGHT', '110');
  define ('EMAIL_LOGO_ALT_TITLE_TEXT', 'Zen Cart! The Art of E-commerce');
  define ('EMAIL_EXTRA_HEADER_INFO', '<div>Extra stuff for header</div>');

Finally, update the zen_mail function to pull that information in to all email templates:

Code:

    if (!isset ($block['EMAIL_LOGO_ALT_TEXT']) || $block['EMAIL_LOGO_ALT_TEXT'] == '') $block['EMAIL_LOGO_ALT_TEXT'] = EMAIL_LOGO_ALT_TITLE_TEXT;
    if (!isset ($block['EMAIL_LOGO_WIDTH']) || $block['EMAIL_LOGO_WIDTH'] == '') $block['EMAIL_LOGO_WIDTH'] = EMAIL_LOGO_WIDTH;
    if (!isset ($block['EMAIL_LOGO_HEIGHT']) || $block['EMAIL_LOGO_HEIGHT'] == '') $block['EMAIL_LOGO_HEIGHT'] = EMAIL_LOGO_HEIGHT;
    if (!isset ($block['EXTRA_HEADER_INFO']) || $block['EXTRA_HEADER_INFO'] == '') $block['EXTRA_HEADER_INFO'] = EMAIL_EXTRA_HEADER_INFO;

Outstanding.. Will apply these changes.. Thanks again!! You are the best!!!

Thread: Common Email Styling [Support Thread]

Thread Tools

Search Thread

Display

Re: Common Email Styling [Support Thread]

Re: Common Email Styling [Support Thread]

Re: Common Email Styling [Support Thread]

Re: Common Email Styling [Support Thread]

Re: Common Email Styling [Support Thread]

Re: Common Email Styling [Support Thread]

Re: Common Email Styling [Support Thread]

Re: Common Email Styling [Support Thread]

Re: Common Email Styling [Support Thread]

Re: Common Email Styling [Support Thread]

Similar Threads

Hebrew Support - latest release [Support Thread]

v150 Product Images on Invoice, Email, etc [Support Thread]

v154 Developer Override Email Address [Support Thread]

v154 Email Downloads Support Thread

PurpleShades Support Thread

Bookmarks

Bookmarks

Posting Permissions