80mm Thermal Printing

AMM · November 15, 2021, 3:21pm

Hi, Everyone
With much difficulty and with great help from forum members I managed to create the following 80mm thermal print. Its working fine. Thank You folks

But there are one or two modifications to be done to complete it.
I would be much grateful to anyone who can guide or do the modification to the theme to the print look like the following. I can send the theme code to anyone to use as well

NO 1

eko · November 15, 2021, 3:25pm

Your second one has problem with FA1 Folio Acid 1mg. The only changes you want deal with alignment. You should post the script of the custom theme here if you want help changing the alignment.

AMM · November 15, 2021, 4:17pm

Thank You eko
You are right ,I do have the script for the first picture which is original the second one is what I want
How can I send the script

NO 2

These are the modifications I need which I could not make
No.1 the outer line alignment shall be strait
No.2 the Unit Price column shall be included
No.3 as you correctly said when the name is long it shall go to the next row (Wrap text)

AMM · November 15, 2021, 4:22pm

I have pasted the script of the first picture below

AMM · November 15, 2021, 4:23pm

The script is of the first picture

sharpdrivetek · November 15, 2021, 4:23pm

paste and select your whole code then click the indicated button above your text editor.

AMM · November 15, 2021, 4:24pm

<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; text-align: left; padding-left: 0px; padding-right: 0px; 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' %}
                    {% assign description = forloop.index0 %}
                    <span style="display: block; word-wrap: break-word; width: 53%; float:left">{{ column.label }}</span>
                {% when 'Qty' %}
                    {% assign qty = forloop.index0 %}
                    <span style="display: block; word-wrap: break-word; width: 17%; float:left">{{ column.label }}</span>
                {% when 'Unit Price' %}
                    {% assign Unitprice = forloop.index0 %}
                    <span style="display: block; word-wrap: break-word; width: 10%; float:left">{{ column.label }}</span>
                {% when 'Total' or 'Amount' %}
                    {% assign amount = forloop.index0 %}
                    <span style="display: block; 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; text-align: left; padding-right: 0px; padding-left: 3px; width: inherit; margin: 0 auto;">
        <div style="width: 404px">
        {% for cell in row.cells %}
            {% case forloop.index0 %}
                {% when description %}
                    <span style="display: block; word-wrap: break-word; width: 53%; float:left">{{ cell.text }}</span>
                {% when qty %}
                    <span style="display: block; word-wrap: break-word; width: 17%; float:left">{{ cell.text }}</span>
                {% when Unit Price %}
                    <span style="display: block; word-wrap: break-word; width: 10%; float:left">{{ cell.text }}</span>    
                {% when amount %}
                    <span style="display: block; 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="text-align: left; font-weight: bold; font-size: 20px">
        <div style="width: 404px">
          <span style="display: block; float:left; width: 70%; margin-top: 20px; margin-bottom: 15px;">{{ total.label }}:</span>
          <span style="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

sharpdrivetek · November 15, 2021, 5:08pm

@AMM check the below code.

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

AMM · November 15, 2021, 5:32pm

Thank You Very Much It seems to work
If any problem I will let you know
Thanks once again

Shamsuddin_Esaf · November 18, 2021, 2:04pm

Hi guys, can you even help me html code for portuguese language

Patch · November 18, 2021, 8:49pm

So

what didn’t work when you tried the above solution?
how did you try to fix it?

Shamsuddin_Esaf · November 18, 2021, 10:25pm

@Patch Here is the screenshot after converting English to Portuguese

eko · November 19, 2021, 1:56am

Please post the codes of both versions so we can diagnose it.

Shamsuddin_Esaf · November 19, 2021, 8:43am

harpdrivetek

4d

@AMM check the below code.

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

Shamsuddin_Esaf · November 19, 2021, 8:46am

I’m trying this code for english and portuguese

Ealfardan · November 19, 2021, 9:06am

The problem is that column names change when you change viewing language, so you need to multiply your cases to accommodate for the two languages.

You should modify this:

        {% for column in table.columns %}
            {% case column.label %}
                {% when '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' %}
                    {% 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 %}

To include these cases as well:

                {% when '<<Portuguese 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 '<<Portuguese 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 '<<Portuguese 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 '<<Portuguese total>>' or '<<Portuguese 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>

Also, I see another case switch for totals so that might need to be modified as well

Shamsuddin_Esaf · November 19, 2021, 9:29am

{% assign description = null %} {% assign qty = null %} {% assign unit price = null %} {% assign amount = null %}

</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>
  {% when '<<Portuguese 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 '<<Portuguese 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 '<<Portuguese 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 '<<Portuguese total>>' or '<<Portuguese 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>

  </div>
</td>
</div>

{% for row in table.rows %}

{% endfor %} {% for total in table.totals %}

{% endfor %}

{{ business.name }} {{ business.address \| replace: "\n", " " }} Customer:{{ recipient.name }}
{% for field in fields %} {{ field.label }}: {{ field.text }} {% endfor %}
{% for cell in row.cells %} {% case forloop.index0 %} {% when description %} {{ cell.text \| newline_to_br }} {% when qty %} {{ cell.text }} {% when Unitprice %} {{ cell.text }} {% when amount %} {{ cell.text }} {% endcase %} {% endfor %}
{{ total.label }}: {{ total.text }}
{% for field in custom_fields %} {{ field.label }} {{ field.text \| newline_to_br }} {% endfor %}
Solution By:- Manager.IO @Ealfardan i try this code but not work please chech meybe any mistake from my side

Mark · November 19, 2021, 9:31am

It’s the same procedure as indicated here

AMM · November 19, 2021, 9:48am

Hi, Thank you
For the help its working fine
Is it possible to number the items as in the following pic

80mm

sharpdrivetek · November 19, 2021, 9:59am

yes.

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