KSA QR code not working in custom theme

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.

Thankyou sir

You’re welcome.

Just as a note, use the last class both for VAT 5% and VAT 15% totals.

1 Like

I have the same problem, can you solve it?

<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">
						  <h4><strong>&quot;بيانات العميل&quot;</strong></h4>
						</div>
                      <div style="font-weight: bold">  اسم العميل {{ recipient.name }}</div>
                        <div>{{ recipient.address | newline_to_br }}</div>
                        <div>{{ recipient.identifier }}</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">
						  <h4><strong>"بيانات المورد"</strong></h4>
						</div>
                        <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">&nbsp;</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 %}

        {% 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 %}

        <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>
1 Like

Welcome to the forum @Mohamed_Abd_Elazeem

Please note that writing and debugging custom themes and reports is the responsibility of the user. It’s okay for users to ask the forum for help to fix a particular issue but it’s not realistic to expect other forum members to do the full work or a big portion of it. Please refer to forum’s community guidelines for more information.

That aside, the way to make Manager the localization understand your theme is to label your html elements (tags) as follows:

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.

2 Likes

Thank you

Businees name i added but not understand how i add trn totall invoice and vat value

Follow the same logic as you did for the business name and the fields shown by @Ealfardan

Were i add not understand becuase in theme i not see trn and tax value

This needs a little bit liquid coding to identify those tags. It’s doable but you’ll probably need to hire a developer to do it for you.

In case this helps, you can refer to this resource on liquid templates.

Can you send me theme .i want to use custom theme with qr code

Custom theme development is your own responsibility.

I develope theme already but not showing trn and vat value and totall amount .can you tell how i add this

As stated in the FAQ, post the code for your best attempt and a screen shot of the result. Forum members will likely help you with specific problems. But they will not develop themes for you.

2 Likes

I apologize for missing out a vital piece of information which was the data-value attribute. This is what caused the QR code not to display the amount.

I have edited the post to include those additional attributes:

1 Like

I do this same trn is showing but vat value and totall invoice are not showin in qr code

Only the tax value remains and the total amount did not appear when reading the code
I can’t write the code for it

You can share the theme so we can take a closer look at what went wrong.

1 Like