Invoice Templates

Aurora allows one or more order invoices to be viewed by either selecting orders on the All Orders page and selecting the Print Invoices action or by clicking the Print Invoice button on the Order Details page.

Aurora uses a private parent template to collate multiple invoices which will load an order invoice template for each selected order and a common CSS resource from the client template location.

Template Locations

Aurora will search for templates for each order with the following priority:

📘

Order Sources are managed internally by Aurora and used for the purpose of grouping different payment types from a common source. For example multiple orders might have a source of "anantwine" or "channeladvisor" and payment types of "ebay", "amazon" and "zalando".

Please see the relevant integration documentation for further information about what order sources are used respectively.

Order sources can also be set using the Aurora Order API.

CSS Resource Location

Aurora will automatically source the following CSS resource within the parent template:
<template directory>/_css/invoice.css

PDF Invoices

Aurora allows invoices to be rendered in either HTML (default) or PDF formats. When Aurora is configured to use PDF invoices, invoices are generated in HTML and then automatically converted to PDF using an external PDF rendering component. This component supports the following features:

• Handles most CSS 2.1 and a few CSS3 properties, including @import, @media & @page rules
• Supports most presentational HTML 4.0 attributes
• Supports external stylesheets, either local or through http/ftp
• Supports complex tables, including row & column spans, separate & collapsed border models, individual cell styling
• Image support (gif, png (8, 24 and 32 bit with alpha channel), bmp & jpeg)
• Basic SVG support

The following limitations and issues have been observed and should be avoided:

• The PDF rendering component is not particularly tolerant of poorly-formed HTML input. To avoid any unexpected rendering issues you should run your HTML through a HTML validator/cleaner (such as the W3C Markup Validation Service).
• Large files or large tables can take a while to render.
• CSS float is in development and may not produce the desired result.
• CSS multiple selector definitions are not supported i.e.
  td, th { color: grey }
  should be:
  td { color: grey } 
  th { color: grey } 
• CSS relative width and height definitions (i.e. 20%) do not render as expected

📘

Enable PDF invoice rendering with: Store > Settings > Aurora > Orders > Use PDF order invoices

Resource Root URL

When building invoice templates to be rendered as PDF, it's very important to use the $root_url Smarty variable, so that these resources can be absolutely requested by the PDF rendering component i.e.

<img src="{$root_url}/templates/{$templates_dir}/_images/logos/logo.png" alt="Brand" class="brand" />

Page Size and Layout 

• All PDF invoices are rendered as A4.
• The default orientation is "landscape"
• The orientation can be changed to portrait by including the following in the invoice template. Note: orientation setting affects the entire PDF document and NOT individual pages.

<div class="pdf_orientation_portrait" >
...invoice content
</div>

Example Invoice Template

HTML

<div class="integration{if $x != 0} newpage{/if}">
    <img src="{$root_url}/templates/{$templates_dir}/_images/logos/logo.png" alt="Brand" class="brand" />
    <h1>ORDER INVOICE</h1>
    <div class="address">
        {$delivery_address.name}<br />
        {$delivery_address.address_1}<br />
        {$delivery_address.address_2}<br />
        {$delivery_address.town}<br />
        {$delivery_address.postcode}
    </div>
    {assign var="retailer_order_id_field_name" value="Anatwine Retailer Order ID"}
    <table border="0" cellspacing="0" cellpadding="0" class="header">
        <tr>
            <th class="small">Date Ordered</th>
            <th class="small">Order ID</th>
            <th class="small">Payment Type</th>
            {if $order_fields.$retailer_order_id_field_name}
            <th class="small">Retailer Order ID</th>
            {/if}
        </tr>
        <tr>
            <td>{$order.date_created}</td>
            <td>{$order.id}</td>
            <td>{$order.payment_type}</td>
            {if $order_fields.$retailer_order_id_field_name}
            <td>{$order_fields.$retailer_order_id_field_name}</td>
            {/if}
        </tr>
    </table>
    <table border="0" cellspacing="0" cellpadding="0" class="basket">
        <tr>
            <th class="small">QTY</th>
            <th class="small">Product Code</th>
            <th>Description</th>
            <th class="small">Unit Price</th>
            <th class="small">Discount</th>
            <th class="small">Total Price</th>
        </tr>
        {foreach from=$basket item="item"}
        <tr>
            <td>{$item.product_quantity}</td>
            <td>{$item.product.product_reference}</td>
            <td>
                {$item.product.product_name}
                {assign var="description" value=$item.product_description|unserialize}
                {foreach from=$description.variations item="value" key="key"}
                    {if $value}<br />{$key}: {$value} {/if}
                {/foreach}
            </td>
            <td>{$item.product_price|displayPrice}</td>
            <td>{$item.product_discount|displayPrice}</td>
            <td>{$item.product_price*$item.product_quantity|displayPrice}</td>
        </tr>
        {/foreach}
        {if $order.order_discount > 0}
        <tr>
            <td colspan="5" class="noborder total">Total discount</td>
            <td>{$order.order_discount|displayPrice}</td>
        </tr>
        {/if}
        <tr>
            <td colspan="5" class="noborder total">Order total</td>
            <td>{$order.order_total-$order.coupon_discount+$order.shipping_cost+$order.shipping_tax|displayPrice}</td>
        </tr>
    </table>
</div>

CSS

.integration { color: #444; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; width: 800px; margin: 50px auto; }
.integration.newpage { page-break-before: always; }
.integration a { color: #000; }
.integration a:hover { text-decoration: none; }
.integration h1 { font-size: 25px; text-transform: uppercase; color: #000; font-weight: normal; padding: 0 0 10px 0; margin: 0 0 10px 0; }
.integration img.brand { float: right; margin: -20px 0 0 0; }
.integration div.address { margin: 0 0 20px 0; }
.integration table { margin-bottom: 20px; border-collapse: collapse; }
.integration table.basket { width: 800px; }
.integration th { background-color: #fff; border:1px solid #000; color: #000; text-align: center; padding: 5px; }
.integration td { background-color: #fff; border:1px solid #000; color: #000; text-align: center; padding: 5px; }
.integration th { font-weight:bold; text-transform: uppercase; }
.integration th.small { width: 70px; }
.integration td.total { font-weight:bold; text-transform: uppercase; text-align: right; }
.integration td.noborder { border: none; }

The following PDF was generated using this template example: