Hello,
If anyone could help me make this HTML code to make it better would be great.
I would like to use PDF button for quick save as pdf file. and also email because it shows be ‘PDF conversion failed’ error.
Also, I would like to see only 2 decimals in the conversion to base currency calculation I have added in the code.
here is the code:
Document .hbs { border-spacing: 2px; border-collapse: separate; } .title { font-size: 2rem; line-height: 3rem; } .en { font-family: "Avenir"; } .bold { font-weight: bold; } .bolder { font-weight: bolder; } .red { color: red; } .ruler { width: 100%; margin: 10px 0; border-bottom: 1px solid #333333 !important; } .blank { width: 100%; margin: 10px 0; } .long-field { width: 60%; } .short-field { width: 300px; } .hbd { border-bottom: 2px dotted #333333 !important; } .table-border { border-bottom: 1px solid black !important; border-top: 1px solid black !important; border-collapse: collapse !important; } </style>
</head>
<body>
<table>
<thead>
<tr>
<td>
<img
src="{{ business.logo }}"
srcset=""
style="width: auto; height: 30mm"
/>
</td>
</tr>
{% assign BTW = "" %}
{% assign no = "" %}
{% assign street = "" %}
{% assign town = "" %}
{% assign city = "" %}
{% assign country = "" %}
{% assign Btelephone = "" %}
{% assign Bemail = "" %}
{% for field in business.custom_fields %}
{% case field.label %}
{% when "BTW" %}
{% assign BTW = field.text %}
{% when "no" %}
{% assign no = field.text %}
{% when "street" %}
{% assign street = field.text %}
{% when "town" %}
{% assign town = field.text %}
{% when "city" %}
{% assign city = field.text %}
{% when "country" %}
{% assign country = field.text %}
{% when "Btelephone" %}
{% assign Btelephone = field.text %}
{% when "Bemail" %}
{% assign Bemail = field.text %}
{% endcase %}
{% endfor %}
{% assign invoice_type = "invoice" %}
{% assign exchange_rate = 0 %}
{% assign company = "" %}
{% assign accname = "" %}
{% assign bank_name = "" %}
{% assign bank_addr = "" %}
{% assign bank_no = "" %}
{% assign term = "" %}
{% assign Note = "" %}
{% for field in custom_fields %}
{% case field.label %}
{% when "company" %}
{% assign company = field.text %}
{% when "exchange_rate" %}
{% assign exchange_rate = field.text %}
{% when "invoice_type" %}
{% assign invoice_type = field.text %}
{% when "accname" %}
{% assign accname = field.text %}
{% when "bank_name" %}
{% assign bank_name = field.text %}
{% when "bank_addr" %}
{% assign bank_addr = field.text %}
{% when "bank_no" %}
{% assign bank_no = field.text %}
{% when "term" %}
{% assign term = field.text %}
{% when "Note" %}
{% assign Note = field.text %}
{% else %}
{% endcase %}
{% endfor %}
<tr>
<td colspan="99">
<center>
<div class="title en bold">{{ business.name }}</div>
<div class> Trade name of Gordhan Dhanani</div>
<span class="en">Identification number (BTW): </span>
<span class="en bolder">{{ BTW }}</span>
</center>
</td>
</tr>
<tr>
<td colspan="99">
<table class="hbs">
<tr colspan="1">
<td rowspan="1" style="width: 90px"></td>
<td class="en" colspan="99">
</td>
</tr>
<tr class="en">
<td>Address:</td>
<td class="hbd">{{ business.address }}</td>
<td>Office No:</td>
<td class="hbd"> <span>{{ no }}</span></td>
</tr>
<tr class="en">
<td>Town/District:</td>
<td class="hbd">{{ town }}</td>
<td>Province/City:</td>
<td class="hbd">{{ city }}</td>
</tr>
<tr class="en">
<td>Telephone No:</td>
<td class="hbd">{{ Btelephone }}</td>
<td style="width: 80px">Country:</td>
<td class="hbd">{{ country }}</td>
</tr>
<tr class="en">
<td>Email:</td>
<td class="hbd">{{ Bemail }}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="99">
<div class="ruler"></div>
</td>
</tr>
<tr>
<td colspan="99">
<center>
</center>
</td>
</tr>
<tr>
<td colspan="99">
<center>
<div class="title bold en">
{% if invoice_type == "tax_invoice" %}
TAX INVOICE
{% else %}
INVOICE
{% endif %}
</div>
</center>
</td>
</tr>
{% assign issued_date = "" %}
{% assign due_date = "" %}
{% assign invoice_no = "" %}
{% for field in fields %}
{% if field.label == "Invoice date" %}
{% assign issued_date = field.text %}
{% endif %}
{% if field.label == "Due date" %}
{% assign due_date = field.text %}
{% endif %}
{% if field.label == "Invoice number" %}
{% assign invoice_no = field.text %}
{% endif %}
{% endfor %}
{% assign ctelephone = "" %}
{% assign cBTW = "" %}
{% for field in custom_fields %}
{% case field.label %}
{% when "cBTW" %}
{% assign cBTW = field.text %}
{% when "ctelephone" %}
{% assign ctelephone = field.text %}
{% endcase %}
{% endfor %}
<tr colspan="1">
<td rowspan="1" style="width: 90px"></td>
<td class="en" colspan="99">
</td>
</tr>
<tr>
<td colspan="99">
<table class="hbs">
<tr colspan="1">
<td rowspan="1" style="width: 90px"></td>
<td class="en" colspan="99">
</td>
</tr>
<tr class="en">
<td>Company:</td>
<td class="hbd">{{ recipient.name }}</td>
<td>Invoice No:</td>
<td class="hbd"> <span>{{ invoice_no }}</span></td>
</tr>
<tr class="en">
<td>Address:</td>
<td class="hbd">{{ recipient.address }}</td>
<td>Date of Issue:</td>
<td class="hbd">{{ issued_date }}</td>
</tr>
<tr class="en">
<td>BTW:</td>
<td class="hbd">{{ cBTW }}</td>
<td style="width: 80px">Term:</td>
<td class="hbd">{{ term }}</td>
</tr>
<tr class="en">
<td>Email:</td>
<td class="hbd">{{ recipient.email }}</td>
<td>Due Date:</td>
<td class="hbd"><span class="red en bold">{{ due_date }}</span></td>
</tr>
<tr class="en">
<td>Telephone No:</td>
<td class="hbd">{{ ctelephone }}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="99">
<div class="blank"></div>
</td>
</tr>
<tr>
{% for column in table.columns %}
<td
class="en bold text-{{ column.align }} border-start{% if forloop.last == true %} border-end{% endif %}"
style="font-weight: bold; padding: 5px 10px; border-bottom-width: 1px; border-top-width: 1px{% 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
class="text-{{table.columns[forloop.index0].align}} border-start{% if forloop.last == true %} border-end{% endif %}"
style="padding: 5px 10px; {% 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
class="border-start{% if forloop.last == true %} border-end{% endif %}"
style="border-bottom-width: 1px"
>
</td>
{% endfor %}
</tr>
<tr>
<td colspan="99">
<table>
<td colspan="99">
<table>
<tr style="border: 1px solid black; border-collapse: collapse">
<td rowspan="1"; colspan="99" style="width: 15%; border: none" class="en">
<p class="bold" style="margin-top:5px"; "margin-bottom:0px">Bank Information for remittance of payment:</p>
<p style="margin-top:-10px"; "margin-bottom:0px">Bank Name: {{ bank_name }}</p>
<p style="margin-top:-10px"; "margin-bottom:0px">Bank address: {{ bank_addr }}</p>
<p style="margin-top:-10px"; "margin-bottom:0px">Account Name: {{ accname }}</p>
<p style="margin-top:-10px"; "margin-bottom:0px">Account No: {{ bank_no }}</p>
</td>
</tr>
<span class="en bolder">***ALL BANK CHARGES AND INTERMIDIATE BANK CHARGES MUST BE INCLUDED***</span>
</tr>
<tr>
{% for total in table.totals %}
<td class="en" colspan="5" style="border-collapse: collapse; vertical-align: middle; text-align: left; padding-right: 10px;">Total amount in words:
<span class="en bold" {% if total.emphasis == true %}; font-weight: bold{% endif %}> {% capture amount %}
{% for total in table.totals %}
{% if total.label == "Total" %}
{{ total.text }}
{% endif %}
{% endfor %}
{% endcapture %}
{% capture anc %}
{% for total in table.totals %}
{% if total.label == "Total" %}
{% assign an=total.number %}
{% endif %}
{% endfor %}
{% endcapture %}
{% capture amount_in_words %}
{% for total in table.totals %}
{% if total.label == "Total" %}
{{ total.number | spell_out }}
{% endif %}
{% endfor %}
{% endcapture %}
{% capture cents%}
{{an| plus: 0 | modulo: 1| times: 100 | round: 0}}
{%endcapture%}
{% capture cents_in_words %}
{% if cents != "0" %}{{cents|prepend: " and " | append: "/100 "}}
{%else%} Only
{% endif %}
{% endcapture %}
{{amount_in_words}}{{cents_in_words}} </span></td>
</tr>
<tr>
<td style="border-bottom: 2px solid black; border-collapse: collapse; vertical-align: middle;"><span class="en bold" {% if total.emphasis == true %}; font-weight: bold{% endif %}>Grand {{ total.label }}</span></td>
<td style="border-bottom: 2px solid black; border-collapse: collapse; vertical-align: middle; text-align: right; padding-right: 10px;"><span class="en"></span><span class="en bold" {% if total.emphasis == true %}; font-weight: bold{% endif %}>{{ total.text }}</span></td>
</tr>
<tr style="background: #cccccc; font-weight: bold !important;">
<td style="border-bottom: 1px solid black; border-collapse: collapse; vertical-align: middle;"><span class="en"> Grand Total in EURO</span></pre></td>
{% assign grandr = total.number| divided_by: exchange_rate %}
<td style="border-bottom: 1px solid black; border-collapse: collapse; vertical-align: middle; text-align: right; padding-right: 10px;"><span class="en">€ </span><span class="en">{{ grandr }}</span></td>
</tr>
{% endfor %}
</table>
<tr>
<span class="en bold">Exchange Rate 1 EURO: </span>
<span class="en bold"> $ {{ exchange_rate }}</span>
</tr>
</td>
</table>
</td>
</tr>
<tr>
<td colspan="99">
<table style="width: 90%;">
<tr>
<td style="height: 180px; width: 300px; border-bottom: 2px dotted black;">
</td>
<td style="height: 180px; width: 200px"></td>
<td style="height: 180px; width: 300px; border-bottom: 2px dotted black;"></td>
</tr>
<tr>
<td><span class="en">Receiver Signature & Name</span><br/><br/></td>
<td><br/><br/></td>
<td><span class="en">Issuer Signature & Name</span><br/><br/></td>
</tr>
<tr>
<td colspan="3"><span class="en"><span class="bold">Note:</span> {{ Note }} </span></td>
</tr>
<tr>
<td colspan="2">
<div class="en" style="font-weight: bold; padding-top: 20px">
VRIJSTELLING VAN BTW </div>
<p>Art42 par. 4 v/h BTW wetboek
<br>Aanschrijving n⁰ 108/1971
</p>
</td>
</tr>
<tr>
<td colspan="99">
<p class="en" style="font-style: italic; padding-top: 10px">The diamonds herein invoiced have been purchased from legitimate sources not involved in funding conflict,
in compliance with United Nations Resolutions and corresponding national laws of Belgium.
The seller hereby guarantees that these diamonds are conflict free and confirms adherence to the WDC SoW Guidelines.
</p>
</td>
</tr>
{% for field in exchange.rate %}
<tr>
<td class="en"><p>{{ exchange.field }}</p></td>
<td class="en"><p>test</p></td>
</tr>
{% endfor %}
</table>
</td>
</tr>
</tbody>
</table>
</body>
