Test
HTML-Code für "Vielen Dank für Ihre Bestellung"!
<!-- Invoice styles -->
<style type="text/css">
html,body {
min-height:100%;
margin:0;
padding:0;
}
body {
background-color:#fff;
width:210mm;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:20mm 10mm 15mm;
}
body > div {
height:100%;
}
body p:empty {
display:none;
}
body a {
text-decoration:none;
color:#000;
}
body table {
border-collapse:collapse;
border-spacing:0;
}
body .body {
height:100%;
width:130mm;
margin:0 auto;
border:1px solid transparent /*fix too large top margin for chrome 57.0.2987.133*/
}
body .body td {
vertical-align:top;
height:0;
font-family:Arial, Helvetica, "Sans Serif";
font-size:8pt;
line-height:10pt;
color:#000;
padding:0;
}
body .body td.footer {
height:100%;
text-align:center;
vertical-align:bottom;
}
body .body td.footer div {
padding:20mm 0 5pt;
}
body .body .invoice td td {
vertical-align:top;
padding:0;
}
body .body .invoice p {
margin:2pt 0;
}
body .body .invoice .store-info {
width:100%;
margin-bottom:16pt;
}
body .body .invoice .store-info .invoice-logo {
max-height:25mm;
max-width:100%;
width:auto;
display:block;
margin:0 0 5mm;
}
body .body .invoice .store-info .store-title {
font-size:10pt;
line-height:12pt;
font-weight:600;
padding:5pt 0;
}
body .body .invoice .store-info .store-main-info {
width:89mm;
padding-right:5mm;
}
body .body .invoice .store-info .store-main-info .title-detached {
margin-top:5pt;
margin-bottom:5pt;
}
body .body .invoice .store-info .store-customer-info {
vertical-align:top;
}
body .body .invoice .store-info .store-customer-info p {
max-width:60mm;
word-wrap:break-word;
}
body .body .invoice td.invoice-row,body .body .invoice .invoice-row > tr:first-child > td {
border-top:1px solid #000;
}
body .body .invoice .order-comment {
padding-bottom: 12pt;
}
body .body .invoice .order-info {
margin-bottom:11pt;
padding:0;
}
body .body .invoice .order-items {
margin-bottom:16pt;
padding:0;
}
body .body .invoice .order-info td,body .body .invoice .order-items td {
width:42mm;
padding-right:5mm;
}
body .body .invoice .order-info td:last-child,body .body .invoice .order-items td:last-child {
width:auto;
}
body .body .invoice .order-info .title,body .body .invoice .order-items .title {
font-weight:600;
padding-top:5pt;
padding-bottom:12pt;
margin:0;
}
body .body .invoice .order-info td:last-child {
padding-right:0;
}
body .body .invoice .order-info p {
max-width:42mm;
word-wrap:break-word;
}
body .body .invoice .order-info .order-comment p {
max-width: 100%;
word-break: break-all;
white-space: pre-wrap;
}
body .body .invoice .order-comment-title {
margin-bottom: 4pt;
}
body .body .invoice .order-items table tbody tr:last-child td {
padding-bottom:3pt;
}
body .body .invoice .order-items .title {
padding-bottom:5pt;
}
body .body .invoice .order-items .order-item-desc {
width:87mm;
}
body .body .invoice .order-items .order-item-count {
width:11mm;
}
body .body .invoice .order-items .order-item-count,body .body .invoice .order-items .order-item-total {
text-align:right;
padding-right:1mm;
}
body .body .invoice .order-items .order-item-total {
padding-right:2mm;
white-space: nowrap;
}
body .body .invoice .order-items .order-total td {
padding-top:1pt;
padding-bottom:1pt;
}
body .body .invoice,body .body .invoice .order-items table {
width:100%;
}
body .body .invoice td,body .body .invoice .order-items table td {
padding:0 1mm;
}
body .body .invoice .text-uppercase,body .body .invoice .order-info .title::first-letter,body .body .invoice .order-items .title::first-letter {
text-transform:uppercase;
}
body .body .invoice .text-bold,body .body .invoice .order-items .order-item-title {
font-weight:600;
}
body .body .invoice .store-info .store-main-info .url,body .body .invoice .order-info .title-detached,body .body .invoice .order-items .title-detached {
margin-bottom:5pt;
}
body .body .invoice .store-info .store-main-info p,body .body .invoice .order-items .order-item-desc p {
max-width:87mm;
word-wrap:break-word;
}
body .body .invoice .order-items .order-item-desc .order-discount-coupon {
max-width: 64mm;
}
body .body .invoice .order-items table tbody tr td,body .body .invoice .order-items .order-total tr:first-child td {
padding-top:7pt;
}
body .body .barcode {
text-align:center;
}
body .body .paragraph {
margin-bottom:5pt;
}
@media print{
* {
-webkit-print-color-adjust:exact;
}
body {
padding:0;
}
@page {
margin:20mm 0 15mm;
}
}
</style>
<!-- Invoice body markup -->
<table class="body">
<tbody>
<tr>
<td>
<table class="invoice">
<tbody>
<!-- Your company information -->
<tr>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Shipping and billing information -->
<tr>
<thead>
<tr>
<!-- Order date -->
<td ">
</td>
</tr>
</thead>
<tbody>
<tr>
<#if store.taxFreeBusiness>
<tr>
<td class="order-item-desc"></td>
<td colspan="2" style="text-align: right">${textLabels.taxFreeBusiness}</td>
</tr>
</#if>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Invoice footer -->
<tr>
<td class="footer">
<div>${textLabels.footerMessage}</div>
</td>
</tr>
<!-- Barcode -->
<tr>
<td class="barcode">
</td>
</tr>
</tbody>
</table>
Nur Bestellung
<!-- Invoice styles -->
<style type="text/css">
html,body {
min-height:100%;
margin:0;
padding:0;
}
body {
background-color:#fff;
width:210mm;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:20mm 10mm 15mm;
}
body > div {
height:100%;
}
body p:empty {
display:none;
}
body a {
text-decoration:none;
color:#000;
}
body table {
border-collapse:collapse;
border-spacing:0;
}
body .body {
height:100%;
width:130mm;
margin:0 auto;
border:1px solid transparent /*fix too large top margin for chrome 57.0.2987.133*/
}
body .body td {
vertical-align:top;
height:0;
font-family:Arial, Helvetica, "Sans Serif";
font-size:8pt;
line-height:10pt;
color:#000;
padding:0;
}
body .body td.footer {
height:100%;
text-align:center;
vertical-align:bottom;
}
body .body td.footer div {
padding:20mm 0 5pt;
}
body .body .invoice td td {
vertical-align:top;
padding:0;
}
body .body .invoice p {
margin:2pt 0;
}
body .body .invoice .store-info {
width:100%;
margin-bottom:16pt;
}
body .body .invoice .store-info .invoice-logo {
max-height:25mm;
max-width:100%;
width:auto;
display:block;
margin:0 0 5mm;
}
body .body .invoice .store-info .store-title {
font-size:10pt;
line-height:12pt;
font-weight:600;
padding:5pt 0;
}
body .body .invoice .store-info .store-main-info {
width:89mm;
padding-right:5mm;
}
body .body .invoice .store-info .store-main-info .title-detached {
margin-top:5pt;
margin-bottom:5pt;
}
body .body .invoice .store-info .store-customer-info {
vertical-align:top;
}
body .body .invoice .store-info .store-customer-info p {
max-width:60mm;
word-wrap:break-word;
}
body .body .invoice td.invoice-row,body .body .invoice .invoice-row > tr:first-child > td {
border-top:1px solid #000;
}
body .body .invoice .order-comment {
padding-bottom: 12pt;
}
body .body .invoice .order-info {
margin-bottom:11pt;
padding:0;
}
body .body .invoice .order-items {
margin-bottom:16pt;
padding:0;
}
body .body .invoice .order-info td,body .body .invoice .order-items td {
width:42mm;
padding-right:5mm;
}
body .body .invoice .order-info td:last-child,body .body .invoice .order-items td:last-child {
width:auto;
}
body .body .invoice .order-info .title,body .body .invoice .order-items .title {
font-weight:600;
padding-top:5pt;
padding-bottom:12pt;
margin:0;
}
body .body .invoice .order-info td:last-child {
padding-right:0;
}
body .body .invoice .order-info p {
max-width:42mm;
word-wrap:break-word;
}
body .body .invoice .order-info .order-comment p {
max-width: 100%;
word-break: break-all;
white-space: pre-wrap;
}
body .body .invoice .order-comment-title {
margin-bottom: 4pt;
}
body .body .invoice .order-items table tbody tr:last-child td {
padding-bottom:3pt;
}
body .body .invoice .order-items .title {
padding-bottom:5pt;
}
body .body .invoice .order-items .order-item-desc {
width:87mm;
}
body .body .invoice .order-items .order-item-count {
width:11mm;
}
body .body .invoice .order-items .order-item-count,body .body .invoice .order-items .order-item-total {
text-align:right;
padding-right:1mm;
}
body .body .invoice .order-items .order-item-total {
padding-right:2mm;
white-space: nowrap;
}
body .body .invoice .order-items .order-total td {
padding-top:1pt;
padding-bottom:1pt;
}
body .body .invoice,body .body .invoice .order-items table {
width:100%;
}
body .body .invoice td,body .body .invoice .order-items table td {
padding:0 1mm;
}
body .body .invoice .text-uppercase,body .body .invoice .order-info .title::first-letter,body .body .invoice .order-items .title::first-letter {
text-transform:uppercase;
}
body .body .invoice .text-bold,body .body .invoice .order-items .order-item-title {
font-weight:600;
}
body .body .invoice .store-info .store-main-info .url,body .body .invoice .order-info .title-detached,body .body .invoice .order-items .title-detached {
margin-bottom:5pt;
}
body .body .invoice .store-info .store-main-info p,body .body .invoice .order-items .order-item-desc p {
max-width:87mm;
word-wrap:break-word;
}
body .body .invoice .order-items .order-item-desc .order-discount-coupon {
max-width: 64mm;
}
body .body .invoice .order-items table tbody tr td,body .body .invoice .order-items .order-total tr:first-child td {
padding-top:7pt;
}
body .body .barcode {
text-align:center;
}
body .body .paragraph {
margin-bottom:5pt;
}
@media print{
* {
-webkit-print-color-adjust:exact;
}
body {
padding:0;
}
@page {
margin:20mm 0 15mm;
}
}
</style>
<!-- Shipping and billing information -->
<tr>
<td class="invoice-row">
<table class="order-info">
<thead>
<tr>
<!-- Order date -->
<td colspan="2" class="title">
<span>${order.dateCreated}, ${order.timeCreated}</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<!-- Customer shipping address -->
<#assign
showShipping = order.shippingAddress?has_content && !order.isSameShippingAndBilling && !order.isPickup
showBilling = order.billingAddress?has_content
/>
<#if showShipping>
<td>
<#if showBilling>
<p class="title-detached">${textLabels.shipTo}</p>
</#if>
<p class="text-uppercase">${order.shippingAddress.name}</p>
<p>${order.shippingAddress.companyName}</p>
<p>${order.shippingAddress.street}</p>
<p><#if order.shippingAddress.city?has_content>${order.shippingAddress.city}, </#if><#if order.shippingAddress.state?has_content>${order.shippingAddress.state}, </#if>${order.shippingAddress.postalCode}</p>
<p>${order.shippingAddress.country}</p>
<p>${order.shippingAddress.phone}</p>
<#if ! showBilling>
<#if order.customerTaxId?has_content>
<p>${textLabels.taxId} ${order.customerTaxId}</p>
</#if>
<p>${customer.email}</p>
</#if>
</td>
</#if>
<#if order.isPickup>
<td>
<p>${order.shippingAddress.name}</p>
<p>${order.shippingAddress.phone}</p>
<p>${customer.email}</p>
</td>
</#if>
<!-- Customer billing address -->
<#if showBilling>
<td>
<#if showShipping>
<p class="title-detached">${textLabels.buyer}</p>
</#if>
<p class="text-uppercase">${order.billingAddress.name}</p>
<p>${order.billingAddress.companyName}</p>
<p>${order.billingAddress.street}</p>
<p><#if order.billingAddress.city?has_content>${order.billingAddress.city}, </#if><#if order.billingAddress.state?has_content>${order.billingAddress.state}, </#if>${order.billingAddress.postalCode}</p>
<p>${order.billingAddress.country}</p>
<p>${order.billingAddress.phone}</p>
<#if order.customerTaxId?has_content>
<p>${textLabels.taxId} ${order.customerTaxId}</p>
</#if>
<p>${customer.email}</p>
</td>
</#if>
<#if ! showShipping && ! showBilling && ! order.isPickup>
<td>
<#if order.customerTaxId?has_content>
<p>${textLabels.taxId} ${order.customerTaxId}</p>
</#if>
<p>${customer.email}</p>
</td>
</#if>
<#if order.shippingMethod?has_content || order.paymentMethod?has_content>
<td>
<!-- Shipping option chosen to deliver the order -->
<#if order.shippingMethod?has_content>
<#if order.isPickup>
<p>${textLabels.pickupMethod} ${order.shippingMethod.name}</p>
<#else>
<p>${textLabels.shippingMethod} ${order.shippingMethod.name}</p>
</#if>
</#if>
<!-- Payment option that customer used to pay for the order -->
<#if order.paymentMethod?has_content>
<p>${textLabels.paymentMethod} ${order.paymentMethod.name}</p>
</#if>
</td>
</#if>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Order comments -->
<#if order.orderComments?has_content>
<tr>
<td colspan="3" class="order-comment">
<p class="order-comment-title title-detached">${textLabels.orderComments}</p>
<p class="text-bold"><#noescape>${order.orderComments}</#noescape></p>
</td>
</tr>
</#if>
<!-- Order information -->
<tr>
<td class="order-items">
<table>
<tbody class="invoice-row">
<tr>
<td colspan="3" class="title">
<!-- Order number -->
<span>${textLabels.order}<#if order.number?has_content> #${order.number}</#if></span>
</td>
</tr>
<!-- Ordered items list -->
<#list order.items as orderItem>
<tr>
<td class="order-item-desc">
<p class="order-item-title">${orderItem.name}</p>
<p>${textLabels.sku}: ${orderItem.sku}</p>
<#list orderItem.options as option>
<p>${option.name}: ${option.value}</p>
</#list>
</td>
<td class="order-item-count">
<p>${orderItem.quantity}</p>
</td>
<td class="order-item-total text-bold">
<p>${orderItem.price}</p>
</td>
</tr>
</#list>
</tbody>
<!-- Order totals -->
<tbody class="invoice-row order-total">
<!-- Order subtotal -->
<tr>
<td colspan="2" class="order-item-count">
<p>${textLabels.items}</p>
</td>
<td class="order-item-total">
<p>${order.subtotal}</p>
</td>
</tr>
<!-- Order shipping cost -->
<#if order.shippingMethod?has_content>
<tr>
<td colspan="2" class="order-item-count">
<p>${textLabels.shipping}</p>
</td>
<td class="order-item-total">
<p>${order.shippingCost}</p>
</td>
</tr>
</#if>
<!-- Order handling fee cost -->
<#if order.handlingFee?has_content>
<tr>
<td colspan="2" class="order-item-count">
<p>${order.handlingFee.name}</p>
</td>
<td class="order-item-total">
<p>${order.handlingFee.value}</p>
</td>
</tr>
</#if>
<!-- Order tax -->
<#if order.taxes?has_content>
<#list order.taxes as tax>
<tr>
<td colspan="2" class="order-item-count">
<p>${tax.name}</p>
</td>
<td class="order-item-total">
<p>${tax.value}</p>
</td>
</tr>
</#list>
</#if>
<!-- Order discounts total -->
<#if order.discounts?has_content>
<#list order.discounts as discount>
<tr>
<td colspan="2" class="order-item-count">
<p>${discount.name}</p>
</td>
<td class="order-item-total">
<p>-${discount.value}</p>
</td>
</tr>
</#list>
</#if>
<!-- Order gift card redemption -->
<#if order.giftCardRedemption?has_content>
<tr>
<td colspan="2" class="order-item-count">
<p>${order.giftCardRedemption.name}</p>
</td>
<td class="order-item-total">
<p>-${order.giftCardRedemption.value}</p>
</td>
</tr>
</#if>
<!-- Order total cost -->
<tr>
<td class="order-item-desc"></td>
<td class="order-item-count text-bold">
<p>${textLabels.total}</p>
</td>
<td class="order-item-total text-bold">
<p>${order.total}</p>
</td>
</tr>
<#if store.taxFreeBusiness>
<tr>
<td class="order-item-desc"></td>
<td colspan="2" style="text-align: right">${textLabels.taxFreeBusiness}</td>
</tr>
</#if>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Invoice footer -->
<tr>
<td class="footer">
<div>${textLabels.footerMessage}</div>
</td>
</tr>
<!-- Barcode -->
<tr>
<td class="barcode">
<img src="https://dyn4vbig664n8.cloudfront.net/code128?text=ORDER-${order.saleNumber}&format=png&zoom=2" height="50" style="max-height: 50px" alt="ORDER<#if order.number?has_content>-${order.number}</#if>" />
</td>
</tr>
</tbody>
</table>
<!-- Invoice styles -->
<style type="text/css">
html,body {
min-height:100%;
margin:0;
padding:0;
}
body {
background-color:#fff;
width:210mm;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:20mm 10mm 15mm;
}
body > div {
height:100%;
}
body p:empty {
display:none;
}
body a {
text-decoration:none;
color:#000;
}
body table {
border-collapse:collapse;
border-spacing:0;
}
body .body {
height:100%;
width:130mm;
margin:0 auto;
border:1px solid transparent /*fix too large top margin for chrome 57.0.2987.133*/
}
body .body td {
vertical-align:top;
height:0;
font-family:Arial, Helvetica, "Sans Serif";
font-size:8pt;
line-height:10pt;
color:#000;
padding:0;
}
body .body td.footer {
height:100%;
text-align:center;
vertical-align:bottom;
}
body .body td.footer div {
padding:20mm 0 5pt;
}
body .body .invoice td td {
vertical-align:top;
padding:0;
}
body .body .invoice p {
margin:2pt 0;
}
body .body .invoice .store-info {
width:100%;
margin-bottom:16pt;
}
body .body .invoice .store-info .invoice-logo {
max-height:25mm;
max-width:100%;
width:auto;
display:block;
margin:0 0 5mm;
}
body .body .invoice .store-info .store-title {
font-size:10pt;
line-height:12pt;
font-weight:600;
padding:5pt 0;
}
body .body .invoice .store-info .store-main-info {
width:89mm;
padding-right:5mm;
}
body .body .invoice .store-info .store-main-info .title-detached {
margin-top:5pt;
margin-bottom:5pt;
}
body .body .invoice .store-info .store-customer-info {
vertical-align:top;
}
body .body .invoice .store-info .store-customer-info p {
max-width:60mm;
word-wrap:break-word;
}
body .body .invoice td.invoice-row,body .body .invoice .invoice-row > tr:first-child > td {
border-top:1px solid #000;
}
body .body .invoice .order-comment {
padding-bottom: 12pt;
}
body .body .invoice .order-info {
margin-bottom:11pt;
padding:0;
}
body .body .invoice .order-items {
margin-bottom:16pt;
padding:0;
}
body .body .invoice .order-info td,body .body .invoice .order-items td {
width:42mm;
padding-right:5mm;
}
body .body .invoice .order-info td:last-child,body .body .invoice .order-items td:last-child {
width:auto;
}
body .body .invoice .order-info .title,body .body .invoice .order-items .title {
font-weight:600;
padding-top:5pt;
padding-bottom:12pt;
margin:0;
}
body .body .invoice .order-info td:last-child {
padding-right:0;
}
body .body .invoice .order-info p {
max-width:42mm;
word-wrap:break-word;
}
body .body .invoice .order-info .order-comment p {
max-width: 100%;
word-break: break-all;
white-space: pre-wrap;
}
body .body .invoice .order-comment-title {
margin-bottom: 4pt;
}
body .body .invoice .order-items table tbody tr:last-child td {
padding-bottom:3pt;
}
body .body .invoice .order-items .title {
padding-bottom:5pt;
}
body .body .invoice .order-items .order-item-desc {
width:87mm;
}
body .body .invoice .order-items .order-item-count {
width:11mm;
}
body .body .invoice .order-items .order-item-count,body .body .invoice .order-items .order-item-total {
text-align:right;
padding-right:1mm;
}
body .body .invoice .order-items .order-item-total {
padding-right:2mm;
white-space: nowrap;
}
body .body .invoice .order-items .order-total td {
padding-top:1pt;
padding-bottom:1pt;
}
body .body .invoice,body .body .invoice .order-items table {
width:100%;
}
body .body .invoice td,body .body .invoice .order-items table td {
padding:0 1mm;
}
body .body .invoice .text-uppercase,body .body .invoice .order-info .title::first-letter,body .body .invoice .order-items .title::first-letter {
text-transform:uppercase;
}
body .body .invoice .text-bold,body .body .invoice .order-items .order-item-title {
font-weight:600;
}
body .body .invoice .store-info .store-main-info .url,body .body .invoice .order-info .title-detached,body .body .invoice .order-items .title-detached {
margin-bottom:5pt;
}
body .body .invoice .store-info .store-main-info p,body .body .invoice .order-items .order-item-desc p {
max-width:87mm;
word-wrap:break-word;
}
body .body .invoice .order-items .order-item-desc .order-discount-coupon {
max-width: 64mm;
}
body .body .invoice .order-items table tbody tr td,body .body .invoice .order-items .order-total tr:first-child td {
padding-top:7pt;
}
body .body .barcode {
text-align:center;
}
body .body .paragraph {
margin-bottom:5pt;
}
@media print{
* {
-webkit-print-color-adjust:exact;
}
body {
padding:0;
}
@page {
margin:20mm 0 15mm;
}
}
</style>
<!-- Shipping and billing information -->
<tr>
<td class="invoice-row">
<table class="order-info">
<thead>
<tr>
<!-- Order date -->
<td colspan="2" class="title">
<span>${order.dateCreated}, ${order.timeCreated}</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<!-- Customer shipping address -->
<#assign
showShipping = order.shippingAddress?has_content && !order.isSameShippingAndBilling && !order.isPickup
showBilling = order.billingAddress?has_content
/>
<#if showShipping>
<td>
<#if showBilling>
<p class="title-detached">${textLabels.shipTo}</p>
</#if>
<p class="text-uppercase">${order.shippingAddress.name}</p>
<p>${order.shippingAddress.companyName}</p>
<p>${order.shippingAddress.street}</p>
<p><#if order.shippingAddress.city?has_content>${order.shippingAddress.city}, </#if><#if order.shippingAddress.state?has_content>${order.shippingAddress.state}, </#if>${order.shippingAddress.postalCode}</p>
<p>${order.shippingAddress.country}</p>
<p>${order.shippingAddress.phone}</p>
<#if ! showBilling>
<#if order.customerTaxId?has_content>
<p>${textLabels.taxId} ${order.customerTaxId}</p>
</#if>
<p>${customer.email}</p>
</#if>
</td>
</#if>
<#if order.isPickup>
<td>
<p>${order.shippingAddress.name}</p>
<p>${order.shippingAddress.phone}</p>
<p>${customer.email}</p>
</td>
</#if>
<!-- Customer billing address -->
<#if showBilling>
<td>
<#if showShipping>
<p class="title-detached">${textLabels.buyer}</p>
</#if>
<p class="text-uppercase">${order.billingAddress.name}</p>
<p>${order.billingAddress.companyName}</p>
<p>${order.billingAddress.street}</p>
<p><#if order.billingAddress.city?has_content>${order.billingAddress.city}, </#if><#if order.billingAddress.state?has_content>${order.billingAddress.state}, </#if>${order.billingAddress.postalCode}</p>
<p>${order.billingAddress.country}</p>
<p>${order.billingAddress.phone}</p>
<#if order.customerTaxId?has_content>
<p>${textLabels.taxId} ${order.customerTaxId}</p>
</#if>
<p>${customer.email}</p>
</td>
</#if>
<#if ! showShipping && ! showBilling && ! order.isPickup>
<td>
<#if order.customerTaxId?has_content>
<p>${textLabels.taxId} ${order.customerTaxId}</p>
</#if>
<p>${customer.email}</p>
</td>
</#if>
<#if order.shippingMethod?has_content || order.paymentMethod?has_content>
<td>
<!-- Shipping option chosen to deliver the order -->
<#if order.shippingMethod?has_content>
<#if order.isPickup>
<p>${textLabels.pickupMethod} ${order.shippingMethod.name}</p>
<#else>
<p>${textLabels.shippingMethod} ${order.shippingMethod.name}</p>
</#if>
</#if>
<!-- Payment option that customer used to pay for the order -->
<#if order.paymentMethod?has_content>
<p>${textLabels.paymentMethod} ${order.paymentMethod.name}</p>
</#if>
</td>
</#if>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Order comments -->
<#if order.orderComments?has_content>
<tr>
<td colspan="3" class="order-comment">
<p class="order-comment-title title-detached">${textLabels.orderComments}</p>
<p class="text-bold"><#noescape>${order.orderComments}</#noescape></p>
</td>
</tr>
</#if>
<!-- Order information -->
<tr>
<td class="order-items">
<table>
<tbody class="invoice-row">
<tr>
<td colspan="3" class="title">
<!-- Order number -->
<span>${textLabels.order}<#if order.number?has_content> #${order.number}</#if></span>
</td>
</tr>
<!-- Ordered items list -->
<#list order.items as orderItem>
<tr>
<td class="order-item-desc">
<p class="order-item-title">${orderItem.name}</p>
<p>${textLabels.sku}: ${orderItem.sku}</p>
<#list orderItem.options as option>
<p>${option.name}: ${option.value}</p>
</#list>
</td>
<td class="order-item-count">
<p>${orderItem.quantity}</p>
</td>
<td class="order-item-total text-bold">
<p>${orderItem.price}</p>
</td>
</tr>
</#list>
</tbody>
<!-- Order totals -->
<tbody class="invoice-row order-total">
<!-- Order subtotal -->
<tr>
<td colspan="2" class="order-item-count">
<p>${textLabels.items}</p>
</td>
<td class="order-item-total">
<p>${order.subtotal}</p>
</td>
</tr>
<!-- Order shipping cost -->
<#if order.shippingMethod?has_content>
<tr>
<td colspan="2" class="order-item-count">
<p>${textLabels.shipping}</p>
</td>
<td class="order-item-total">
<p>${order.shippingCost}</p>
</td>
</tr>
</#if>
<!-- Order handling fee cost -->
<#if order.handlingFee?has_content>
<tr>
<td colspan="2" class="order-item-count">
<p>${order.handlingFee.name}</p>
</td>
<td class="order-item-total">
<p>${order.handlingFee.value}</p>
</td>
</tr>
</#if>
<!-- Order tax -->
<#if order.taxes?has_content>
<#list order.taxes as tax>
<tr>
<td colspan="2" class="order-item-count">
<p>${tax.name}</p>
</td>
<td class="order-item-total">
<p>${tax.value}</p>
</td>
</tr>
</#list>
</#if>
<!-- Order discounts total -->
<#if order.discounts?has_content>
<#list order.discounts as discount>
<tr>
<td colspan="2" class="order-item-count">
<p>${discount.name}</p>
</td>
<td class="order-item-total">
<p>-${discount.value}</p>
</td>
</tr>
</#list>
</#if>
<!-- Order gift card redemption -->
<#if order.giftCardRedemption?has_content>
<tr>
<td colspan="2" class="order-item-count">
<p>${order.giftCardRedemption.name}</p>
</td>
<td class="order-item-total">
<p>-${order.giftCardRedemption.value}</p>
</td>
</tr>
</#if>
<!-- Order total cost -->
<tr>
<td class="order-item-desc"></td>
<td class="order-item-count text-bold">
<p>${textLabels.total}</p>
</td>
<td class="order-item-total text-bold">
<p>${order.total}</p>
</td>
</tr>
<#if store.taxFreeBusiness>
<tr>
<td class="order-item-desc"></td>
<td colspan="2" style="text-align: right">${textLabels.taxFreeBusiness}</td>
</tr>
</#if>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Invoice footer -->
<tr>
<td class="footer">
<div>${textLabels.footerMessage}</div>
</td>
</tr>
<!-- Barcode -->
<tr>
<td class="barcode">
<img src="https://dyn4vbig664n8.cloudfront.net/code128?text=ORDER-${order.saleNumber}&format=png&zoom=2" height="50" style="max-height: 50px" alt="ORDER<#if order.number?has_content>-${order.number}</#if>" />
</td>
</tr>
</tbody>
</table>
