email

Customising Transactional Emails in Magento

delboy1978uk, , , , , Leave a comment

I’m still quite fresh with Magento, and today I’ve been tasked with updating the transactional emails with our rebranded design. The Magento docs for this are located here: http://devdocs.magento.com/guides/m1x/ce19-ee114/RWD_responsive_emails.html

The default transactional email templates are stored in app/locale/en_US/template/email/. You can edit these files directly, but I wouldn’t recommend it. The better way to do this is to override these templates, there are two ways of doing so.

First way: you can copy the app/locale/en_US/template/email/ into app/locale/en_GB/template/email/ the Magento Admin Panel. Doing so (this is providing your site is GB) means that the GB files will override the US ones. It also means you can have completely different templates for each locale.

However, you can alter each locales template through the admin panel too, and instead of using files, it pulls the override templates from the database.

To do this, log in to the Admin section, and go to System -> Transactional Emails. Click on add new template. Select one of the existing templates, and select the locale you wish to work with. Then click Load Template. The code will appear below. Give the new template a name, and start editing it! When you hit save, it goes into the DB. If you look you will see that the template file han’t been altered.

In the templates, there are placeholders such as

{{var logo_url}}

etc, some of these settings can be found in Configuration > General > Design > Transactional Emails

Transactional Emails Design Settings
Transactional Emails Design Settings

Css (or SASS) is kept in /skin/frontend/PACKAGE/THEME/scss/

Ok, so now I have about 40 emails to design, so I best be on with it! Catch you later! 😀

Consistent HTML Emails for Outlook compatibility

delboy1978uk, , , , Leave a comment

If you’ve ever had to send out emails to a marketing list or what have you, no doubt you’ve lost hair, pulling it out, and lost enamel grinding your teeth thanks to the worlds worst browser provider – Microsoft.

You should always remember the following:

  • Use old fashioned tables, not divs, for laying stuff out
  • dont include css, always use style=”whatever”
  • set cellspacing and cellpadding to 0
  • border=”0″ on your images with links
  • Use tables within tables, make your main table have one <td> in a row
  • if you are using colspan read the previous point
  • style your <a> tags or they’ll be that stinking default blue
  • following worldwide recognised and established coding standards will break outlook
  • Padding will screw up Outlook

The last point is the main reason IE etc is the worst, I have no idea why 13 or more years down the line they still cant get this right!
Padding for some stupid reason gets added to the outside of our box model rather than the inside. The best way to get round this? Shove a div inside whichever <td> you are in. Padding that will still screw up, so use margin instead.

If anyone else has any tips to spare the innocent developers from the Wrath of Gates, feel free to drop a comment!

And now for a short rant:

MICROSOFT SORT YOUR SH*T OUT! WE’VE PUT UP WITH THIS LONG ENOUGH!
If you work for Microsoft, I hate you. Unless you convince whoever THE F*CK programs IE and Outlook to follow this link:

http://www.w3.org/TR/1999/REC-html401-19991224/

WRITTEN IN 1999 !!!!!!!!!!!!!!!!!