Jump to content

Help Needed with HTML invoice


julius1973

Recommended Posts

I have created an invoice to use with my multi channel sales solution (Channel Grabber). I have just moved from a more primitive solution, however, that previous software had an option whereby all orders where the quantity was greater that 1 the number was in red. This helped me to ID any such orders. I would like to implement this on my order template I have created on my new system. Channel Grabber inform me it is just a simple couple of lines of javascript needed. The code for the invoice is below and it appears the relevant tag is as follows: {{orderitem_qty[loop-count]}} If anyone could assist that would be greatly appreciated.

<html><div style='width:19cm;position:relative;'><div class="style1"><style>@page:297mm 210mm; margin:1cm;@media:print;body{font-size:12px;}.style1 {text-align: left;}.style2 {font-size: small;}.style3 {font-weight: normal;font-size: xx-small;}.style6 {text-align: center;font-family: Arial, Helvetica, sans-serif;font-size: x-small;}.style7 {font-weight: normal;font-size: 6pt;}.style8 {text-align: center;}</style><!-- Logo Start --><!-- Logo End --><b>INVOICE</b> <br><span class="style14"><strong>GIZMO DEALS LTD / LUPO</strong></span><br /><!-- Your Companies Detail --></div><div style="font-size:12px;"><p>From:</p>{{remove_extra_breaks}}{{trading_company_name}}<br />{{trading_address_1}}<br />{{trading_address_2}}<br />{{trading_address_city}}<br />{{trading_address_state}}<br />{{trading_address_postcode}}<br />	   <br />{{remove_extra_breaks}}Phone: {{trading_address_phonenumber}}<br />Email: sales@gizmo-deals.com<br />{{trading_address_website}}<br /></div><!-- Your Customers Details --><div style="font-size:12px;"><p> </p><p> </p><p>To:</p>{{remove_extra_breaks}}{{shipping_recipient_name}}<br />{{shipping_address_1}}<table style="float:right;font-size:12px;display:block;position:absolute;top:7.8cm; left:13.8cm; width: 221px;"><tr><th style="width: 61px"></th><th></th></tr><tr><td style="width: 61px">Invoice No.</td><td>{{order_orderid}}</td></tr><tr><td style="width: 61px">Invoice Date</td><td>{{order_purchasedate}}</td></tr></table><br />{{shipping_address_2}}<br />{{shipping_address_city}}<br />{{shipping_address_state}}<br />{{shipping_address_postcode}}<br />{{shipping_address_country}}<br />{{remove_extra_breaks}}</div><br /><!-- Invoice Number and Purchase Date --><!-- Contents of the Order --><table width="100%" style="font-size:12px;"><rt>  <td>Qty</td>  <td>Item</td>  <td>Our Price</td>  <td>Vat Rate</td>  <td>Total Price</td></tr>{{loop}}  <tr>   <td style="width:40px;" class="style2" ><strong>{{orderitem_qty[loop-count]}}</strong></td>   <td>    {{orderitem_name[loop-count]}} <br />    <span style="color:grey;font-size:95%;"><i>{{orderitem_variations[loop-count]}}</i><span><br />    <span style="color:red;" class="style2"> <strong>SKU : {{orderitem_sku[loop-count]}}</strong></span>   </td>   <td>{{order_currency}} {{orderitem_price[loop-count]}}</td>   <td>20%</td>   <td>{{order_currency}} {{orderitem_linetotal[loop-count]}}</td>  </tr>{{loop}}</table><table style="font-size:12px;float:right;margin-left:460px;margin-right:30px;text-align:right;"><tr><th></th><th></th></tr><tr><td>Dispatched Via</td><td>{{order_shippingmethod}}</td></tr><tr><td></td><td></td></tr><tr><td>Sub Total</td><td>{{order_currency}}{{order_subtotal}}</td></tr><tr><td>Delivery</td><td>{{order_currency}}{{order_postage}}</td></tr><tr><td>VAT</td><td>{{order_currency}}{{order_vat}}</td></tr><tr><td>Total</td><td>{{order_currency}}{{order_total}}</td></tr></table><!-- Address Label --><div style="width:8cm;height:5cm;position:absolute;top:218mm;left:18mm;font-size:12px;" class="style1"><strong style="position:absolute;top:-205mm; font-size:1.2em; left: 298px; width: 328px; height: 208px;"><div class="style1">{{remove_extra_breaks}}{{shipping_recipient_name}}<br />{{shipping_address_1}}<br />{{shipping_address_2}}<br />{{shipping_address_city}}<br />{{shipping_address_state}}<br />{{shipping_address_postcode}}<br />{{shipping_address_country}}<br />{{remove_extra_breaks}}<br><br>  <span class="style7">GIZMO DEALS, 2 Wold Farm Park, Broughton Road, Old,  Northants, NN6 9RH, UK</span><span class="style3"><br>   </span><strong style="font-size:1.2em; width: 328px; height: 208px;">  <span class="style3">   <div class="style8"><strong style="font-size:1.2em; width: 328px; height: 208px;">  <span class="style3">   <img src="http://www.uksoftwaredeals.biz/ebaypics/logo/tracking.jpg" width="219" height="45" style="float: left" class="style9" ></span></strong></div>  </span></strong></div></strong><p style="position:absolute;top:-207mm; left:136mm; height: 5px;">{{order_orderid}}</p></div><!-- Foorer --><div class="footer" style="position:absolute;top:270mm;width:19cm;font-size:80%;color:grey;">{{registered_address_name}},{{registered_address_1}}, {{registered_address_2}}, {{registered_address_city}},  {{registered_address_postcode}}, VAT:  {{registered_address_vat}}</div><DIV style="page-break-before:never"></DIV><html><head><style type="text/css">#orderitem_qty {    font-weight:bold;    color:#f00;}.style9 {margin-top: 0px;}.style12 {font-family: Verdana;font-size: xx-small;}.style13 {text-align: center;font-family: Verdana;font-size: xx-small;}.style14 {font-family: Verdana;}</style>  <title></title></head><body>  <p class="style6">    </p><p class="style6">    </p><p class="style6">    </p><p class="style6">    </p><p class="style6">    </p><p class="style6">    </p><p class="style6">    </p><p class="style6">    </p><div>  <h3 class="style8"> </h3><h3 class="style8"> </h3><h3 class="style13"> </h3><h3 class="style13"> </h3><h3 class="style13"> </h3><h3 class="style13"> </h3><h3 class="style13"> </h3><h3 class="style13"> </h3><h3 class="style13">THANKS FOR SHOPPING WITH US</h3>  <p class="style8"><span class="style12">Queries: Please contact us via sales@gizmo-deals.com quoting your order details. Please refrain from leaving any negative feedback as we will resolve problems swiftly.Please leave us good feedback if you are happy with our service and if you like the product you ordered via Amazon please provide a positive product review to assist other buyers make a qualified purchase.Please check our seller terms on both Amazon.co.uk and eBay.co.uk</span></p><p class="style8"><span class="style12">PLEASE LIKE US ON FACEBOOK FOR INFO ON NEW PRODUCTS AND SPECIAL DEALS:</span></p><p class="style8"><span class="style12">FACEBOOK.COM/GIZMODEALS </span>   </p></div><p class="style6">    </p><p class="style6">    </p><p class="style6">    </p></body></html>

Link to comment
Share on other sites

One way would be to add a class to the strong tag that holds the quantity: <strong class="quantity_value">{{orderitem_qty[loop-count]}}</strong> Then you can add some Javascript at the end of the page to get all strong elements and check for the quantity value, and apply a text color if necessary:

var tags = document.getElementsByTagName('strong');for (var i = 0; i < tags.length; i++){  if (tags[i].className == 'quantity_value' && parseInt(tags[i].innerHTML, 10) > 1)    tags[i].style.color = 'red';}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...