Skip to content
Snippets Groups Projects
Commit 478f7e22 authored by Nimesh Jethva's avatar Nimesh Jethva Committed by Thibault Delavallée
Browse files

[IMP] website_sale: make templates more modern and updated with Odoo guidelines 

In this commit we improve templates used in website_sale. Purpose of this commit
is to have templates that embed or use standard Odoo email layouts to make
them look modern and have a common style across all emails.

Main guidelines

 * better use of div / p / br to try to lessen layout issues, especially
   when updating templates using the editor;
 * correctly sequence the templates fields definition;
 * correctly set templates values notably auto_delete and user_signature
   fields to avoid confusion;
 * correctly layout the email content using light notification email. It
   can either propagate the layout choice through various send mail methods
   or directly embed the styling in the templates for more technical or
   complex templates;
 * use email_formatted computed field when possible to avoid having hand-made
   from / to addresses;
 * fix various typos and improve subjects when necessary;

Content of emails is not necessarily updated as the purpose of this task is
about styling, not content itself.

This commit is linked to task ID 1843171 (and 1868112) and to PR #25293
(and #25889).
parent 03142cbb
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
addons/website_sale/data/mail_template_data.xml
+ 97
− 31
View file @ 478f7e22
......@@ -2,44 +2,110 @@
<odoo>
<data noupdate="1">
<record id="mail_template_sale_cart_recovery" model="mail.template">
<field name="name">eCommerce: Cart Recovery Email</field>
<field name="name">Sale Order: Cart Recovery Email</field>
<field name="model_id" ref="sale.model_sale_order"/>
<field name="subject">You left items in your cart!</field>
<field name="email_from">${(object.user_id.email or '')|safe}</field>
<field name="subject">You left items in your cart.</field>
<field name="partner_to">${object.partner_id.id}</field>
<field name="model_id" ref="sale.model_sale_order"/>
<field name="auto_delete" eval="True"/>
<field name="lang">${object.partner_id.lang}</field>
<field name="body_html" type="xml">
<div style="margin:auto;width:100%;">
<img src="/web/image/res.company/${user.company_id.id}/logo" style="height: auto; width: 80px; margin-top:30px;" alt="${user.company_id.name}"/>
<table border="0" cellpadding="0" cellspacing="0" style="padding-top: 16px; background-color: #F1F1F1; font-family:Verdana, Arial,sans-serif; color: #454748; width: 100%; border-collapse:separate;"><tr><td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="padding: 16px; background-color: white; color: #454748; border-collapse:separate;">
<tbody>
<!-- HEADER -->
<tr>
<td align="center" style="min-width: 590px;">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
<tr><td valign="middle">
% set company = object.company_id or object.user_id.company_id or user.company_id
<span style="font-size: 10px;">Your Cart</span><br/>
<span style="font-size: 20px; font-weight: bold;">
${object.name}
</span>
</td><td valign="middle" align="right">
<img src="/logo.png?company=${company.id}" style="padding: 0px; margin: 0px; height: auto; width: 80px;" alt="${company.name}"/>
</td></tr>
<tr><td colspan="2" style="text-align:center;">
<hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin:16px 0px 16px 0px;"/>
</td></tr>
</table>
</td>
</tr>
<!-- CONTENT -->
<tr>
<td align="center" style="min-width: 590px;">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
<tr><td valign="top" style="font-size: 13px;">
<h1 style="color:#A9A9A9;">THERE'S SOMETHING IN YOUR CART.</h1>
<p>Would you like to complete your purchase?</p><br/><br/>
Would you like to complete your purchase?<br/><br/>
% if object.order_line:
% for line in object.order_line:
<hr/>
<table width="100%">
<tr>
<td style="padding: 10px; width:150px;">
<img src="/web/image/product.product/${line.product_id.id}/image" height="100px" width="100px" alt="Product image"></img>
</td>
<td>
<strong>${line.product_id.display_name}</strong><br/>${line.name}
</td>
<td width="100px" align="right">
${(line.product_uom_qty) | int} ${(line.product_uom.name)}
</td>
</tr>
</table>
% endfor
<hr/>
% for line in object.order_line:
<hr/>
<table width="100%">
<tr>
<td style="padding: 10px; width:150px;">
<img src="/web/image/product.product/${line.product_id.id}/image" height="100px" width="100px" alt="Product image"></img>
</td>
<td>
<strong>${line.product_id.display_name}</strong><br/>${line.name}
</td>
<td width="100px" align="right">
${(line.product_uom_qty) | int} ${(line.product_uom.name)}
</td>
</tr>
</table>
% endfor
<hr/>
% endif
<br/><br/>
<center>
<a href="/shop/cart?access_token=${object.access_token}" target="_blank" style="background-color: #1abc9c; padding: 20px; text-decoration: none; color: #fff; border-radius: 5px; font-size: 16px;" class="o_default_snippet_text">Resume order</a><br/><br/><br/>
<p><b>Thank you for shopping with ${user.company_id.name}!</b></p>
</center>
</div>
<div style="text-align: center; margin: 16px 0px 16px 0px; font-size: 14px;">
<a href="/shop/cart?access_token=${object.access_token}"
target="_blank"
style="background-color: #875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:13px;">
Resume order
</a>
</div>
<div style="text-align: center;"><strong>Thank you for shopping with ${user.company_id.name}!</strong></div>
</td></tr>
<tr><td style="text-align:center;">
<hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;"/>
</td></tr>
</table>
</td>
</tr>
<!-- FOOTER -->
<tr>
<td align="center" style="min-width: 590px;">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; font-size: 11px; padding: 0px 8px 0px 8px; border-collapse:separate;">
<tr><td valign="middle" align="left">
${company.name}
</td></tr>
<tr><td valign="middle" align="left" style="opacity: 0.7;">
${company.phone}
% if company.email
| <a href="'mailto:%s' % ${company.email}" style="text-decoration:none; color: #454748;">${company.email}</a>
% endif
% if company.website
| <a href="'%s' % ${company.website}" style="text-decoration:none; color: #454748;">${company.website}</a>
% endif
</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</td></tr>
<!-- POWERED BY -->
<tr><td align="center" style="min-width: 590px;">
<table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: #F1F1F1; color: #454748; padding: 8px; border-collapse:separate;">
<tr><td style="text-align: center; font-size: 13px;">
Powered by <a target="_blank" href="https://www.odoo.com" style="color: #875A7B;">Odoo</a>
</td></tr>
</table>
</td></tr>
</table>
</field>
<field name="lang">${object.partner_id.lang}</field>
<field name="auto_delete" eval="False"/>
<field name="user_signature" eval="False"/>
</record>
</data>
</odoo>
addons/website_sale/models/sale_order.py
+ 1
− 1
View file @ 478f7e22
......@@ -231,7 +231,7 @@ class SaleOrder(models.Model):
'view_id': composer_form_view_id,
'target': 'new',
'context': {
'default_composition_mode': 'mass_mail' if len(self) > 1 else 'comment',
'default_composition_mode': 'mass_mail',
'default_res_id': self.ids[0],
'default_model': 'sale.order',
'default_use_template': bool(template_id),
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment