Format Invoice

Report · Jun 27, 2012

How can I format my invoices so that lists of purchased item details match up, unlike the photo below? Our invoices are almost impossible to read when more than a few items are listed. But it appears that each BC tag under the order summary creates its own vertical list without reference to other details of the same item. I know my way around CSS and HTML, and manage with Javascript, but I don't see a way to style this to make it more coherent.

Report · Jun 27, 2012

The workflow uses the invoice layout, the same as the email invoice. SO under system emails - invoice. You can work on the structure and style in there.

You can of course access it via FTP too.

As you probably know you do inline styles for emails, no javascript of course

You can adjust the quanitity td's to have less width, maybe drop the font in a few places too.

Another option is to re-do the whole workflow notification layout, it has a restricted width so if it is an issue for you when getting orders, you can redo the whole thing to have a more fluid with or horizontal paper print format if you like. You need to do it in a way that for other forms it looks fine still as well.

It is up to you really, depends on what your after exactly and have a play with the code to get it how you need.

Report · Jun 29, 2012

Thanks for the response, Liam. Adobe support basically dismissed my problem as a CSS/Html issue outside their purview and suggested that I take a look at this thread. Funny. But I don't know if it is essentially a CSS/Html issue. If it is, I can't figure a way around it. It has more to do with the way BC tags are parsed into html. Here is my response to support's reply. If I am missing something obvious, maybe someone can point it out:

I would say this isn't so much about HTML/CSS as it is about the way that BC parses the tags on the Invoice template. The invoice places each of the tags in a single table td, but when it parses those tags for several items, it appears to spit out lists into each single td rather than keeping each list item as a separate td in a single table row. So the detail columns and rows of the purchased items don't match up.

I've tried every way that I can think of to work around this using html and css, but nothing seems to work. Furthermore the process is frustrating as I can't even view how BC actually parses the code. When I look at the source of the invoice and workflow emails generated, it appears encrypted, so I can't actually see how it is behaving.

In addition, there does not seem to be a way to preview the template changes without generating an actual sale. This is less than ideal, as I have to keep making purchases on my own credit card to test the changes, and then go through the process of refunding all those sales.

As I can neither see the code generated by the Invoice template when parsing actual lists of sale items, nor test the process without making actual purchases, even if it were an html/css issue and not a function of the BC tags, it would still be cumbersome to say the least.

If you look at my Invoice template, and the list that results (the example in my first post above) you will see the problem. I need to have the results of the {tag_productname}, {tag_custom1}, {tag_productextaxamount}, {tag_productquantity}, and {tag_producttotalextax} tags line up in coherent rows in a list of purchased items.

Surely I can't be the only one with this problem. If so, I must be missing something obvious.

Report · Jun 29, 2012

The email is not encrypted, thats the data the email is sent as. There are several plugins for thunderbird for example to view the html of an invoice. You can also go into the admin and to an order and when you view the invoice there for printing, it is the same layout being used.

In terms of preview, accessing the layout via the preview in my coda for example, works just fine as another check too. Ultimatly you do need to email and do the process and see how it looks though, you wil always, and also for different email clients too.

For me, I do what I want and have got these looking very nice, by default the invoice is not bad anyway. You not shown any examples of your code so it is hard to say what your doing or not doing on that front but it can be done and is done by others.

Report · Jul 02, 2012

Thanks, Liam. Your tip about going to the order section of admin and choosing print was very helpful. That allows me to see both the layout of the invoice as it will be rendered by BC and the source html. Great!

However, the basic problem still remains. I can't style the output for the purchased item list details of the invoice because the html I need to style is not generated by the invoice template but by the BC tags inserted into the template (such as {tag_productname}, {tag_custom1}, {tag_productextaxamount}, {tag_productquantity}, and {tag_producttotalextax}).

Each of these tags generates a series of divs like <div class="productitemcell">item detail</div> that are placed vertically into a single td in my table. But many of our inventory items have text strings (title, author) that are long and will flow over onto a second line within the div. So when the content of the table is generated, I end up with a single row of several tds, one for each BC tag, each of which contains the series of divs generated by the given tag, some of which flow over onto second lines. So the item details in the table do not line up horizontally for any given item. As in the original picture above.

Here is the relevant code from the Invoice template:

<tbody>

<tr>

<td valign="top" style="width: 45%;"><span style="text-decoration: underline;">Title</span></td>

