I made a custom theme but have a problem when reading it by a QR reader in KSA
The QR not showing the name, VAT number, total amount with vat and vat value
Can I share the code of my custom theme here to get advice by seeing if there is an error in my codes?
Thank you
Sure you can. But before you proceed with customizing a theme, you should know that themes are being phased out in favor of a newer customization tool.
Also, have you checked this post for making KSA QR codes read your custom themes? Since it could be possible that your issue was already addressed there.
I use custom then qr code is appear but not showing vat number vat amount and totall amount invoice and also not showing selller name.if i use plain theme then qr code showing all thing corectly
[Screenshot_20220601-234616]
<table style="padding: 30px">
<thead>
<tr>
<td colspan="99">
<table style="margin-bottom: 20px"><tr>
<td style="font-weight: bold; font-size: 32px">{{ title }}</td>
{% if business.logo != null %}<td style="text-align: right"><img src="{{ business.logo }}" style="max-height: 170px; max-width: 340px"></td>{% endif %}
</tr></table>
<table style="margin-bottom: 20px"><tr>
<td>
<div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
<div>{{ recipient.address | newline_to_br }}</div>
<div>{{ recipient.identifier }}</div>
</td>
<td style="border-right-width: 1px; padding-right: 20px; text-align: right">
{% for field in fields %}
<div style="font-weight: bold">{{ field.label }}</div>
<div style="margin-bottom: 10px">{{ field.text }}</div>
{% endfor %}
</td>
<td style="padding-left: 20px; width: 1px; white-space: nowrap">
<div style="font-weight: bold">{{ business.name }}</div>
<div>{{ business.address | newline_to_br }}</div>
<div>{{ business.identifier }}</div>
</td>
</tr></table>
<div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
</td>
</tr>
<tr>
<td style="font-weight: bold; padding: 5px 10px; text-align: center; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px; width: 1px">#</td>
{% for column in table.columns %}
<td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in table.rows %}
<tr>
<td style="padding: 5px 10px; text-align: center; border-left-width: 1px; width: 1px">{{ forloop.index0 | plus:1 }}</td>
{% for cell in row.cells %}
<td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td style="border-bottom-width: 1px; border-left-width: 1px"> </td>
{% for column in table.columns %}
<td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}"> </td>
{% endfor %}
</tr>
{% for total in table.totals %}
<tr>
<td colspan="{{ table.columns | size }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
<td style="border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
</tr>
{% endfor %}
{% for field in custom_fields %}
<tr>
<td colspan="99">
<div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
<div>{{ field.text | newline_to_br }}</div>
</td>
</tr>
{% endfor %}
{% if emphasis.text != null and emphasis.positive %}
<tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
{% endif %}
{% if emphasis.text != null and emphasis.negative %}
<tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
{% endif %}
</tbody>
</table>
<div style="position:relative;text-align:center;border:0px solid black; float:right; width:250px; height:90px; ">
<div style="position: absolute; top: 0; right:0; left:0;"><b>Name & Signature الاسم و التوقيع</b></div>
<div style="position: absolute; bottom: 0;right:0; left:0;"><i>....................................................</i>
</div>
</div>
eko
September 11, 2022, 7:38am
5
Please read Themes moved under "Obsolete Features"
This item has also been covered in the Manager Newsletter (you can subscribe to Updates via Manager.io (footerspace right).
Thanks, eko for your reply
I am using the desktop edition, my MacBook pro is old and can handle only manager version 22.1.44
For this am still using the themes
eko
September 11, 2022, 8:21am
7
Consider installing Linux such as Ubuntu 16.04 LTS (64-bit) or newer on your older Mac either using “Dual Boot” or a virtual environment such as Parallels (my preference). This will allow you to use the latest versions of Manager.
1 Like
There none of the required id
, class
and data-value
tags required for the theme to get the QR code.
These are the tags required:
Ok, The QR code requires your theme to have the following html attributes for the following fields:
Field
HTML tag attributes
Business Name
id = ‘BusinessName’
TRN
id = ‘d96d97e8-c857-42c6-8360-443c06a13de9’
Invoice Total
id = ‘Total’data-value = ‘{{total.number}}’
VAT Total
class = ‘taxAmount’data-value = ‘{{total.number}}’
If you include those into your html, the QR code should read fine.
This is an example on how to get Business Name and TRN to work:
For example, the business name is contained within a <div>
tag as follows:
<div style="font-weight: bold">{{ business.name }}</div>
You need to add the id "BusinessName"
to it, so it becomes:
<div id="BusinessName" style="font-weight: bold">{{ business.name }}</div>
Try your best at it post your best attempt so other members can help you fix any issues.
This is an example on how to get the amounts to work:
For example, for total, take this line in your theme:
<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>
You need to:
add {% if total.label == "X" %} id="Total"{% endif %}
in order for it to recognize the total.
add {% if total.label contains "Y" %} class="taxAmount"{% endif %}
in order for it to recognize the tax
add data-value="{{ total. number }}"
The end result is this:
<td {% if total.label == "X" %} id="Total" {% endif %}{% if total.label contains "Y" %} class="taxAmount"{% endif %} data-value="{{ total. number }}" colspan="{{ table.columns | size | minus:1 }}" style="text-align: end; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
Change the X to the label of total and change Y to the tax id string, eg. “VAT”
4 Likes
Thank you, my friend
You are amazing
all information is done, and I still have a problem with VAT id number
1 Like
The div for TRN isn’t there by default, so you will have to create a div for it and add the id to it:
<div id='d96d97e8-c857-42c6-8360-443c06a13de9'>{{ business.custom_fields['الرقم الضريبي'] }}</div>
You may need to make adjustments to your theme to handle the duplication of the TRN.
1 Like
Thank you very much brother
You solved my problem and everything is correct now
1 Like