X-Cart forums

[crazyoval]

Hi guys, Im looking for any posts about invoice templates that are recent (there are a few but they are a few years old now).

Can anyone give me a link to one here? I'd like to see what other guys are up to.

Thanks

[retrtrtrytrutru]

I have created a custom invoice layout from scratch. It will include our company details in the top left corner. The top right corner will show our logo. Beneath that it will show the invoice address to the left and to the right of that the shipping address. The invoice address has been aligned so it will fit our window envelopes.

Beneath the address it will show INVOICE in captital letters and then beneath that to the left the order details (date, order id, delivery method) and to the right of that the customer details (tax number, phone, e-mail, customer id).

Then the ordered products are displayed beneath that, nicely aligned of course, removed SKU numbers. Then, last but not least, the bottom part. The complete invoice has a fixed height so that I could make sure the footer part can be aligned at the bottom. The footer shows custom text depending on what payment method the customer has selected. If it's credit card it will display something like; payment method online. If it's bank transfer it will show a complete text with our bank account details.

Let me know if you're interested in this... It's custom code to fit our needs so I don't know if you can use it but I'm sure others can use this code since, in my opinion, it's much better than the standard X-Cart layout, especially for European companies.

[crazyoval]

yes, thanks i would be interested in taking a look. Thanks

[retrtrtrytrutru]

Here it is:

mail/html/order_invoice.tpl

{* $Id: order_invoice.tpl,v 1.37.2.1 2007/01/18 07:38:39 max Exp $ *}
{if $customer ne ''}{assign var="_userinfo" value=$customer}{else}{assign var="_userinfo" value=$userinfo}{/if}
{config_load file="$skin_config"}
{if $is_nomail ne 'Y'}{/if}
<table cellspacing="0" cellpadding="0" width="600" height="950" border="0"><tr><td valign="top">

<table cellspacing="0" cellpadding="0" width="600" border="0"><tr><td height="60" valign="top" align="center"><font style="font-size:10px;color:grey;"><b>{$config.Company.company_name}</b><br>{$config.Company.location_address} - {$config.Company.location_zipcode} - {$config.Company.location_city} - {$config.Company.location_country_name}<br>{if $config.Company.company_phone}{$lng.lbl_phone_1_title}: {$config.Company.company_phone}{/if} - {if $config.Company.company_fax}{$lng.lbl_fax}: {$config.Company.company_fax}{/if}<br>{if $config.Company.orders_department}{$lng.lbl_email}: {$config.Company.orders_department}{/if} {if $order.applied_taxes} - VAT no.: {foreach from=$order.applied_taxes key=tax_name item=tax}{$tax.regnumber}{/foreach}{/if}</font></td><td valign="top"><img align="right" src="{$ImagesDir}/companyname_small.gif"></td></tr></table>
<table cellspacing="0" cellpadding="0" width="600" border="0">
 <tr>
  <td width="285">&nbsp;</td>
  <td width="75">&nbsp;</td>
  <td width="240" height="25"><b>{$lng.lbl_shipping_address}</b></td>
 </tr>
 <tr>
  <td><img height="2" src="{$ImagesDir}/spacer.gif" width="1" alt="" /></td>
  <td><img height="2" src="{$ImagesDir}/spacer.gif" width="1" alt="" /></td>
  <td bgcolor="#000000" height="2"><img height="2" src="{$ImagesDir}/spacer_black.gif" width="100%" alt="" /></td>
 </tr>
 <tr>
  <td colspan="3"><img height="2" src="{$ImagesDir}/spacer.gif" width="1" alt="" /></td>
 </tr>
 <tr>
  <td valign="top">
   <table cellspacing="0" cellpadding="0" width="100%" border="0">
    {if $_userinfo.default_fields.firstname}<tr><td>{$order.firstname}</td></tr>{/if}
    {if $_userinfo.default_fields.lastname}<tr><td>{$order.lastname}</td></tr>{/if}
    {if $_userinfo.default_fields.b_address}<tr><td>{$order.b_address}</td></tr>{/if}
    {if $_userinfo.default_fields.b_address_2}<tr><td>{$order.b_address_2}</td></tr>{/if}
    {if $_userinfo.default_fields.b_zipcode}<tr><td>{$order.b_zipcode}{if $_userinfo.default_fields.b_city}, {$order.b_city}{/if}</td></tr>{/if}
    {if $_userinfo.default_fields.b_country}<tr><td>{$order.b_countryname}</td></tr>{/if}
   </table>
  </td>
  <td>&nbsp;</td>
  <td valign="top">
   <table cellspacing="0" cellpadding="0" width="100%" border="0">
    {if $_userinfo.default_fields.s_firstname}<tr><td>{$order.s_firstname}</td></tr>{/if}
    {if $_userinfo.default_fields.s_lastname}<tr><td>{$order.s_lastname}</td></tr>{/if}
    {if $_userinfo.default_fields.s_address}<tr><td>{$order.s_address}</td></tr>{/if}
    {if $_userinfo.default_fields.s_address_2}<tr><td>{$order.s_address_2}</td></tr>{/if}
    {if $_userinfo.default_fields.s_zipcode}<tr><td>{$order.s_zipcode}{if $_userinfo.default_fields.s_city}, {$order.s_city}{/if}</td></tr>{/if}
    {if $_userinfo.default_fields.s_country}<tr><td>{$order.s_countryname}</td></tr>{/if}
   </table>
  </td>
 </tr>
 <tr>
  <td colspan="3" height="75" align="center"><font style="FONT-SIZE: 24px"><b style="text-transform: uppercase;">{$lng.lbl_invoice}</b></font></td>
 </tr>
