AnsweredAssumed Answered

Invoice customization

Question asked by Stan Dzavoronok on Sep 23, 2016

I'm trying to create custom layout for the invoice. I'm running into some issues with HTML code for the invoice. Default invoice uses widths in %, however within code there are widths of columns which are in total making more than 100% which surprises for example there's such code for the invoice:

 

<table border="0" cellspacing="2">
<tbody>
<tr>
<td rowspan="6" width="180%"><img src="./themes/default/images/pdf_logo.jpg" alt="" /></td>
<td width="60%"><strong>Invoice</strong></td>
<td width="60%"> </td>
</tr>
<tr>
<td bgcolor="#DCDCDC" width="75%">Invoice number:</td>
<td width="75%">{$fields.quote_num}</td>
</tr>
<tr>
<td bgcolor="#DCDCDC" width="75%">Sales Person:</td>
<td width="75%">{$fields.assigned_user_link.name}</td>
</tr>
<tr>
<td bgcolor="#DCDCDC" width="75%">Valid until:</td>
<td width="75%">{$fields.date_quote_expected_closed}</td>
</tr>
<tr>
<td bgcolor="#DCDCDC" width="75%">Purchase Order Num:</td>
<td width="75%">{$fields.purchase_order_num}</td>
</tr>
<tr>
<td bgcolor="#DCDCDC" width="75%">Payment Terms:</td>
<td width="75%">{$fields.payment_terms}</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="width: 50%;" border="0" cellspacing="2">
<tbody>
<tr style="color: #ffffff;" bgcolor="#4B4B4B">
<td>Bill To</td>
<td>Ship To</td>
</tr>
<tr>
<td>{$fields.billing_contact_name}</td>
<td>{$fields.shipping_contact_name}</td>
</tr>
<tr>
<td>{$fields.billing_account_name}</td>
<td>{$fields.shipping_account_name}</td>
</tr>
<tr>
<td>{$fields.billing_address_street}</td>
<td>{$fields.shipping_address_street}</td>
</tr>
<tr>
<td>{if $fields.billing_address_city!=""}{$fields.billing_address_city},{/if} {if $fields.billing_address_state!=""}{$fields.billing_address_state},{/if} {$fields.billing_address_postalcode}</td>
<td>{if $fields.shipping_address_city!=""}{$fields.shipping_address_city},{/if} {if $fields.shipping_address_state!=""}{$fields.shipping_address_state},{/if} {$fields.shipping_address_postalcode}</td>
</tr>
<tr>
<td>{$fields.billing_address_country}</td>
<td>{$fields.shipping_address_country}</td>
</tr>
</tbody>
</table>
<p> </p>
<p>{foreach from=$product_bundles item="bundle"}</p>
<p> </p>
<h3>{$fields.name}</h3>
<table style="width: 100%;" border="0">
<tbody>
<tr style="color: #ffffff;" bgcolor="#4B4B4B">
<td width="70%">Quantity</td>
<td width="175%">Part Number</td>
<td width="175%">Quoted Line Item</td>
<td width="70%">List Price</td>
<td width="70%">Unit Price</td>
<td width="70%">Ext. Price</td>
<td width="70%">Discount:</td>
</tr>
<!--START_PRODUCT_LOOP-->
<tr>
<td width="70%">{$product.quantity}</td>
<td width="175%">{$product.mft_part_num}</td>
<td width="175%">{$product.name}{if isset($product.list_price)}<br />{$product.description}{/if}</td>
<td align="right" width="70%">{$product.list_price}</td>
<td align="right" width="70%">{$product.discount_price}</td>
<td align="right" width="70%">{$product.ext_price}</td>
<td align="right" width="70%">{$product.discount_amount}</td>
</tr>
<!--END_PRODUCT_LOOP--></tbody>
</table>
<table>
<tbody>
<tr>
<td><hr /></td>
</tr>
</tbody>
</table>
<table style="width: 100%; margin: auto;" border="0">
<tbody>
<tr>
<td width="210%"> </td>
<td width="45%">Subtotal:</td>
<td align="right" width="45%">{$bundle.subtotal}</td>
</tr>
<tr>
<td width="210%"> </td>
<td width="45%">Discount:</td>
<td align="right" width="45%">{$bundle.deal_tot}</td>
</tr>
<tr>
<td width="210%"> </td>
<td width="45%">Discounted Subtotal:</td>
<td align="right" width="45%">{$bundle.new_sub}</td>
</tr>
<tr>
<td width="210%"> </td>
<td width="45%">Tax:</td>
<td align="right" width="45%">{$bundle.tax}</td>
</tr>
<tr>
<td width="210%"> </td>
<td width="45%">Shipping:</td>
<td align="right" width="45%">{$bundle.shipping}</td>
</tr>
<tr>
<td width="210%"> </td>
<td width="45%">Total</td>
<td align="right" width="45%">{$bundle.total}</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p>{/foreach}</p>
<p> </p>
<p> </p>
<table>
<tbody>
<tr>
<td><hr /></td>
</tr>
</tbody>
</table>
<p> </p>
<table style="width: 100%; margin: auto;" border="0">
<tbody>
<tr>
<td width="200%"> </td>
<td style="font-weight: bold;" colspan="2" align="center" width="150%"><strong>Grand Total</strong></td>
<td width="75%"> </td>
<td align="right" width="75%"> </td>
</tr>
<tr>
<td width="200%"> </td>
<td width="75%">Currency:</td>
<td width="75%">{$fields.currency_iso}</td>
<td width="75%">Subtotal:</td>
<td align="right" width="75%">{$fields.subtotal}</td>
</tr>
<tr>
<td width="200%"> </td>
<td width="75%"> </td>
<td align="right" width="75%"> </td>
<td width="75%">Discount:</td>
<td align="right" width="75%">{$fields.deal_tot}</td>
</tr>
<tr>
<td width="200%"> </td>
<td width="75%"> </td>
<td width="75%"> </td>
<td width="75%">Discounted Subtotal:</td>
<td align="right" width="75%">{$fields.new_sub}</td>
</tr>
<tr>
<td width="200%"> </td>
<td width="75%">Tax Rate:</td>
<td width="75%">{$fields.taxrate_value}</td>
<td width="75%">Tax:</td>
<td align="right" width="75%">{$fields.tax}</td>
</tr>
<tr>
<td width="200%"> </td>
<td width="75%">Shipping Provider:</td>
<td width="75%">{$fields.shipper_name}</td>
<td width="75%">Shipping:</td>
<td align="right" width="75%">{$fields.shipping}</td>
</tr>
<tr>
<td width="200%"> </td>
<td width="75%"> </td>
<td width="75%"> </td>
<td width="75%">Total</td>
<td align="right" width="75%">{$fields.total}</td>
</tr>
</tbody>
</table>
<p> </p>
<table>
<tbody>
<tr>
<td><hr /></td>
</tr>
</tbody>
</table>

 

I wonder how was prepared HTML code, because counts  of column widths don't match 100%. Is it done by purpose?

 

I would like to hear thoughts from creators of these templates what to consider when developing custom invoice templates, because when proper column count (e.g. width="68%" / width="2%" / width="30%") width is used, 

the layout in preview is broken. 

 

Thank you for help!

Outcomes