Skip to content

Instantly share code, notes, and snippets.

@jsolid

jsolid/my-invoice-template.html

Last active July 25, 2017 14:05
Show Gist options
  • Save jsolid/4615426 to your computer and use it in GitHub Desktop.
Save jsolid/4615426 to your computer and use it in GitHub Desktop.
Download ZIP
Custom invoice template for Siwapp
Raw
my-invoice-template.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="{{lang}}" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invoice</title>
<style type="text/css">
@page { margin:0.5cm 0.5cm 0.8cm 1.5cm; }
body { margin:0.8cm auto;font:1em;}
div { display:block; }
table { border-collapse:collapse; border-spacing:0; width:99%;}
table.region td { border:0; }
table tr th { text-align:center; font-weight:bold; background-color:#eee; }
table tr th, table tr td { border:1px solid #333; padding: 3px; vertical-align:top; }
table tr td.hb-l { border-left:0; }
table tr td.hb-b { border-bottom:0; }
table tr td.hb-t { border-top:0; }
h2 { padding:2px 5px 2px 0; margin:0; font-weight:bold; font-size:2.2em; }
h3 { padding:2px 5px 2px 0; margin:0; font-weight:bold; font-size:1.6em; }
p { padding:3px 0; margin:0; }
#hd, #bd, #ft {width:95%; margin:0 auto 20px auto; overflow:auto; }
#hd .comp_profile img { width:280px; height:58px; }
#hd .inv_info table tr td { text-align:center; width:120px; border:1px solid #333; }
#bd .delivery-info { margin-top: 20px; } /* for dompdf, margin-bottom does not work well */
#bd .delivery-info table { width:85%; margin:0 auto 10px; }
#bd .delivery-info table th.customer { width: 40%; }
#bd .product-info table { margin:0 auto 10px; }
.f-small { font-size:0.7em; }
.f-medium { font-size:0.9em; }
table .right { text-align:right; }
table .center { text-align:center; }
table .ty { width: 55px; }
table .sm { width:100px; }
.section { clear:both; /*page-break-before: always;*/ }
/* CSS code for printing */
@media print {
body { margin:auto; }
#hd, #bd, #ft {width:600px; margin:0 auto 20px 0; overflow:auto; }
.section { page-break-inside:avoid; }
#bd .delivery-info table { width:100%; margin:0 auto 10px; }
}
</style>
</head>
<body>
<div id="hd" class="section">
<table class="region">
<tbody>
<tr>
<td width="70%">
<div class="comp_profile">
{% if settings.company_logo %}
<img src="{{ settings.company_logo }}" alt="{{ settings.company_name }}" />
{% else %}
<h3>{{ settings.company_name }}</h3>
{% endif %}
{{settings.company_address|format}}
{{settings.company_phone}}
</div>
</td>
<td>
<div class="inv_info">
<h2>Tax Invoice</h2>
<table>
<thead>
<tr>
<th>Date</th>
<th>Invoice No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ invoice.issue_date|date('d', 'en_AU') }}</td>
<td>{{ invoice }}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="bd" class="section">
<div class="delivery-info">
<table>
<thead>
<tr>
<th class="customer">Customer</th>
<th>Invoice To</th>
<th>Deliver To</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>{{ invoice.customer_name }}</strong><br/>
{{ invoice.contact_person }}<br/>
{{ invoice.customer_email }}
</td>
<td>
{{ invoice.invoicing_address|format }}
</td>
<td>
{{ invoice.shipping_address|format }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="product-info">
<table>
<thead>
<tr>
<th class="big">Description</th>
<th class="sm">Unit Cost</th>
<th class="ty">Qty</th>
<th class="ty">Tax</th>
<th class="sm">Discount</th>
<th class="sm">Price <span class="f-small">({{ settings.currency }})</span></th>
</tr>
</thead>
<tbody>
{% for item in invoice.Items %}
<tr>
<td>{{ item.description }}</td>
<td class="center">{{ item.unitary_cost|round }}</td>
<td class="center">{{ item.quantity }}</td>
<td class="center">
{% for tax in item.Taxes %}
<span class="tax">{{tax.name}}</span>
{% endfor %}
</td>
<td class="center">{{item.discount_amount|round}}</td>
<td class="right">{{item.gross_amount|round}}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<td colspan="{% if invoice.discount_amount %}4{% else %}3{% endif %}" class="hb-l hb-b"></td>
<th class="right">Gross</th>
<td class="right">{{invoice.base_amount|round}}</td>
</tr>
{% if invoice.discount_amount > 0 %}
<tr>
<td colspan="{% if invoice.discount_amount %}4{% else %}3{% endif %}" class="hb-l hb-b hb-t"></td>
<th class="right">Discount</th>
<td class="td_global_discount right">{{invoice.discount_amount|round}}</td>
</tr>
{% endif %}
<tr>
<td colspan="{% if invoice.discount_amount %}4{% else %}3{% endif %}" class="hb-l hb-b hb-t"></td>
<th class="right">Subtotal</th>
<td class="td_subtotal right">{{invoice.net_amount|round}}</td>
</tr>
<tr>
<td colspan="{% if invoice.discount_amount %}4{% else %}3{% endif %}" class="hb-l hb-b hb-t"></td>
<th class="right">Tax</th>
<td class="td_total_taxes right">{{invoice.tax_amount|round}}</td>
</tr>
<tr class="strong">
<td colspan="{% if invoice.discount_amount %}4{% else %}3{% endif %}" class="hb-l hb-b hb-t"></td>
<th class="right">Total</th>
<td class="td_total right">{{invoice.gross_amount|round}}</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="ft" class="section">
<h3>Terms & conditions</h3>
<div class="terms">
{% if invoice.terms != '' %}
{{ invoice.terms|format }}
{% elseif settings.legal_terms != '' %}
{{ settings.legal_terms|format }}
{% endif %}
{% if invoice.due_date %}
<p>Please pay the remaining amount before {{ invoice.due_date|date('D', 'en_AU') }}. Thank you.</p>
{% endif %}
</div>
</div>
</body>
</html>
@jsolid
Copy link
Author

jsolid commented Jan 25, 2013

  • Instead of showing country currency code on all figures, I prefer to display it on "Price" label.
  • Numbers will not round to 2 if "|currency" option is not specified, thus put "|round" option (default decimal is 2) on each figure.
  • It seems that "invoice.terms" and "settings.legal_terms" refers to the same text, set to display once which priority is given to "invoice.terms".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment