KSA QR code not working in custom theme

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
<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 id="BusinessName" style="font-weight: bold">{{ business.name }}</div>
                          <div>{{ business.address | newline_to_br }}</div>
                        {% for field in business.custom_fields %}
						  <div<h4><strong>"الـــــــــــرقم الضـــــــريــــــبي"</strong></h4>	</div><div id="d96d97e8-c857-42c6-8360-443c06a13de9" style="font-weight: bold">{{ 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>

That shouldn’t work and this is not surprising since you didn’t include any of the attributes described in post #6.

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:

  1. add {% if total.label == "X" %} id="Total"{% endif %} in order for it to recognize the total.

  2. add {% if total.label contains "Y" %} class="taxAmount"{% endif %} in order for it to recognize the tax.

  3. 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”

1 Like

hi Ealfardan

I have solved the issue using qr code with the custom theme but I have faced problems in vat amount.

class=“taxAmount” {% endif %} data-value=“{{ total.number }}”

if I use the class tax amount and data value = total number the total amount will appear instead of vat amount.

Was your tax 0?

no my tax is not 0. it is the value

The error you’re getting is Not a Number which made me wonder it was null since no VAT tag is found. But that doesn’t seem to be the case.

Maybe if you share the theme segment where you injected the taxAmount, maybe then the error would be more apparent.

 <td {% if total.emphasis == true %}; id="Total" {% endif %} data-value="{{total.number}}" colspan="{{ table.columns | size | }}" style="padding-right: 15px; padding-top: 10px; padding-bottom: 5px; text-align: right{% if total.emphasis == true %}; font-weight: bold; font-size: 16px{% endif %}">{{ total.label }}</td>

            

            <td {% if total.emphasis == true %}; class="taxAmount" {% endif %} data-value="{{total.number}}" style="width: 21%; border-bottom-width: 5px; border-color: #02123a; white-space: nowrap; padding-top: 10px; padding-bottom: 5px; text-align: right; padding-right: 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>

            

This is your problem

The id shouldn’t be conditional on emphasis. The problem is only apparent with tax amount since it isn’t emphasized.

Remove the if statement and it should work.

solved thanks :wink:

can you write code for vat only

            <td { total.emphasis == true }; class="taxAmount"  data-value="{{total.number}}" 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>

my code

:wink: :wink: :wink: :wink:

            <td {% if total.label contains "VAT" %} class="taxAmount" {% endif %} data-value="{{total.number}}" style="width: 21%; border-bottom-width: 5px; border-color: #02123a; white-space: nowrap; padding-top: 10px; padding-bottom: 5px; text-align: right; padding-right: 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>

can you share theme

Posting private data on a public forum is not very wise.