AED and Amount is not in Same line
Before it was together like AED 1000, Now
AED
1000.
It’s strange, my old themes are still working!
I checked the Custom Theme and they are still written in Liquid and they still work.
Does this mean that the new themes support JS in addition to Liquid? @lubos
Some of my old custom themes still work, but they require a lot of adjustments because now the preview is wrapped in an iframe.
I tried to modify the Default template, and the Liquid code can still be used as before.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Styling for consistent look and feel -->
</head>
<body>
{{ table | json }}
{{ business | json }}
{{ fields | json }}
{{ custom_fields | json }}
</body >
</html >
{
"columns": [
{
"label": "Item",
"align": "start",
"nowrap": false,
"total": false,
"emphasis": false,
"minWidth": false,
"alwaysShow": false
},
{
"label": "PCE",
"align": "center",
"nowrap": true,
"total": true,
"emphasis": false,
"minWidth": false,
"alwaysShow": false
},
{
"label": "Unit price",
"align": "right",
"nowrap": true,
"total": false,
"emphasis": false,
"minWidth": false,
"alwaysShow": false
},
{
"label": "Amount",
"align": "right",
"nowrap": true,
"total": true,
"emphasis": false,
"minWidth": false,
"alwaysShow": false
},
{
"label": "Tax",
"align": "center",
"nowrap": true,
"total": false,
"emphasis": false,
"minWidth": false,
"alwaysShow": false
},
{
"label": "Tax Amount",
"align": "right",
"nowrap": true,
"total": true,
"emphasis": false,
"minWidth": false,
"alwaysShow": false
},
{
"label": "Total",
"align": "right",
"nowrap": true,
"total": false,
"emphasis": true,
"minWidth": false,
"alwaysShow": true
}
],
"rows": [
{
"cells": [
{
"canBeHidden": false,
"text": "Item VAT 15%"
},
{
"value": 1.0,
"canBeHidden": false,
"text": "1"
},
{
"value": 100.0,
"canBeHidden": false,
"text": "100.00"
},
{
"value": 100.00,
"canBeHidden": false,
"text": "100.00"
},
{
"canBeHidden": false,
"text": "15% VAT"
},
{
"value": 15.00,
"canBeHidden": false,
"text": "15.00"
},
{
"value": 115.00,
"canBeHidden": false,
"text": "115.00"
}
]
},
{
"cells": [
{
"canBeHidden": false,
"text": "Item VAT 15%"
},
{
"value": 1.0,
"canBeHidden": false,
"text": "1"
},
{
"value": 100.0,
"canBeHidden": false,
"text": "100.00"
},
{
"value": 100.00,
"canBeHidden": false,
"text": "100.00"
},
{
"canBeHidden": false,
"text": "15% VAT"
},
{
"value": 15.00,
"canBeHidden": false,
"text": "15.00"
},
{
"value": 115.00,
"canBeHidden": false,
"text": "115.00"
}
]
},
{
"cells": [
{
"canBeHidden": false,
"text": "Item VAT 15%"
},
{
"value": 1.0,
"canBeHidden": false,
"text": "1"
},
{
"value": 100.0,
"canBeHidden": false,
"text": "100.00"
},
{
"value": 100.00,
"canBeHidden": false,
"text": "100.00"
},
{
"canBeHidden": false,
"text": "15% VAT"
},
{
"value": 15.00,
"canBeHidden": false,
"text": "15.00"
},
{
"value": 115.00,
"canBeHidden": false,
"text": "115.00"
}
]
},
{
"cells": [
{
"canBeHidden": false,
"text": "Item VAT 15%"
},
{
"value": 1.0,
"canBeHidden": false,
"text": "1"
},
{
"value": 100.0,
"canBeHidden": false,
"text": "100.00"
},
{
"value": 100.00,
"canBeHidden": false,
"text": "100.00"
},
{
"canBeHidden": false,
"text": "15% VAT"
},
{
"value": 15.00,
"canBeHidden": false,
"text": "15.00"
},
{
"value": 115.00,
"canBeHidden": false,
"text": "115.00"
}
]
},
{
"cells": [
{
"canBeHidden": false,
"text": "Item VAT 15%"
},
{
"value": 1.0,
"canBeHidden": false,
"text": "1"
},
{
"value": 100.0,
"canBeHidden": false,
"text": "100.00"
},
{
"value": 100.00,
"canBeHidden": false,
"text": "100.00"
},
{
"canBeHidden": false,
"text": "15% VAT"
},
{
"value": 15.00,
"canBeHidden": false,
"text": "15.00"
},
{
"value": 115.00,
"canBeHidden": false,
"text": "115.00"
}
]
},
{
"cells": [
{
"canBeHidden": false,
"text": "Item VAT 15%"
},
{
"value": 1.0,
"canBeHidden": false,
"text": "1"
},
{
"value": 100.0,
"canBeHidden": false,
"text": "100.00"
},
{
"value": 100.00,
"canBeHidden": false,
"text": "100.00"
},
{
"canBeHidden": false,
"text": "15% VAT"
},
{
"value": 15.00,
"canBeHidden": false,
"text": "15.00"
},
{
"value": 115.00,
"canBeHidden": false,
"text": "115.00"
}
]
},
{
"cells": [
{
"canBeHidden": false,
"text": "Item VAT 15%"
},
{
"value": 1.0,
"canBeHidden": false,
"text": "1"
},
{
"value": 100.0,
"canBeHidden": false,
"text": "100.00"
},
{
"value": 100.00,
"canBeHidden": false,
"text": "100.00"
},
{
"canBeHidden": false,
"text": "15% VAT"
},
{
"value": 15.00,
"canBeHidden": false,
"text": "15.00"
},
{
"value": 115.00,
"canBeHidden": false,
"text": "115.00"
}
]
}
],
"totals": [
{
"class": "",
"key": "",
"label": "Sub-total",
"text": "700.00",
"number": 700.00,
"emphasis": false
},
{
"class": "taxAmount",
"key": "",
"label": "15% VAT",
"text": "105.00",
"number": 105.00,
"emphasis": false
},
{
"class": "",
"key": "Total",
"label": "Total",
"text": "805.00",
"number": 805.00,
"emphasis": true
}
]
}
{
"logo": "/business-logo-view?CIr7md6K9tnuCKIGBVppbXJh",
"name": "Test Company Name",
"address": "
\n
SELLER
\n
Test Company Name
\n
Company Branch Name
\n
TIN: 2228887772 — Vat No: 220002346
\n
Province — City Name
Street Name — 4554
\n
Email: zimraegs@email.net
\n
Phone No: 077757000
\n
",
"country": null,
"custom_fields": []
}
[
{
"key": "InvoiceDate",
"label": "Invoice date",
"text": "1/21/2025",
"emphasis": false
},
{
"key": "DueDate",
"label": "Due date",
"text": "1/21/2025",
"emphasis": false
}
]
[
{
"key": "d554566a-188b-4c5c-abec-86e1f18eee78",
"label": "Buyer Register Name",
"text": "Company ABC, Ltd.",
"value": "Company ABC, Ltd.",
"displayAtTheTop": false
},
{
"key": "c8def7d7-8d4d-487c-9685-ab0693dccd1f",
"label": "Buyer Trade Name",
"text": "Food Market ABC",
"value": "Food Market ABC",
"displayAtTheTop": false
},
{
"key": "af771746-d00a-4f78-906c-8946098e1184",
"label": "Buyer TIN",
"text": "1987012390",
"value": "1987012390",
"displayAtTheTop": false
},
{
"key": "2a0e1d10-e66b-4b12-9b9c-3b3f3b7c35f9",
"label": "Buyer Vat Number",
"text": "198701230",
"value": "198701230",
"displayAtTheTop": false
},
{
"key": "aec2c1f7-3aed-49fd-82d8-c15a7b69a74f",
"label": "Buyer Province",
"text": "12 Southgate Hwange",
"value": "12 Southgate Hwange",
"displayAtTheTop": false
},
{
"key": "5fc8a9b9-efef-45d0-94da-1b0438e75725",
"label": "Buyer City",
"text": "Buyer City",
"value": "Buyer City",
"displayAtTheTop": false
},
{
"key": "62e8d3ee-bf4d-4b3e-956f-870ed4d99a90",
"label": "Buyer Street",
"text": "Buyer Street",
"value": "Buyer Street",
"displayAtTheTop": false
},
{
"key": "568a19c2-bc66-4dc2-8bbd-de0768e7e283",
"label": "Buyer House No",
"text": "1234",
"value": "1234",
"displayAtTheTop": false
},
{
"key": "5b2a8521-9e28-4edf-ac2c-527562349188",
"label": "Buyer Email",
"text": "john.smith@email.com",
"value": "john.smith@email.com",
"displayAtTheTop": false
},
{
"key": "2e909259-6785-419a-aaef-6390a427b5f6",
"label": "Buyer Phone No",
"text": "(081) 20875",
"value": "(081) 20875",
"displayAtTheTop": false
}
]
I rewrote my POS-58 theme code. And added some manual page and printing settings. Maybe you can get an idea from my code.
You can see the Style and Script that I used to remove the scrollbar on the preview.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
@page {
size: 58mm auto;
margin: 1mm;
padding: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
html {
width: 100%;
min-width: 58mm;
-webkit-text-size-adjust: none;
}
body {
width: 100%;
min-width: 56mm;
margin: 0;
padding: 0;
font-family: monospace;
font-size: 10px;
background-color: white;
color: black;
overflow-x: hidden;
word-wrap: break-word;
word-break: break-word;
display: flex;
justify-content: center;
}
.container {
width: 52mm;
min-width: 52mm;
max-width: 52mm;
margin: 1mm;
padding: 0;
}
.header {
text-align: center;
padding-bottom: 3px;
}
.header img {
max-width: 30px;
max-height: 30px;
margin-bottom: 2px;
}
.business-name {
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
}
.business-address {
font-size: 8px;
margin-bottom: 1px;
white-space: normal;
word-wrap: break-word;
}
.divider {
margin: 2px 0;
border-bottom: 1px dashed #000;
}
.transaction-info {
padding: 2px 0;
}
.transaction-info table {
width: 100%;
font-size: 8px;
table-layout: fixed;
}
.items-table {
width: 100%;
font-size: 8px;
border-collapse: collapse;
table-layout: fixed;
}
.items-table th {
text-align: left;
padding: 1px 0;
}
.items-table td {
padding: 1px 0;
white-space: normal;
word-wrap: break-word;
}
.footer {
text-align: center;
padding: 3px 0;
font-size: 8px;
}
.footer p {
margin: 2px 0;
}
</style>
</head>
<body>
<!-- Tambahkan variabel assignment di awal template -->
{% 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 %}
<div class="container">
<!-- Header -->
<div class="header">
{% if business.logo %}
<div>
<img src="{{ business.logo }}" />
</div>
{% endif %}
<div class="business-name">{{ business.name }}</div>
<div class="business-address">{{ business.address }}</div>
{% if custom_fields['Buyer Phone No'] %}
<div class="business-address">Telp: {{ custom_fields['Buyer Phone No'] }}</div>
{% endif %}
<div class="divider"></div>
</div>
<!-- Transaction Info -->
<div class="transaction-info">
<table>
<tr>
<td>No. Struk:</td>
<td style="text-align: right;">{{ custom_fields['Receipt Counter'] }}</td>
</tr>
<tr>
<td>Tanggal:</td>
<td style="text-align: right;">{{ custom_fields['Receipt Date'] }}</td>
</tr>
<tr>
<td>Kasir:</td>
<td style="text-align: right;">{{ custom_fields['DeviceID'] }}</td>
</tr>
{% if custom_fields['Buyer Register Name'] %}
<tr>
<td>Pelanggan:</td>
<td style="text-align: right;">{{ custom_fields['Buyer Register Name'] }}</td>
</tr>
{% endif %}
</table>
<div class="divider"></div>
</div>
<!-- Items Table -->
<div class="transaction-info">
<table class="items-table">
<thead>
<tr>
<th style="width: 50%; text-align: left;">Item</th>
<th style="width: 10%; text-align: right;">Qty</th>
<th style="width: 20%; text-align: right;">Harga</th>
<th style="width: 20%; text-align: right;">Total</th>
</tr>
</thead>
<tbody>
{% for row in table.rows %}
{% assign descriptionText = nil %}
{% assign qtyText = nil %}
{% assign unitPriceText = nil %}
{% assign totalText = nil %}
{% assign priceText = nil %}
{% assign discountText = nil %}
{% assign amountText = nil %}
{% assign taxText = nil %}
{% assign taxAmountText = 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 == priceIdx %}
{% assign priceText = cell.text %}
{% elsif forloop.index0 == discountIdx %}
{% assign discountText = cell.text %}
{% elsif forloop.index0 == amountIdx %}
{% assign amountText = cell.text %}
{% elsif forloop.index0 == taxIdx %}
{% assign taxText = cell.text %}
{% elsif forloop.index0 == taxAmountIdx %}
{% assign taxAmountText = cell.text %}
{% elsif forloop.index0 == totalIdx %}
{% assign totalText = cell.text %}
{% endif %}
{% endfor %}
<tr>
<td style="text-align: left;">{{ descriptionText }}</td>
<td style="text-align: right;">{{ qtyText }}</td>
<td style="text-align: right;">{{ unitPriceText }}</td>
<td style="text-align: right;">{{ totalText }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="divider"></div>
</div>
<!-- Totals -->
<div class="transaction-info">
<table class="items-table">
{% for total in table.totals %}
{% unless total.amount == -1 and total.label == 'Sub-total' %}
{% assign textArray = total.text | split: ' ' %}
{% assign lastIndex = textArray | last %}
<tr style="{% if total.emphasis %}font-weight: bold;{% endif %}">
<td>
{% if total.label == 'Sub-total' %}
Subtotal:
{% elsif total.label == 'Total' %}
TOTAL:
{% elsif total.class == 'taxAmount' %}
PPN:
{% else %}
{{ total.label }}:
{% endif %}
</td>
<td style="text-align: right;">
{{ lastIndex }}
</td>
</tr>
{% endunless %}
{% endfor %}
</table>
<div class="divider"></div>
</div>
<!-- Payment Info -->
<div class="transaction-info">
<table class="items-table">
<tr>
<td>TUNAI:</td>
<td style="text-align: right;">
{% for total in table.totals %}
{% if total.label == 'Total' %}
{% assign textArray = total.text | split: ' ' %}
{% assign lastIndex = textArray | last %}
{{ lastIndex }}
{% endif %}
{% endfor %}
</td>
</tr>
<tr>
<td>KEMBALI:</td>
<td style="text-align: right;">0.00</td>
</tr>
</table>
<div class="divider"></div>
</div>
<!-- Footer -->
<div class="footer">
<p>Terima Kasih Atas Kunjungan Anda</p>
{% if custom_fields['Receipt GlobalNo'] %}
<p>{{ custom_fields['DeviceID'] }} - {{ custom_fields['Receipt Counter'] }}/{{ custom_fields['Receipt GlobalNo'] }}</p>
{% endif %}
<p>Barang yang sudah dibeli tidak dapat dikembalikan</p>
</div>
</div>
<script>
window.addEventListener("message", async (event) => {
if (event.source !== window.parent) return;
if (event.data.type !== 'context-response') return;
const data = event.data.body;
document.documentElement.dir = data.direction;
const style = document.createElement('style');
style.textContent = `
@page { size: 58mm auto !important; margin: 1mm !important; }
@media print {
html {
width: 100% !important;
min-width: 58mm !important;
}
body {
width: 100% !important;
min-width: 56mm !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
}
.container {
width: 52mm !important;
min-width: 52mm !important;
max-width: 52mm !important;
margin: 1mm !important;
padding: 0 !important;
}
}
`;
document.head.appendChild(style);
}, false);
window.addEventListener("load", () =>
window.parent.postMessage({ type: "context-request" }, "*")
);
</script>
</body>
</html>
Can you share the code for the theme
Yes. I needed to preserve backwards compatibility but all themes should be rewritten using javascript in near future.
Also, see. It’s now possible to author new themes without any programming skills.
Good enhancement Thanks @lubos
It will be still fine if we can pull the Total of Unpaid Invoices of the given customer to be printed under the Totals of this Invoice as a Notification
What about Sales quotation?
Sales Quotes we use to get each page our logo and business details now from 2nd page we are not getting our Business details also lines, words are cutting after page ends.
Can we get same as before we use to get pdf bcoz we have approval for Quotation format from client side and now we can’t change format.
Please check attached Screenshot.
same thing with me
I’ve got the same issue, using manager cloud. Please fix asap.
@sakhawath_shofy I noticed that too i even try rewriting a new CSS but it was not very helpful
The simplest solution provided by @Mabaega is to set the margins to none on your browser’s print dialogue.
However, this only works if you are not using any theme.
This issue is spread across too many topics. I will merge these topics together.
You can continue in the main thread
Using Manager cloud version, it’s happening with sales invoice, purchase invoice, sales order
Payment and receipts screens are appearing correctly @lubos
@Mabaega what did you do to fit the content to the iframe?
I tried everything I knew but the content still overflows the iframe.
I get this Style and Script code from AI.
I haven’t tried it for other paper sizes.
Any solution for this issue? We have tried to restart the server, but it’s still the same