</table>
<table cellspacing="0" cellpadding="0" width="600" border="0">
 <tr>
  <td width="275" height="25"><b>Order details</b></td>
  <td width="50">&nbsp;</td>
  <td width="275" height="25"><b>Customer details</b></td>
 </tr>
 <tr>
  <td bgcolor="#000000" height="2"><img height="2" src="{$ImagesDir}/spacer_black.gif" width="100%" alt="" /></td>
  <td><img height="2" src="{$ImagesDir}/spacer.gif" width="1" alt="" /></td>
  <td bgcolor="#000000" height="2"><img height="2" src="{$ImagesDir}/spacer_black.gif" width="100%" alt="" /></td>
 </tr>
 <tr>
  <td colspan="3"><img height="2" src="{$ImagesDir}/spacer.gif" width="1" alt="" /></td>
 </tr>
 <tr>
  <td valign="top">
   <table cellspacing="0" cellpadding="0" width="100%" border="0">
    <tr><td>{$lng.lbl_date}:</td><td>{$order.date|date_format:$config.Appearance.datetime_format}</td></tr>
    <tr><td>{$lng.lbl_order_id}:</td><td>#{$order.orderid}</td></tr>
    <tr><td>{$lng.lbl_delivery}:</td><td>{$order.shipping|trademark|default:$lng.txt_not_available}</td></tr>
   </table>
  </td>
  <td>&nbsp;</td>
  <td valign="top">
   <table cellspacing="0" cellpadding="0" width="100%" border="0">
    {if $_userinfo.default_fields.tax_number}<tr><td>{$lng.lbl_tax_number}:</td><td>{$order.tax_number}</td></tr>{/if}
    {if $_userinfo.default_fields.phone}<tr><td>{$lng.lbl_phone}:</td><td>{$order.phone}</td></tr>{/if}
    {if $_userinfo.default_fields.email}<tr><td>{$lng.lbl_email}:</td><td>{$order.email}</td></tr>{/if}
    <tr><td>{$lng.lbl_customer}:</td><td>{$login}</td></tr>
   </table>
  </td>
 </tr>
 <tr>
 <tr>
  <td colspan="3" height="75">&nbsp;</td>
 </tr>
 <tr>
  <td colspan="3">{include file="mail/html/order_data.tpl"}</td>
 </tr>
</table>
{if $order.customer_notes ne ""}
<table cellspacing="0" cellpadding="0" width="600" border="0">
 <tr>
  <td height="25"><b>{$lng.lbl_customer_notes}</b></td>
 </tr>
 <tr>
  <td bgcolor="#000000" height="2"><img height="2" src="{$ImagesDir}/spacer_black.gif" width="100%" alt="" /></td>
 </tr>
 <tr>
  <td>{$order.customer_notes}</td>
 </tr>
</table>
{/if}

</td><tr></tr><td valign="bottom">

<table cellspacing="0" cellpadding="0" width="600" border="0">
 <tr><td colspan="3" height="50">&nbsp;</td></tr> 
 <tr><td colspan="3"><b>{$lng.lbl_payment_method}:</b> {$order.payment_method}</td></tr>
 <tr><td colspan="3">&nbsp;</td></tr>
{if $order.payment_method eq "Bank Transfer"}
 <tr><td colspan="2"><b>Please pay to:</b></td><td>QualityLamps B.V.</td></tr>
 <tr><td width="250" align="right">Bank :</td><td width="10">&nbsp;</td><td>Bank Name</td></tr>
 <tr><td align="right">Account number :</td><td width="10">&nbsp;</td><td>123.456.7890</td></tr>
 <tr><td align="right">IBAN-code :</td><td width="10">&nbsp;</td><td>IBAN code...</td></tr>
 <tr><td align="right">Swift / BIC code :</td><td width="10">&nbsp;</td><td>BIC code...</td></tr>
 <tr><td colspan="3">&nbsp;</td></tr>
{/if}
 <tr><td colspan="3" align="center" height="75">{$lng.txt_thank_you_for_purchase}</td></tr>
</table>

</td></tr></table>

Fixed height for invoice because the footer needs to be aligned at the bottom, regardless of the invoice contents. Please note the if statement "{if $order.payment_method eq "Bank Transfer"}". This part is only displayed if the customer has selected "Bank Transfer" as payment method. This part might not work for you if you don't have this payment method or have a different name for it.

In order_data.tpl I didn't change much, I only removed one column SKU, nothing else so I won't paste it here. If required I can post a screenshot of what my invoice looks like, let me know.

[crazyoval]

thanks a lot retrtrtrytrutru, I appreciate that. i shall give it a go.

[samz724]

Hey, can you post a screenshot? I'm interested to see how this came out?

Thanks a lot!

[mercury]

Please post the screen shot. Thanks!

[retrtrtrytrutru]

This is what our invoice currently looks like, it has been modified a little since the beginning of this topic. Footer is dependant on payment method. Notes area is only shown when customer adds one. Fixed height to it will align nicely on European A4 paper and width has been set to 100% of the page. Top of the page shows company details.

http://www.qualitylamps.eu/skin1/img/invoice.gif

[mercury]

Looks absolutely fantastic! Looks professional!
Do you have any idea, how to show Tax separately?
I mean...
subtotal= ё10.00
shipping= ё05.00
Tax(17.5%)= ё2.63 (this tax is for both subtotal + shipping)
Grand total= ё17.63

[crazyoval]

Looks really nice retrtrtrytrutru. Ive not progressed mine since I made a right cock up for some reason and have had to park any development because of other priorities. This looks very professional.

I want to add legal details to my receipt too, so need to work on that aswell.. it needs to show that the person has purchase an item for a specific use, and has actually chosen that option in the payment process (price option detail).

that's where mine gets a little more complicated.