Thermal Printer Theme

[Abeiku]

The problem occurs only when the unit name is not “Qty” The person I know always uses “Qty” for all items which is probably why I have never encountered this issue.

Try this 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>
    <div style="text-align: center;">
    {% if business.logo != null %}
    <img src="{{ business.logo }}" style="max-height: 150px; max-width: 200px; display: block; margin: 0 auto 10px;" />
    {% endif %}
</div>
    <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-size: 30px; font-weight: bold; margin: 5px 0 10px 0">{{ title }}</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: 40%; float:left">{{ column.label }}</span>
                {% when 'Qty' or 'Pcs' or 'Nos' or 'Lts' or 'Kg' %}
                    {% assign qty = forloop.index0 %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 10%; 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: 15%; float:left">Price</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:right">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: 40%; 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: 10%; float:left">{{ cell.text }}</span>
                {% when Unitprice %}
                    <span style="padding-left: 5px; display: block; text-align: right; word-wrap: break-word; width: 15%; 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>Thank you for doing business with us!<br><br>Follow us on<br>Instagram and TikTok<br>@yourbusinesssocialhandle

Remember to insert the Unit Name into the code line, if you get items with different unit names:

{% when 'Qty' or 'Pcs' or 'Nos' or 'Lts' or 'Kg' %}

[Mabaega]

Maybe this can give us an idea.
I don’t have a Thermal printer to try it out, I just installed the Thermal printer driver POS-58 to see the results in the print preview.

In the script I added two custom fields to the Sales Invoice, for the Device Number and the Cashier Name.

Complete cell index will be recorded before use, making it more dynamic and easier to develop. Like if we want to display the discount amount for each item or another.

{% assign SNIdx = nil %}
{% assign itemIdx = nil %}
{% assign descriptionIdx = nil %}
{% assign qtyIdx = nil %}
{% assign unitPriceIdx = nil %}
{% assign priceIdx = nil %}
{% assign discountIdx = nil %}
{% assign amountIdx = nil %}
{% assign taxIdx = nil %}
{% assign taxAmountIdx = nil %}
{% assign totalIdx = nil %}

{% for column in table.columns %}
	{% if column.label == '#' %}
		{% assign SNIdx = forloop.index0 %}
	{% elsif column.label == 'Item' %}
		{% assign itemIdx = forloop.index0 %}
	{% elsif column.label == 'Description' %}
		{% assign descriptionIdx = forloop.index0 %}
	{% elsif column.label == 'Unit price' %}
		{% assign unitPriceIdx = forloop.index0 %}
		{% assign qtyIdx = forloop.index0 | minus: 1 %}
	{% elsif column.label == 'Price' %}
		{% assign priceIdx = forloop.index0 %}
	{% elsif column.label == 'Discount' %}
		{% assign discountIdx = forloop.index0 %}
	{% elsif column.label == 'Amount' %}
		{% assign amountIdx = forloop.index0 %}
	{% elsif column.label == 'Tax' %}
		{% assign taxIdx = forloop.index0 %}
	{% elsif column.label == 'Tax Amount' %}
		{% assign taxAmountIdx = forloop.index0 %}
	{% elsif column.label == 'Total' %}
		{% assign totalIdx = forloop.index0 %}
	{% endif %}
{% endfor %}

<table style="width: 100%; font-family: monospace; font-size: 12px; border-collapse: collapse;">
	<!-- Header -->
	<tr>
		<td style="text-align: center; padding-bottom: 10px;">
			<table style="width: 100%; font-size: 10px; border-collapse: collapse;">
				<tr>
					<td colspan="2" style="text-align: center; font-size: 16px; font-weight: bold;">Bussines Name</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: center;">Business Address</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: center;">&nbsp;</td>
				</tr>
				<tr>
					<td style="width: 100px; text-align: left;">Customer&nbsp;</td>
					<td style="width: auto; text-align: left;">: {{ recipient.name }}</td>
				</tr>
				<tr>
					<td style="width: auto; text-align: left;">Invoice date&nbsp;</td>
					<td style="width: auto; text-align: left;">: {{ fields['Invoice date'] }}</td>
				</tr>
				<tr>
					<td style="width: auto; text-align: left;">Invoice number&nbsp;</td>
					<td style="width: auto; text-align: left;">: {{ fields['Invoice number'] }}</td>
				</tr>
				<tr>
					<td style="width: auto; text-align: left;">Device No:&nbsp;</td>
					<td style="width: auto; text-align: left;">: {{ custom_fields['Nama Device'] }}</td>
				</tr>
				<tr>
					<td style="width: auto; text-align: left;">Operator&nbsp;</td>
					<td style="width: auto; text-align: left;">: {{ custom_fields['Nama Kasir'] }}</td>
				</tr>
			</table>
		</td>
	</tr>
	<!-- Transaction Info -->
	<tr>
		<td style="border-bottom: 1px dashed #000;"/>
	</tr>
	<!-- Items Table -->
	<tr>
		<td style="padding: 5px 0;">
			<table style="width: 100%; font-size: 10px; border-collapse: collapse;">
				<tr>
					<th style="text-align: left; width: auto;">Item</th>
					<th style="text-align: center;">Qty</th>
					<th style="text-align: right;">Harga</th>
					<th style="text-align: right;">Total</th>
				</tr>
				<tr>
					<td colspan="4" style="border-bottom: 1px dashed #000; padding-bottom: 5px;"/>
				</tr>
{% for row in table.rows %}
	{% assign descriptionText = nil %}
	{% assign qtyText = nil %}
	{% assign unitPriceText = nil %} 
	{% assign totalText = nil %} 
	
	{% for cell in row.cells %} 
        {% if forloop.index0 == descriptionIdx or forloop.index0 == itemIdx %} 
			{% if cell.text != '' and cell.text != ' ' %} 
				{% assign descriptionText = cell.text | strip %} 
			{% endif %} 
		{% elsif forloop.index0 == qtyIdx %} 
			{% assign qtyText = cell.text %} 
		{% elsif forloop.index0 == unitPriceIdx %} 
			{% assign unitPriceText = cell.text %} 
		{% elsif forloop.index0 == totalIdx %} 
			{% assign totalText = cell.text %} 
		{% endif %} 
    {% endfor %} 
				<tr>
					<td style="text-align: left;">{{ descriptionText }}</td>
					<td style="text-align: center;">&nbsp;{{ qtyText }}</td>
					<td style="text-align: right;">&nbsp;{{ unitPriceText }}</td>
					<td style="text-align: right;">&nbsp;{{ totalText }}</td>
				</tr> 
{% endfor %} 
				<tr>
					<td colspan="4" style="border-bottom: 1px dashed #000; padding-bottom: 5px;"/>
				</tr>
				
				<!-- Total -->
{% for total in table.totals %}
				<tr">
					<td colspan="3" style="text-align: right;{% if total.emphasis == true %} font-weight: bold;{% endif %}">{{ total.label }} :</td>
					<td style="text-align: right;{% if total.emphasis == true %} font-weight: bold{% endif %};">&nbsp;{{ total.text }}</td>
				</tr>
{% endfor %}

			</table>
		</td>
	</tr>
		
	<tr>
		<td style="border-bottom: 1px dashed #000;"/>
	</tr>
	<!-- Footer -->
	<tr>
		<td style="text-align: center; padding: 10px 0; font-size: 10px;">
			<div>Terima Kasih Atas Kunjungan Anda</div>
			<div style="margin-top: 5px;">Barang yang sudah dibeli tidak dapat dikembalikan</div>
		</td>
	</tr>
	<tr>
		<td style="border-bottom: 1px dashed #000;"/>
	</tr>
</table>
<script>
	document.addEventListener("DOMContentLoaded", function () {
		let content = document.getElementById("printable-content");
		if (content && content.parentElement) {
			content.parentElement.style.padding = "10px";
		}
	});
</script>

[nickyrub]

@eko @Abeiku
Is there anyway i can insert discount column and it will appear on the thermal printer theme?

See that i mean

If i generate this printout on thermal printer, this is what i wiil get below

Kindly suggest on how to add the discount to show on the printout. Giving out any print-out like this makes the calculation incorrect because a discount had been given and its not captured on the printout
thanks