Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Request: magento to convert CSS to inline CSS for transactional emails option
 
seansan
Member
 
Total Posts:  62
Joined:  2010-01-27
 

Request: magento to convert CSS to inline CSS for transactional emails option

Transactional e-mails contain CSS but many mail clients strip the CSS. Would be great to define it per style sheet (thus keeping it clean) and utilizing an option to convert to inline when sending

 
Magento Community Magento Community
Magento Community
Magento Community
 
rbuczynski
Jr. Member
 
Avatar
Total Posts:  6
Joined:  2012-07-10
 

I don’t mean to revive a dead thread, but I have a pointer for this request.

You can look into extending the Mage_Core_Model_Email_Template::getPreparedTemplateText() method. It’s here that the CSS is prepended to the e-mail template. So you can modify this method to parse the stylesheet content and inject it into the HTML string.

I’m working on this currently, and will post the solution once it’s working.

 
Magento Community Magento Community
Magento Community
Magento Community
 
rbuczynski
Jr. Member
 
Avatar
Total Posts:  6
Joined:  2012-07-10
 

So I have a pretty good `rough-in` built for you.

Essentially, I’m extending Mage_Core_Model_Email_Template::getPreparedTemplateText() to work with `template_text` and `template_styles.` First, I convert the raw stylesheet into an associate array indexed by tag name (these become our CSS selectors). I then take advantage of the DOMDocument extension to convert the raw template text into a DOMDocument object.

By traversing the prepared stylesheet array, I’m able to make calls to DOMDocument::getElementsByTagName(SELECTOR) and DOMDocument::setAttribute() to fold CSS into the elements. Then, we can dump the finished template back out with DOMDocument->saveHTML().

I’ve attached the source code for you to have a look.

At present, the attached helper method getCssObject() doesn’t support the full gamut of CSS selectors. Only element selection is possible (TD, P, A, BODY, etc.), but I feel that global rules are sufficient. If you need to target one specific element, you can just code the inline CSS yourself in the template.

Hope this helps!

File Attachments
trans-email-inline-css.zip  (File Size: 3KB - Downloads: 46)
 
Magento Community Magento Community
Magento Community
Magento Community
 
rbuczynski
Jr. Member
 
Avatar
Total Posts:  6
Joined:  2012-07-10
 

UPDATE

After more testing, I found that overriding getPreparedTemplateText() is not the best way to inject inline CSS. Injection fails with layout and block directives, because they are not rendered by the time this method is called.

So, I found it best to perform injection by overriding Mage_Core_Model_Email_Template::send(). This is the final stage of transactional e-mail template processing. Using the same code sample provided in the attachment above, you can easily perform your inject here for better results.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top