<td valign="top" style="width: 20%;"><span style="text-decoration: underline;">Author</span></td>

<td valign="top" style="width: 5%;"><span style="text-decoration: underline;">Price</span></td>

<td valign="top" style="width: 5%;"><span style="text-decoration: underline;">Quantity</span></td>

<td valign="top" style="width: 5%;"><span style="text-decoration: underline;">Total</span></td>

</tr>

<td valign="top" style="width: 45%;">{tag_productname}</td>

<td valign="top" style="width: 20%;">{tag_custom1}</td>

<td valign="top" style="width: 5%;">{tag_productextaxamount}</td>

<td valign="top" style="width: 5%; text-align: center;"> {tag_productquantity}</td>

<td valign="top" style="width: 5%;"> {tag_producttotalextax}</td>

</tr>

</tbody>

</table>

And here is what gets generated when there are several items in the invoice:

<tbody>

<tr>

<td valign="top" style="width: 45%;"><span style="text-decoration: underline;">Title</span></td>

<td valign="top" style="width: 20%;"><span style= "text-decoration: underline;">Author</span></td>

<td valign="top" style="width: 5%;"><span style= "text-decoration: underline;">Price</span></td>

<td valign="top" style="width: 5%;"><span style= "text-decoration: underline;">Quantity</span></td>

<td valign="top" style="width: 5%;"><span style= "text-decoration: underline;">Total</span></td>

</tr>

<div class="productitemcell">American Indians and the Law</div>

<div class="productitemcell">A Song for the Horse Nation - Horses in Native American Cultures</div>

<div class="productitemcell">The Porcupine Year</div>

<div class="productitemcell">A Nation within a Nation - Voices of the Oneidas in Wisconsin</div>

<div class="productitemcell">Art in Our Lives - Native Women Artists in Dialogue</div>

<div class="productitemcell">Native American Clothing : An Illustrated History</div>

<div class="productitemcell">Greet the Dawn: The Lakota Way</div>

</td>

<div class="productitemcell">N. Bruce Duthu</div>

<div class="productitemcell">National Museum of the American Indian</div>

<div class="productitemcell">Louise Erdrich</div>

<div class="productitemcell">L. Gordon McLester III and Laurence M.Hauptman</div>

<div class="productitemcell">Cynthia Chavez Lamar and Sherry Farrell Racette (eds)</div>

<div class="productitemcell">Theodore Brasser</div>

<div class="productitemcell">S. D. Nelson</div>

</td>

</td>

</td>

</td>

</tr>

</tbody>

</table>

As both {tag_productname} and {tag_custom1} can generate longer strings of text, I need a way either to line up the lists of divs created by the tags in the td columns so that the name, author, price, quantity and total of each purchased item align horizontally across the page OR I need a way to limit the height of <div class="productitemcell"> cutting off any text that would flow to the next line.

Gmail accepts only inline styles. Any CSS placed in the head of the email will be ignored. But I can't style <div class="productitemcell"> because those divs don't even exist until they are generated by the BC tags when the invoice is created. And as these invoices are sent as emails, I need to limit the width of the item table to about 600px.

Do you see the problem?

So it is a CSS/html problem, but it is a problem generated by the BC tags. Reverting to the invoice template default doesn't change the basic issue. And I am not seeing a workable solution.

Adobe ticket support is no use. They suggest using js and css, which are "outside the scope of support", and then offer links to css basics tutorials. As you mentioned, javascript is irrelevant for emails, and I am not seeing a way to apply an inline style to a div that doesn't exist in the invoice template. Maybe there is another way to do this that I am overlooking.

Any further suggestions are greatly appreciated!

.

Report · Jul 03, 2012

This is indeed a problem with the way the invoice and the cart are rendered and there is no way around it, at least for the invoice. The way it's rendered is somewhat incorrect. Each product should be inside its own TR so that you can style it better. But there's no way to render the invoice like that at this stage. And as you have mentioned, any styles placed inside the invoice will be removed by certain email clients, such as Gmail.

I'm sorry to say this but I don't think there's anything you can do, other than specifying that set height on those productitemcell classes so that it will at least work for those clients which don't strip your CSS.

-mario

Report · Jul 03, 2012

Thanks for confirming this problem, Mario. Indeed, each product should be in its own TR. I will just have to live with it for now, unless I can come up with some creative workaround.

Report · Jul 03, 2012

