Improved Invoice Layout
 

Here's my redesigned invoice for X-Cart Orders. The default one felt crowded and disorganised so I've created a layout that promotes the important information and cuts down on useless text.

Attachment 1158

This was developed on X-Cart 4.1.9. I can't speak for older/newer versions.

Known Issues:
- May not look 'right' if your company logo is taller than it is wide.
- I've redesigned the layout for the information I choose to have on the invoice. If you show CC info or NetBanx references, you'll have to reformat/redesign these parts yourself.
- This *may* rely on some of my CSS mods, but most styles are inline.
- Language variables not used in footer/customer details.

Instructions:

1. Replace skin1/mail/html/order_invoice.tpl with the file attached (BACKUP THE ORIGINAL).

2. Replace skin1/mail/html/order_data.tpl with the file attached (BACKUP THE ORIGINAL).

3. In line 11 of order_invoice.tpl, replace <img src="/skin1/images/xlogo.gif" alt="" height="67" width="244" /> with the path/size/alt of your company logo.

Done!

Now View an old order or make a test one and see what you think :)

James.


Updates:
- You need to be using HTML email for this to work. General Settings > Email Options > HTML mail.
- You may need to clear your templates cache.
- Change 'vertical-align' tags to 'valign'. Laziness on my part :)

Re: Improved Invoice Layout
 

Hi I had been meaning to update my invoice layout and this gave me a good starting point, a couple of things that didn't work for me or I wasn't keen on.

1) You use a tag vertical-align, this didn't work for me until I changed it to valign, then it was fine, this was the area of the form for the names and addresses.
2) I preferred the original data section, so I restored my order_data.tpl and this was then really good for me, I liked it better, but this is a personal choice thing.

Anyway, thanks for the kick I needed, nice job.

Re: Improved Invoice Layout
 

Hi Jaydee,

Are the new files order_invoice.tpl and order_data.tpl right under your name James for downloading?

I download them anyway and replaced the two old existing files. Did a dummy run. I did not see any changes. Wonder why. Any help is greatly appreciated.

Re: Improved Invoice Layout
 

Did you clear your templates cache?

Depending on your version number (you really should add that to your signature), in admin (ver 4.1.x)... click "summary"... click "tools"... scroll down and you should see "clear templates cache".

Re: Improved Invoice Layout
 

Thank you for your reply.

I am using X-Cart Gold Ver. 4.1.11. I edited the 2 templates at the Administration level. The 2 templates is located at mail/

Also cleared the template cache as advised.

There are still no changes.

Thank you for your help

Re: Improved Invoice Layout
 

If you have "use html" checked in your email settings you are using the templates in the skin1/mail/html folder.

Re: Improved Invoice Layout
 

Hi,

I got it fixed by doing a html change.

Thank you very much. I am very grateful.

Best regards
William B. Francis
www.Let'sFixYourFurniture

Re: Improved Invoice Layout
 

James (jaydee),

Something that has bugged me for quite some time is the way x-cart displays taxes. I notice in your example that (even though it appears to be Australian) your tax (GST 10.00%) is displayed within the confines of the invoice instead of the way the default x-cart displays it as an afterthought ("Subtotal includes XX tax XX% - $xx.xx") under the order total. Did you modify the order_invoice.tpl or the order_data.tpl to get this to display in the manner that your invoice does, or is this just something to do with the way your tax is applied in your country? Can you point specifically to where this is done? Thanks.

Re: Improved Invoice Layout
 

JWait - thanks for helping Will out. I haven't been able to get to the forum for a while...

I'm not familiar with the 'default' way X-Cart displays taxes, unfortunately. When I first installed X-Cart it configured itself for Australian taxes and this is just the way it has remained. I made no modifications to any templates so I assume it's all down to the settings.

Here are my tax settings:
- All 4 'Tax Options' under 'Taxing System' are unchecked. This keeps taxes separate from totals.
- Under the settings for the individual tax rate, 'included into product price' and 'display product price including tax' are unchecked.

Short of changing these settings I don't know what to suggest - it could just be the default Aussie config. We keep our taxes separate as many business customers are tax exempt and so this gives them a closer recommendation of what they pay after their tax rebate.

Happy to help.

Re: Improved Invoice Layout
 

does this mod work with 4.2?

Re: Improved Invoice Layout
 

Made on 4.1.9 and confirmed with up to 4.1.11. Can't speak for 4.2. Why not try and let us know?

Always backup first. 8)

Re: Improved Invoice Layout
 

Hi jaydee, I found this thread while searching for a way to change how taxes are displayed on our invoices. We supply to companies as well as consumers so sometimes we have to invoice with taxes applied and sometime the invoice is tax exempt. I'm looking for a way to display the invoices like this example:


And for tax exempt invoices:

Any idea if you can accomplish this? I already applied your layout to test but then our taxes are displayed like:


Thanks in advance for any info :)

Re: Improved Invoice Layout
 

You should certainly be able to do this, but I'm not sure on the specifics unfortunately. Did your old invoice layout do this before you applied my changes? The new one should still be able to as the code changes are only visual.

Under Management > Taxing System, have you checked 'Enable tax exemption for customers'? This would be your first point of call.

The lines for the tax display are in order_data.tpl, starting around line 38.

You should be able to add this somewhere:

{if $_userinfo.tax_exempt eq "Y"}
<p>Note: This order is tax exempt</p>
{/if}

This will display the message if they are tax exempt.

Cheers,

Re: Improved Invoice Layout
 

Hi jaydee,

The second example with the "this order is tax exempt" is already working just fine but the problem is with the VAT invoice. I want to display product prices without the VAT, regarless if the customer has to pay it or not, and only show the VAT amount added to the subtotal area of the invoice... If I play with the settings in the backend it also has its affect on the website, this is unwanted because that works ok.

