@Tor, Liquid was developed for online commerce sites. So many competent web developers can handle Liquid coding.
Well ā¦ I made you a video ( 
) with a small explanation for you. Sorry for my English, I hope you can hear and understand me.
I cleaned up the code a little after the video.
Here is the result:
And here is the code for that.
<table style="padding: 30px; width: 100%">
<thead>
<tr>
<td colspan="99">
<table style="margin-bottom: 20px; width: 100%"><tr>
<td style="font-weight: bold; font-size: 32px; vertical-align: top">{{ title }}</td>
{% if business.logo != null %}<td style="text-align: end"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px" /></td>{% endif %}
</tr></table>
<table style="margin-bottom: 20px; width: 100%"><tr>
<td style="vertical-align: top">
<div style="font-weight: bold">{{ recipient.name }}</div>
{% comment %} ************************************ custom fields block ************************************ {% endcomment %}
<div>
{% for field in custom_fields %}
<strong>{{ field.label }}:</strong> {{ field.text | newline_to_br }}
{% endfor %}
</div>
{% comment %} ************************************ custom fields block ************************************ {% endcomment %}
<div>{{ recipient.address | newline_to_br }}</div>
</td>
<td style="text-align: end; vertical-align: top">
{% for field in fields %}
<div style="font-weight: bold">{{ field.label }}</div>
<div style="margin-bottom: 10px">{{ field.text }}</div>
{% endfor %}
</td>
{% if business.address != null %}
<td style="width: 20px"></td>
<td style="width: 1px; border-left-width: 1px; border-left-color: #000; border-left-style: solid"></td>
<td style="width: 20px"></td>
<td style="width: 1px; white-space: nowrap; vertical-align: top">
<div style="font-weight: bold">{{ business.name }}</div>
<div>{{ business.address | newline_to_br }}</div>
{% for field in business.custom_fields %}
<div>{{ field.label }} {{ field.text }}</div>
{% endfor %}
</td>
{% endif %}
</tr></table>
<div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
</td>
</tr>
<tr>
{% for column in table.columns %}
<td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; text-align: {{ column.align }}; font-weight: bold; padding: 5px 10px; border-bottom-width: 1px; border-bottom-color: #000; border-top-width: 1px; border-top-color: #000; border-top-style: solid; border-bottom-style: solid{% if column.nowrap %}; width: 80px{% endif %}">{{ column.label }}</td>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in table.rows %}
<tr>
{% for cell in row.cells %}
<td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; {% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
{% for column in table.columns %}
<td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid"> </td>
{% endfor %}
</tr>
{% for total in table.totals %}
<tr>
<td colspan="{{ table.columns | size | minus:1 }}" style="text-align: end; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
<td style="border-left-width: 1px; border-left-style: solid; border-left-color: #000; border-right-width: 1px; border-right-style: solid; border-right-color: #000; text-align: right; white-space: nowrap; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
</tr>
{% endfor %}
<tr>
<td colspan="99">
{% if emphasis.text != null and emphasis.positive %}
<div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; border-style: solid; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
{% endif %}
{% if emphasis.text != null and emphasis.negative %}
<div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; border-style: solid; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
{% endif %}
</td>
</tr>
</tbody>
</table>
If you want sometyhing else or further help you can pm me about this.
4 Likes
Why by PM? This forum is to help each other by posting questions and answers so that everyone can benefit from them.
@AntonisV, this is super! works like a charm
@antonisv I did a minor improvement to the code although I have never worked with Liquid before, but code is still just a code 
1
Select Settings / Themes and click View āPlainā
Select copy to New theme
Name the new theme like āSales invoice with Code fieldā and click Create
and now a new custom theme has been created.
2
Select Settings / Themes and click Edit āSales invoice with Code fieldā
As the field Business identifier field has been depricated on Sales invoices it can be replaced with the Code field by swapping words (see figures) and then move the Code field above the address on Sales invoices by swapping lines (see figures) so Sales invoices will look like they always used to.
Before:
After:
3
Select Settings / Form defaults / Sales invoice and tick the checkbox Custom theme and from the dropdown select the new custom theme āSales invoice with Code fieldā.
This ensures the custom theme will be used for all new sales invoices automatically.
I got moderatedā¦ so I told him to use pm. I was saying was that I can help him make a totaly custom invoice. But he made it clear that he doesnāt want such thing in previous messages.
Nice tweak @Tor, note that this way, the code is simpler but it will not show any other field.
The other way it 'll show every field with the order you have set in the custom fields options.
After all this conversation I think a work around about this issue
You can add VAT Number or Social Security Number, or the Customer Identifier to the field
and then change the plain theme from this:
<table style="margin-bottom: 20px; width: 100%"><tr>
<td style="vertical-align: top">
<div style="font-weight: bold">{{ recipient.name }}</div>
<div>{{ recipient.address | newline_to_br }}</div>
to this:
<table style="margin-bottom: 20px; width: 100%"><tr>
<td>
<div><b>{{ recipient.name }}</b></div>
<div>{{ recipient.address | newline_to_br }}</div>
<div>VAT Number {{ recipient.code }}</div>
Of course you can change āVAT Numberā, to whatever you want
1 Like
@pandhm & @Tor you suggested the same thing. I use that field to pass the āBrandnameā. There lurks a small danger about what you are proposing.
A localized custom field, will be future proof. But business code, I am not so sure. Letās say that for some reason the development team, puts a limit to the length of that code (for their reasons). If youāve putten critical information thatās required by the law in there you may face another bad deprecation. Thatās the point of localizations, for every country to have exactly the critical legally binding fields ready for you
@pandhm For the Greek Localization I am writing, cooperating with @lubos, there is a field for VAT that will be used, among with other ones, for myDATA connection.
I believe it 'll be ready with the start of new year. Stay tuned, and donāt use another field, because you 'll do the same task 2 times.
I also have ideas of making a tool for mass transferring between fields when I finish, for all of those that need to transfer data to be able to work with the new localization.
2 Likes