80mm Thermal Printing

Ealfardan · November 19, 2021, 10:12am

Try using this entire theme code instead:

<table style="background-color: #FFFFFF: width: 404px; color: #000000; text-transform: UPPERCASE\lowercase ;font-size:18px">
{% assign description = null %}
{% assign qty = null %}
{% assign unit price = null %}
{% assign amount = null %}
<thead>
  <tr>
    <td>
     <div style="text-align: center; width: 404px; word-wrap: break-word; margin-top: 10; margin-bottom: 10px">
        <div style="font-size: 30px; font-weight: bold; margin: 5px 0 10px 0">{{ business.name }}</div>
         <div>{{ business.address | replace: "\n", " " }}</div>
         <div style="border: 1px solid #000; width: 404px; height: 1px"></div>
        <div style="font-weight: bold; margin-top: 5px">Customer:<span style="font-weight: normal">{{ recipient.name }}</span></div>
 <tr>
   <td>
       <div style="text-align: left; width: 404px; word-wrap: break-word; margin-bottom: 5px">
        {% for field in fields %}
       <div style="display: inline-block">
        <div style="font-weight: bold; float: left; margin-right: 1px">{{ field.label }}: </div>
        <div style="float:left; margin-bottom: 5px; margin-right: 1px">{{ field.text }}</div>
      </div>
      {% endfor %}
    </td>
   <tr>
  <div style="width: 404px; word-wrap: break-word; margin-bottom: 10px">
    <div style="max-width: 100%; margin: 0 auto">

    </div>
    <td style="font-weight: bold; color: #000000; width: inherit; margin: 0 auto;">
      <div style="width: 404px;">
      <div style="border: 1px solid #000; width: 404px; height:1px"></div>
       {% for column in table.columns %}
            {% case column.label %}
                {% when 'Description' or '<<Prortogese Description>>' %}
                    {% assign description = forloop.index0 %}
                    <span style="padding-left: 0px; display: block; text-align: left; word-wrap: break-word; width: 35%; float:left">{{ column.label }}</span>
                {% when 'Qty' or '<<Portogese Qty>>' %}
                    {% assign qty = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 15%; float:left">{{ column.label }}</span>
                {% when 'Unit price' or '<<Portogese Unit price>>' %}
                    {% assign Unitprice = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 20%; float:left">Rate</span>
                {% when 'Total' or 'Amount' or '<<Portogese Total>>' or '<<Portoguese Amount>>' %}
                    {% assign amount = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 30%; float:left">Amount</span>
            {% endcase %}
        {% endfor %}
      </div>
    </td>
    </div>
   </tr>
 </thead>
 <tbody>
{% for row in table.rows %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 20px 0px; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="color: #000000; padding-right: 0px; width: inherit; margin: 0 auto;">
        <div style="width: 404px">
        {% for cell in row.cells %}
            {% case forloop.index0 %}
                {% when description %}
                    <span style="padding-left: 2px; display: block; text-align: left; word-wrap: break-word; width: 35%; float:left">{{ cell.text | newline_to_br }}</span>
                {% when qty %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 15%; float:left">{{ cell.text }}</span>
                {% when Unitprice %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 20%; float:left">{{ cell.text }}</span>    
                {% when amount %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 30%; float:right">{{ cell.text }}</span>
            {% endcase %}
        {% endfor %}
        </div>
      </td>
    </div>
    </div>
   </tr>
   {% endfor %}
   {% for total in table.totals %}
  <tr>
  <div style="width: 404px; word-wrap: break-word; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="font-weight: bold; font-size: 20px">
        <div style="width: 404px">
          <span style="text-align: left; display: block; float:left; width: 70%; margin-top: 20px; margin-bottom: 15px;">{{ total.label }}:</span>
          <span style="text-align: right; display: block; float:left; width: 30%; margin-top: 20px; margin-bottom: 15px;">{{ total.text }}</span>
        </div>
      </td>
    </div>
  </div>
</tr>
{% endfor %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin-bottom: 20px">
    <div style="max-width: 100%; margin: 15px auto 0 auto">
      <td>
        <div style="padding-left: 2px; width: 404px; word-wrap: break-word">
          {% for field in custom_fields %}
          <div style="font-weight: bold; margin-top: 15px">{{ field.label }}</div>
          <div style="padding-bottom: 20px; margin-top: 15px">{{ field.text | newline_to_br }}</div>
          {% endfor %}
        </div>
      </td>
      </div>
    </div>
</tr>
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 8px 0px">
    <div style="max-width: 100%; margin: 15px auto 15px auto">
      <td>
        <div style="padding-left: 1px; width: 353px; word-wrap: break-word; text-align: center">
         <div style="border: 1px solid #000; width: 404px; height:1px"></div>   
          <p><b>Solution By:- Manager.IO

Also, replace anything formatted like this <<Portuguese description>> with the portoguese equivalent and don’t leave the markers << and >>.

AMM · November 19, 2021, 10:16am

Can you please help me to do that as well

Ealfardan · November 19, 2021, 10:36am

That should change a lot of the theme sections like:

column headers
cells
totals

In addition to the piece of code @sharpdrivetek just provided. Also, it would take away from the space used for other columns since you are already using 80mm paper rolls.

A simpler less invasive alternative is to insert the serials inside the description, to do that you should replace this code fragment:

{% for row in table.rows %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 20px 0px; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="color: #000000; padding-right: 0px; width: inherit; margin: 0 auto;">
        <div style="width: 404px">
        {% for cell in row.cells %}
            {% case forloop.index0 %}
                {% when description %}
                    <span style="padding-left: 2px; display: block; text-align: left; word-wrap: break-word; width: 35%; float:left">{{ cell.text | newline_to_br }}</span>

With this code fragment:

{% for row in table.rows %}
{% assign rowNumber = forloop.index %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 20px 0px; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="color: #000000; padding-right: 0px; width: inherit; margin: 0 auto;">
        <div style="width: 404px">
        {% for cell in row.cells %}
            {% case forloop.index0 %}
                {% when description %}
                    <span style="padding-left: 2px; display: block; text-align: left; word-wrap: break-word; width: 35%; float:left"><b>{{ rowNumber }}.&nbsp;</b>{{ cell.text | newline_to_br }}</span>

sharpdrivetek · November 19, 2021, 10:39am

included line numbers.

<table style="background-color: #FFFFFF: width: 404px; color: #000000; text-transform: UPPERCASE\lowercase ;font-size:18px">
{% assign description = null %}
{% assign qty = null %}
{% assign unit price = null %}
{% assign amount = null %}
<thead>
  <tr>
    <td>
     <div style="text-align: center; width: 404px; word-wrap: break-word; margin-top: 10; margin-bottom: 10px">
        <div style="font-size: 30px; font-weight: bold; margin: 5px 0 10px 0">{{ business.name }}</div>
         <div>{{ business.address | replace: "\n", " " }}</div>
         <div style="border: 1px solid #000; width: 404px; height: 1px"></div>
        <div style="font-weight: bold; margin-top: 5px">Customer:<span style="font-weight: normal">{{ recipient.name }}</span></div>
 <tr>
   <td>
       <div style="text-align: left; width: 404px; word-wrap: break-word; margin-bottom: 5px">
        {% for field in fields %}
       <div style="display: inline-block">
        <div style="font-weight: bold; float: left; margin-right: 1px">{{ field.label }}: </div>
        <div style="float:left; margin-bottom: 5px; margin-right: 1px">{{ field.text }}</div>
      </div>
      {% endfor %}
    </td>
   <tr>
  <div style="width: 404px; word-wrap: break-word; margin-bottom: 10px">
    <div style="max-width: 100%; margin: 0 auto">

    </div>
    <td style="font-weight: bold; color: #000000; width: inherit; margin: 0 auto;">
      <div style="width: 404px;">
      <div style="border: 1px solid #000; width: 404px; height:1px"></div>
       <div style="padding-left: 0px; display: block; text-align: left; word-wrap: break-word; width: 5%; float:left">#</div>
       {% for column in table.columns %}
            {% case column.label %}
                {% when 'Description' %}
                    {% assign description = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: left; word-wrap: break-word; width: 30%; float:left">{{ column.label }}</span>
                {% when 'Qty' %}
                    {% assign qty = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 15%; float:left">{{ column.label }}</span>
                {% when 'Unit price' %}
                    {% assign Unitprice = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 20%; float:left">Rate</span>
                {% when 'Total' or 'Amount' %}
                    {% assign amount = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 30%; float:left">Amount</span>
            {% endcase %}
        {% endfor %}
      </div>
    </td>
    </div>
   </tr>
 </thead>
 <tbody>
{% for row in table.rows %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 20px 0px; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="color: #000000; padding-right: 0px; width: inherit; margin: 0 auto;">
        <div style="width: 404px">
        <div style="padding-left: 0px; display: block; text-align: left; word-wrap: break-word; width: 5%; float:left">{{ forloop.index0 | plus:1 }}</div>
        {% for cell in row.cells %}
            {% case forloop.index0 %}
                {% when description %}
                    <span style="padding-left: 5px; display: block; text-align: left; word-wrap: break-word; width: 30%; float:left">{{ cell.text | newline_to_br }}</span>
                {% when qty %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 15%; float:left">{{ cell.text }}</span>
                {% when Unitprice %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 20%; float:left">{{ cell.text }}</span>    
                {% when amount %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 30%; float:right">{{ cell.text }}</span>
            {% endcase %}
        {% endfor %}
        </div>
      </td>
    </div>
    </div>
   </tr>
   {% endfor %}
   {% for total in table.totals %}
  <tr>
  <div style="width: 404px; word-wrap: break-word; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="font-weight: bold; font-size: 20px">
        <div style="width: 404px">
          <span style="text-align: left; display: block; float:left; width: 70%; margin-top: 20px; margin-bottom: 15px;">{{ total.label }}:</span>
          <span style="text-align: right; display: block; float:left; width: 30%; margin-top: 20px; margin-bottom: 15px;">{{ total.text }}</span>
        </div>
      </td>
    </div>
  </div>
</tr>
{% endfor %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin-bottom: 20px">
    <div style="max-width: 100%; margin: 15px auto 0 auto">
      <td>
        <div style="padding-left: 2px; width: 404px; word-wrap: break-word">
          {% for field in custom_fields %}
          <div style="font-weight: bold; margin-top: 15px">{{ field.label }}</div>
          <div style="padding-bottom: 20px; margin-top: 15px">{{ field.text | newline_to_br }}</div>
          {% endfor %}
        </div>
      </td>
      </div>
    </div>
</tr>
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 8px 0px">
    <div style="max-width: 100%; margin: 15px auto 15px auto">
      <td>
        <div style="padding-left: 1px; width: 353px; word-wrap: break-word; text-align: center">
         <div style="border: 1px solid #000; width: 404px; height:1px"></div>   
          <p><b>Solution By:- Manager.IO

Ealfardan · November 19, 2021, 10:49am

@sharpdrivetek brilliant.
And I was thinking it was a table this entire time

sharpdrivetek · November 19, 2021, 10:52am

@Ealfardan i would prefer using your solution for 80mm paper size because it would be more reliable when the number of line items goes in 3 figure ranges.

AMM · November 19, 2021, 11:17am

Excellent

Shamsuddin_Esaf · November 19, 2021, 1:04pm

not work

Ealfardan · November 19, 2021, 1:13pm

You must replace:

<> with the word for description in portogese translation
<> with the word for Qty in portogese translation
…

Or just try this

<table style="background-color: #FFFFFF: width: 404px; color: #000000; text-transform: UPPERCASE\lowercase ;font-size:18px">
{% assign description = null %}
{% assign qty = null %}
{% assign unit price = null %}
{% assign amount = null %}
<thead>
  <tr>
    <td>
     <div style="text-align: center; width: 404px; word-wrap: break-word; margin-top: 10; margin-bottom: 10px">
        <div style="font-size: 30px; font-weight: bold; margin: 5px 0 10px 0">{{ business.name }}</div>
         <div>{{ business.address | replace: "\n", " " }}</div>
         <div style="border: 1px solid #000; width: 404px; height: 1px"></div>
        <div style="font-weight: bold; margin-top: 5px">Customer:<span style="font-weight: normal">{{ recipient.name }}</span></div>
 <tr>
   <td>
       <div style="text-align: left; width: 404px; word-wrap: break-word; margin-bottom: 5px">
        {% for field in fields %}
       <div style="display: inline-block">
        <div style="font-weight: bold; float: left; margin-right: 1px">{{ field.label }}: </div>
        <div style="float:left; margin-bottom: 5px; margin-right: 1px">{{ field.text }}</div>
      </div>
      {% endfor %}
    </td>
   <tr>
  <div style="width: 404px; word-wrap: break-word; margin-bottom: 10px">
    <div style="max-width: 100%; margin: 0 auto">

    </div>
    <td style="font-weight: bold; color: #000000; width: inherit; margin: 0 auto;">
      <div style="width: 404px;">
      <div style="border: 1px solid #000; width: 404px; height:1px"></div>
       {% for column in table.columns %}
            {% case column.label %}
                {% when 'Description' or 'Descrição' %}
                    {% assign description = forloop.index0 %}
                    <span style="padding-left: 0px; display: block; text-align: left; word-wrap: break-word; width: 35%; float:left">{{ column.label }}</span>
                {% when 'Qty' or 'Qt.' %}
                    {% assign qty = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 15%; float:left">{{ column.label }}</span>
                {% when 'Unit price' or 'Preço unitário' %}
                    {% assign Unitprice = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 20%; float:left">Rate</span>
                {% when 'Total' or 'Amount' or '<<Portogese Total>>' or 'Valor' %}
                    {% assign amount = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 30%; float:left">Amount</span>
            {% endcase %}
        {% endfor %}
      </div>
    </td>
    </div>
   </tr>
 </thead>
 <tbody>
{% for row in table.rows %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 20px 0px; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="color: #000000; padding-right: 0px; width: inherit; margin: 0 auto;">
        <div style="width: 404px">
        {% for cell in row.cells %}
            {% case forloop.index0 %}
                {% when description %}
                    <span style="padding-left: 2px; display: block; text-align: left; word-wrap: break-word; width: 35%; float:left">{{ cell.text | newline_to_br }}</span>
                {% when qty %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 15%; float:left">{{ cell.text }}</span>
                {% when Unitprice %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 20%; float:left">{{ cell.text }}</span>    
                {% when amount %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 30%; float:right">{{ cell.text }}</span>
            {% endcase %}
        {% endfor %}
        </div>
      </td>
    </div>
    </div>
   </tr>
   {% endfor %}
   {% for total in table.totals %}
  <tr>
  <div style="width: 404px; word-wrap: break-word; clear: both">
    <div style="max-width: 100%; margin: 0 auto">
      <td style="font-weight: bold; font-size: 20px">
        <div style="width: 404px">
          <span style="text-align: left; display: block; float:left; width: 70%; margin-top: 20px; margin-bottom: 15px;">{{ total.label }}:</span>
          <span style="text-align: right; display: block; float:left; width: 30%; margin-top: 20px; margin-bottom: 15px;">{{ total.text }}</span>
        </div>
      </td>
    </div>
  </div>
</tr>
{% endfor %}
<tr>
  <div style="width: 404px; word-wrap: break-word; margin-bottom: 20px">
    <div style="max-width: 100%; margin: 15px auto 0 auto">
      <td>
        <div style="padding-left: 2px; width: 404px; word-wrap: break-word">
          {% for field in custom_fields %}
          <div style="font-weight: bold; margin-top: 15px">{{ field.label }}</div>
          <div style="padding-bottom: 20px; margin-top: 15px">{{ field.text | newline_to_br }}</div>
          {% endfor %}
        </div>
      </td>
      </div>
    </div>
</tr>
<tr>
  <div style="width: 404px; word-wrap: break-word; margin: 0px 0px 8px 0px">
    <div style="max-width: 100%; margin: 15px auto 15px auto">
      <td>
        <div style="padding-left: 1px; width: 353px; word-wrap: break-word; text-align: center">
         <div style="border: 1px solid #000; width: 404px; height:1px"></div>   
          <p><b>Solution By:- Manager.IO

eko · November 19, 2021, 1:55pm

If you cut and paste this code you will notice that you wrote P r ortogese in stead of the Portogese used elsewhere. In any case English reference is written as Portuguese.

Ealfardan · November 19, 2021, 2:02pm

I blame this on autocorrect.

Shamsuddin_Esaf · November 19, 2021, 2:25pm

already tried it but the same problem

sharpdrivetek · November 19, 2021, 2:32pm

@Shamsuddin_Esaf you need to hire a Portuguese programmer locally who can change the code.
or you can change the codes yourself as per all the instructions given above by other users.

Ealfardan · November 19, 2021, 5:10pm

I have checked it and here was a missing '.

I haved edited my last post, you should try again. It works.

Shamsuddin_Esaf · November 20, 2021, 8:14am

Thank you, it’s already working, but the rate and Amount description doesn’t change, it always appears in English, but no problem, I’m configured differently

AMM · November 20, 2021, 8:16am

Hi,
One more thing
When printed in this theme every document looks like Sales Invoice without Heading of the Document.
Is there any way to include the Headings.
(Invoice, Sales Quote, Sales Order, Delivery Order, Credit Note, Purchase Order etc)
If Yes can you please help

sharpdrivetek · November 20, 2021, 8:51am

The code of the theme is based on the contents of sales invoice. You will need a new theme if you wish to use it for other transactions. This is beyond the scope of the forum. Please hire a local programmer to create a theme suitable for your needs.

Ealfardan · November 20, 2021, 9:01am

float:left">Rate</span>
float:left">Amount</span>

Search for these fragments and change the words Rate and Amount

Topic		Replies	Views
Printing on Thermal Printer	23	5637	January 18, 2023
Invoice Printout in Thermal Printer	13	2701	January 18, 2023
How to print on 58/80mm thermal paper	17	3508	January 18, 2023
Receipt printer slip - Thermal printer	26	6540	January 18, 2023
Thermal Printer Theme ideas	12	1703	November 14, 2024

80mm Thermal Printing

Related topics