You are right the output is not ideal and some issues can occur but we have invovices going on our sites look really sharp, You can adjust the inline styles etc to get a good layout. I do not run into the level of issues you seem to have and sorry can not help on making that better

Report · Jul 03, 2012

I think our invoices look sharp overall, I am just running into this one issue of product details misaligning because I can't apply an inline style to the relevant divs. So any invoice tag output that flows over into a second line in the div messes up the overall product list layout.

If you can post examples of how you get around this on your invoices, I would love to see them! Perhaps there is some way of reconstructing the product list table that is escaping me.

Thanks.

Report · Jul 03, 2012

You can do head css and target them, of course that does not work for every email client but it does for most.

Report · Oct 29, 2012

Mario,

OK, some email clients will strip the embedded CSS from the invoice. I might be able to live with that, but I just found out that BC webmail does the same thing! Surely BC should be able to do something about that! The BC invoice should at least be compatible with BC webmail! Wouldn't you agree with that? Or am I going to have to embarrass myself and tell my client that they are not compatible?

- Jim

Report · Oct 29, 2012

Hi Jim,
No, Inline css is what you do to be most compatable. Style in the head is not read by a number of email clients.

If full text only has been forced by the user in the client no HTML will render.

Invoices I do come out great even in BC webMail.

Report · Oct 29, 2012

Liam,

Thanks for your help, but this issue cannot be resolved with inline css. The following html is system generated and cannot be modified with inline css:-

The <td> tag below can be modified as it is part of the static html in the invoice template, but makes no difference.

If your BC invoices look OK in BC webmail, then it is probably because your product names are short and do not wrap around to occupy two lines.

Report · Oct 29, 2012

I do not style it much.

An invoice is something to be printed so I have created an invoice that can be branded at the top, has information at the bottom per company but prints out and looks great in both the email and print.

There is always the case for doing to much with it considering what it is.

In terms of what you mentioned with the product names - Nope, fixed this issue too Like I said, the invoice is formed to fit right great.

Report · Oct 29, 2012

That is great, Liam.

So how did you form the invoice so that long product names do not wrap around to occupy two lines? Would you please show us an example?

Report · Oct 29, 2012

Lots of wasted space and width for elements like the stock amount, pricing that are too big, reducing those and tweaking it heaps to give maximum space.
I follow up with non inline css as well to make it even better for the clients that do read it, but even without its readable and printable. Your not far off.

Things like Author though, that really needed on an invoice? Unit price can be less width, quanity you can make qty and less width by heaps for example.

Report · Oct 31, 2012

@Liam. So your strategy is to try to make it all fit in terms of width, not that you have discovered a way to style the automatically generated <div class="productitemcell">. I don't think that will work for us as we primarily sell books and many of them have rather long titles. Glad it is working for you.

Report · Feb 27, 2014

Hi,

Is there any plan to fix this soon so each line item is within its own <tr>?

This is causing lots of problems for me and displaying an image at the correct height in the invoice.

Thanks

Madeleine

Report · Apr 04, 2013

Thanks to Liam for the idea of using the print preview as a way to get an idea of what the invoice was going to look like. This issue was also bothering me and I kind of worked around it by putting a height and line-height on the .productitemcell class. I added it to the other styles embedded in the layout already. It seems to have worked for our use but not ideal. It would be nice if BC would address it and set each item to be on a row of it's own. But putting it in a tr might not be ideal for users who don't want to use a table to display their data. Generating a list might be an option. At least then we could manipulate the list item to try and get the various categories to line up. It wouldn't be much different than the class used now but an idea.

Report · May 18, 2016

This issue has been around since I started using BC and still irritates me that Adobe has not addressed or fixed this. Why has this been left to the side as just good enough? As Mario pointed out years ago... "Each product should be inside its own TR so that you can style it better." Adobe, its time to start working on your punch list and get your poop in a group.

Report · Jun 15, 2016

I'd really like to see this fixed too. Such a stupid problem to have hanging around for so long.

BC get liquid working in emails so we can fix this layout issue ourselves.

Report · Jul 07, 2016

I totally agree.... this issue with invoice/quote layouts and how BC insists on laying them out is beyond even archaic... it's downright deplorable coding and should have been fixed years agoi so how about someone getting off their butt and dealing with this problem as I am tired of having to try and explain this to clients who choose to use product code and descriptions beyond 12 characters

Adobe Community

Format Invoice