I'll play around with it some more to fix it myself. If anyone has any info or has already done it, please let me know :)

Re: Improved Invoice Layout
 

Sorry to hijack your thread jaydee but I think I have narrowed it down. In order_data.tpl I only have to change the Total column but I don't fully understand it, yet:

In simple terms, I think this basically says take the product amount/quantity and multply it with the display price. I think I can safely change this to:

This will multiply the procuct quantity with the product price instead of the display price. Only question I have here, do you know what the |default:0 string means, in simple terms of course. I am worried that if I remove it something will go wrong so if I know how to read this I can continue again...

Re: Improved Invoice Layout
 

I'm not certain what the default:0 tag means, but I would guess that it will set the price as 0 if there is no price or display price. It goes left to right until it finds a variable that isn't empty, and rather than making $price empty, it sets the 'default' value as 0.

I have my taxing system set up in the same way you describe how you need yours, and it works great.

Under 'Taxing System' I have all the options unchecked (except for 'enable tax exemption'), and in the tax details I have all the checkboxes unchecked as well. These options are all pretty self explanatory so try a few configurations until you get what you need.

Taxes are tricky! :lol:

Re: Improved Invoice Layout
 

Very nice - Thanks :)

Re: Improved Invoice Layout
 

Yeah, very tricky sometimes which is why I posted here before I start modding stuff and mess everything up. I'll digg into it and see what happens, I'm sure I'll find out and get it set-up properly :) Thanks for the help.

BTW: in my backend I have:

Display cart/order totals including tax
Display a tax rate for each projector option in cart/order:

both enabled, I need them to be enabled because it's used on the frontpage of the website. When a customer logs in with tax exempt enabled all prices are displayed without VAT, if a customer needs to pay taxes it shows the excluding and including VAT prices.

Re: Improved Invoice Layout
 

Thanks for this mod. I have been messing around with my invoices for a while and this helped to clean things up a bit for me.

I have two questions.

1) the order details are in a variable window that expands to the full size of the browser. Is their a way to make it letter width?

2) I am trying to move the additional information to after the order details. Can you point our the beginning and end of the code to move it. I have tried a few times, but corrupt the code each time.

Thanks

Bob

Re: Improved Invoice Layout
 

Have a look at line 7 of order_invoice.tpl. This is where the table width is set. By default, if the invoice is not being shown in an email, the width is 100%. If it is email, its 600 pixels. You should be able to set width="..." to whatever you need.


This should be lines 94-125, but I'm not 100% sure. I don't use this myself so I've left the default X-Cart code in place. You might need to make some changes.

Sorry for the very, very delayed reply, but better late than never! Hopefully you've already found a solution 8)

Re: Improved Invoice Layout
 

Hi,
Is it possible to add brand's/manufacturer's logo in mail/html/order_invoice.tpl at the bottom?

Thanks to all.

Re: Improved Invoice Layout
 

You can add pretty much whatever you want it will work much the same way as putting images in the confirmation emails.

I use a bunch of if statements to include images for different carriers/postal services within my order_complete email tpl so that if the tracking number contains a certain string it includes the logo of that shipping company.

Here's an example which is looking for JJD in the tracking number, all my DHL tracking numbers start with this so it's easy to detect.

{if strpos($order.tracking, 'JJD') === 0}
<p />
Your order has been collected by
<p /><img border="0" src="[insert your domain and/or path to your image folder here]dhl.gif" width="155" height="22">

I have removed my domain name and image path you should substitute your own, but you are just pointing to the image.

I have about 4 different if statements for this so as long as you can identify a unique field and identifier then you should be able to do the same, e.g. if manufacturer equals etc.

Or if you just want the images of a range of manufacturers to appear then simply place ><img border="0" src="[insert your domain and/or path to your image folder here]dhl.gif" width="155" height="22"> wherever you want the image to show, if you want a bunch of manufacturers images to appear then create a collage of the images and save as a single image and link to that, remember to adjust the height and width to the correct sizes.

I planned but have not got round to it yet to do this for adverts at the bottom of my packing slips as generally there is atleast 2 inches of space at the bottom of them when printed which is a waste of valuable paper :-) that could be filled with a special offer voucher or simply deal of the week.

The best bet is to copy the template and then play around with it using different things you want to acheive, then when you are happy with the result copy this over the original template (always keep a backup).

Re: Improved Invoice Layout
 

Thanks Chris Barber for your suggestion. Actually I want to display each different manufacturer's logo in each different invoice.Is it possible? If possible how? can You help me?

Thanks to all.

Re: Improved Invoice Layout
 

It would take some working out as long as the manufacturer can be associated with the order, but I can't help you work it out at present as it may need something more complex than an if statement, I'm not sure the manufacturer of a product on your order is stored with the order, so you would have to do a look up for the data before you could include it, but it is possible.

Re: Improved Invoice Layout
 

Hi,
Chris Barber I have some problem in /customer/main/order_message.tpl to link on third party server for bannerdisplay.
Here is the code<img height="1" width="3" src="https://www.xyz.com/x/?x=r&amp;h=54128&amp;o={$orderids}&amp;g=681836359 726&amp;s=0.00&amp;q=1"/>Here I cant get order total ie s=0.00.What is the exact value of s? can you help me?Thank you.

Re: Improved Invoice Layout
 

Hi chris.barber is it possible to call one image below customer notes in /mail/html/order invoice.tpl or in signature.tpl? Any help!!!

Re: Improved Invoice Layout
 

I love this improved invoice and appreciate the time it took to create it and share!

I am using this template modification in 4.4 and it is not pulling the customer info such as billing address and shipping address. I've been trying to compare the original with the improved but don't see where I am missing it.

Any ideas?