The following sample shows split shipping customizations you might make to the html_body.ftl file for the Order Placed email template. Order Placed emails let customers know that an order has been submitted for fulfillment. The html_body.ftl file is the FreeMarker template file that configures the HTML body of the email.
IMPORTANT: This sample code is not production ready and should be used for informational purposes only. It has not been tested for accessibility, internationalization, or unexpected path flows.
The default html_body.ftl file for the Order Placed email displays the shipping address, shipping method, payment methods, and a cart summary for an order. This sample uses the macro directive to allow the email body to display multiple shipping addresses, along with their associated shipping methods and cart summaries. (A FreeMarker macro is a template fragment associated with a variable.)
The following macro is used to display the appropriate shipping method.
<#macro displayShippingMethodMacro shippingMethod >
<table width="186" align="right" border="0"
cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td>
<!-- start of text content table -->
<table width="186" align="center" border="0"
cellpadding="0" cellspacing="0"
class="devicewidthinner">
<tbody>
<!-- title -->
<tr>
<td
style="font-family: Helvetica, arial, sans-serif;
font-size: 18px; color: #666666; text-align: center;
line-height: 24px;"
st-title="3col-title3">
${getString("ORDER_PLACED_SHIPPING_METHODS_TITLE")}
</td>
</tr>
<!-- end of title -->
<!-- Spacing -->
<tr>
<td width="100%" height="15"
style="font-size: 1px; line-height: 1px; mso-line-height-rule:
exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- content -->
<tr>
<td
style="font-family: Helvetica, arial, sans-serif;
font-size: 14px; color: #687078; text-align: center;
line-height: 24px;"
st-content="3col-content3">
${shippingMethod!}<br />
</td>
</tr>
<!-- end of content -->
</tbody>
</table>
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
</#macro>The following macro is used to display the cart summary for each shipping group.
<#macro displayShippingItems shippingItems>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"
class="devicewidthinner">
<tbody>
<tr>
<td width="30%"
style="font-family: Helvetica, arial, sans-serif;
font-size: 18px; color: #FFFFFF; text-align: left;
line-height: 24px; background: #1c73a3;
padding: 5px 10px 5px 10px;"
st-title="3col-title1">
${getString("ORDER_PLACED_ITEM_TITLE")}
</td>
<td width="40%"
style="font-family: Helvetica, arial, sans-serif; font-size: 18px;
color: #ffffff; text-align: center; line-height: 24px;
background: #1c73a3; padding: 5px 10px 5px 10px;"
st-title="3col-title1"> </td>
<td width="10%"
style="font-family: Helvetica, arial, sans-serif; font-size: 18px;
color: #ffffff; text-align: center; line-height: 24px;
background: #1c73a3; padding: 5px 10px 5px 10px;"
st-title="3col-title1">
${getString("ORDER_PLACED_QUANTITY_TITLE")}
</td>
<td width="20%"
style="font-family: Helvetica, arial, sans-serif; font-size: 18px;
color: #ffffff; text-align: right; line-height: 24px;
background: #1c73a3; padding: 5px 10px 5px 10px;"
st-title="3col-title1">
${getString("ORDER_PLACED_PRICE_TITLE")}
</td>
</tr>
<#list shippingItems as product>
<tr>
<td
style="font-family: Helvetica, arial, sans-serif; font-size: 14px;
color: #687078; text-align: left; line-height: 24px;
padding: 5px 10px 5px 10px;"
st-content="3col-content1" width="30%">
<img src="${product.imageLocation}"
alt="${product.title!}" width="50%">
</td>
<td
style="font-family: Helvetica, arial, sans-serif; font-size: 14px;
color: #687078; text-align: left; line-height: 24px;
padding: 5px 10px 5px 10px;"
st-content="3col-content1" width="40%">
<a href="${product.location}">${product.title!}</a>
<!-- Variants -->
<#if product.variants??>
<br />
<#list product.variants as variant>
${variant.optionName}: <#if variant.optionValue??>
${variant.optionValue}</#if>
<br />
</#list>
</#if>
</td>
<td
style="font-family: Helvetica, arial, sans-serif; font-size: 14px;
color: #687078; text-align: center; line-height: 24px;
padding: 5px 10px 5px 10px;"
st-content="3col-content1" width="10%">
${product.quantity}</td>
<td
style="font-family: Helvetica, arial, sans-serif; font-size: 14px;
color: #687078; text-align: right; line-height: 24px;
padding: 5px 10px 5px 10px;"
st-content="3col-content1" width="20%">
${product.price}</td>
</tr>
</#list>
</tbody>
</table>
</#macro>The following macro is used to display a shipping group’s shipping method.
<#macro displayShippingMethodMacro shippingMethod >
<table width="186" align="right" border="0"
cellpadding="0" cellspacing="0" class="devicewidth">
<tbody>
<tr>
<td>
<!-- start of text content table -->
<table width="186" align="center" border="0"
cellpadding="0" cellspacing="0"
class="devicewidthinner">
<tbody>
<!-- title -->
<tr>
<td
style="font-family: Helvetica, arial, sans-serif;
font-size: 18px; color: #666666; text-align: center;
line-height: 24px;"
st-title="3col-title3">
${getString("ORDER_PLACED_SHIPPING_METHODS_TITLE")}
</td>
</tr>
<!-- end of title -->
<!-- Spacing -->
<tr>
<td width="100%" height="15"
style="font-size: 1px; line-height: 1px;
mso-line-height-rule: exactly;"> </td>
</tr>
<!-- Spacing -->
<!-- content -->
<tr>
<td
style="font-family: Helvetica, arial, sans-serif;
font-size: 14px; color: #687078; text-align: center;
line-height: 24px;"
st-content="3col-content3">
${shippingMethod!}<br />
</td>
</tr>
<!-- end of content -->
</tbody>
</table>
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
</#macro>The following macros are used to display a single shipping group or multiple shipping groups.
<#macro displayShippingGroupMacro shippingGroup> <!-- 3 Start of Columns --> <table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable"> <tbody> <tr> <td> <@displayShippingAddressMacro shippingAddress=shippingGroup.shippingAddress /> </td> <td> <@displayShippingMethodMacro shippingMethod=shippingGroup.shippingMethod /> </td> </tr> <tr> <td colspan="2"> <@displayShippingItems shippingItems=shippingGroup.shippingItems /> </td> </tr> </tbody> </table> </#macro> <#macro displayMultipleShippingGroupsMacro shippingAddresses > <div>Calling details </div> <#list shippingAddresses as currShippingGroup> <@displayShippingGroupMacro shippingGroup=currShippingGroup /> </#list> </#macro>
The following code calls displayMultipleShippingGroupsMacro to display the order details for multiple shipping groups if the order includes them.
<div> Multi shipping methods</div> <#if data.shippingGroups??> <@displayMultipleShippingGroupsMacro shippingAddresses=data.shippingGroups /> </#if>
