Knowledgebase: Warehouse management
Highlighting Multiple Orders on a HTML Invoice
Posted by Jack Liptrott on 17 Dec 2013 15:23

Last Modified by Adam Roberts on 26 Jan 2017 15:25

Open up the invoice template in StoreFeeder ('Settings > Warehouse > Invoice Templates' and then click on the template you want to adjust).

 

To have this on an invoice a token needs to be added in the HTML section, so in the body tab, change the option at the bottom to HTML, this will bring up the markup for the invoice.  Within the {LOOP} section (the token can only be added in the loop section), find the section you wish to highlight. 

Once this has been identified, if not already there add ' style=”” ' after the element name then between the quote marks add {HighlightMultiple}, the token will be able to be found in the list to the right.  This will inject the necessary styling into the invoice when the invoice is printed. Then all you need to do is save the invoice, and the process will work straight away.

If you are looking to add the highlight around the quantity value then you can use the following mark up:

 

<td style="width: 15%; padding: 2mm; border-bottom-width: 0.5mm; border-bottom-style: solid; border-bottom-color: #aaaaaa; text-align: center;"><div style="height:50%; width:50%; margin-left:auto; margin-right:auto;vertical-align:middle;{HighlightMultiple}">{QtyOrdered}</div></td>

 

Notice the additional div tag within the <td> tag (the remaining style attributes just set the height, width and then centre the box) which outputs the image above.

To highlight the table cell, like the picture above add the appropriate mark-up in the <td> element in the HTML e.g. <td style="{HighlightMultiple}">{QtyOrdered}</td>.

 

If your table cell already has some style attributes in e.g:

<td style="width: 15%; padding: 2mm; border-bottom-width: 0.5mm; border-bottom-style: solid; border-bottom-color: #aaaaaa; text-align: center;”> QtyOrdered}</td>. 

The token can just be added after the last attribute i.e. <td style="width: 15%; padding: 2mm; border-bottom-width: 0.5mm; border-bottom-style: solid; border-bottom-color: #aaaaaa; text-align: center;{HighlightMultiple}">{QtyOrdered}</td>.

 

To change the background of the entire row the token needs to be added to the <tr> element e.g. <tr style=”{HighlightMultiple}”>. This will produce an effect like the image above.

(0 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments: