| 1 |
<!-- |
| 2 |
Narrow Receipt — HTML version of the thermal-receipt aesthetic for browser |
| 3 |
printing or HTML-capable thermal printers (e.g. Sunmi/Imin WebView print path). |
| 4 |
|
| 5 |
Uses the logicless template engine with section blocks: |
| 6 |
{{#key}}...{{/key}} — iterate arrays or show block for truthy values |
| 7 |
{{^key}}...{{/key}} — show block when value is empty/falsy |
| 8 |
{{.}} — current value (for arrays of strings) |
| 9 |
{{key.path}} — dot-path placeholder substitution |
| 10 |
|
| 11 |
Money fields are auto-formatted as currency. |
| 12 |
All styles are inline because wp_kses_post strips <style> tags. |
| 13 |
|
| 14 |
Layout uses <table> rows (not flex) so older embedded WebViews render the |
| 15 |
label/value columns correctly. The receipt is pure black-on-white with |
| 16 |
hierarchy from font weight, size, and rules — no greys or backgrounds |
| 17 |
that would smear or waste ink on thermal/B&W printers. |
| 18 |
--> |
| 19 |
<div style="width: 72mm; max-width: 100%; margin: 0 auto; padding: 4mm; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-family: 'Courier New', Courier, monospace; font-size: 12px; line-height: 1.4; color: #000; background: #fff;"> |
| 20 |
<div style="text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 6px;"> |
| 21 |
{{store.name}} |
| 22 |
</div> |
| 23 |
|
| 24 |
{{#store.address_lines}} |
| 25 |
<div style="text-align: center; font-size: 10px;">{{.}}</div> |
| 26 |
{{/store.address_lines}} |
| 27 |
|
| 28 |
{{#store.phone}} |
| 29 |
<div style="text-align: center; font-size: 10px;">{{store.phone}}</div> |
| 30 |
{{/store.phone}} |
| 31 |
|
| 32 |
{{#store.tax_ids}} |
| 33 |
<div style="text-align: center; font-size: 10px;">{{label}}: {{value}}</div> |
| 34 |
{{/store.tax_ids}} |
| 35 |
|
| 36 |
{{#store.opening_hours}} |
| 37 |
<div style="text-align: center; font-size: 10px; white-space: pre-line; margin-top: 4px;">{{store.opening_hours}}</div> |
| 38 |
{{/store.opening_hours}} |
| 39 |
|
| 40 |
<hr style="border: 0; border-top: 1px dashed #000; margin: 6px 0;" /> |
| 41 |
|
| 42 |
<div style="text-align: center; font-weight: 700; margin-bottom: 6px;">{{i18n.receipt}}</div> |
| 43 |
|
| 44 |
<table style="width: 100%; border-collapse: collapse; margin-bottom: 2px;"> |
| 45 |
<tr> |
| 46 |
<td style="text-align: left;">{{i18n.order}}</td> |
| 47 |
<td style="text-align: right;">#{{order.number}}</td> |
| 48 |
</tr> |
| 49 |
<tr> |
| 50 |
<td style="text-align: left;">{{i18n.date}}</td> |
| 51 |
<td style="text-align: right;">{{order.created.datetime}}</td> |
| 52 |
</tr> |
| 53 |
{{#cashier.name}} |
| 54 |
<tr> |
| 55 |
<td style="text-align: left; vertical-align: top;">{{i18n.cashier}}</td> |
| 56 |
<td style="text-align: right; word-wrap: break-word;">{{cashier.name}}</td> |
| 57 |
</tr> |
| 58 |
{{/cashier.name}} |
| 59 |
{{#customer.name}} |
| 60 |
<tr> |
| 61 |
<td style="text-align: left; vertical-align: top;">{{i18n.customer}}</td> |
| 62 |
<td style="text-align: right; word-wrap: break-word;">{{customer.name}}</td> |
| 63 |
</tr> |
| 64 |
{{/customer.name}} |
| 65 |
</table> |
| 66 |
|
| 67 |
<hr style="border: 0; border-top: 1px dashed #000; margin: 6px 0;" /> |
| 68 |
|
| 69 |
{{#lines}} |
| 70 |
<div style="font-weight: 700; word-wrap: break-word;">{{name}}</div> |
| 71 |
{{#line_savings}}<div style="font-size: 10px; padding-left: 8px;"><span style="text-decoration: line-through;">{{line_regular_total_display}}</span><span> · {{i18n.savings}} -{{line_savings_display}}</span></div>{{/line_savings}} |
| 72 |
<table style="width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 4px;"> |
| 73 |
<tr> |
| 74 |
<td style="text-align: left; padding-left: 8px; word-wrap: break-word; vertical-align: top;"> |
| 75 |
{{qty}} x {{unit_price_display}}{{#sku}} ({{sku}}){{/sku}} |
| 76 |
</td> |
| 77 |
<td style="text-align: right; white-space: nowrap; vertical-align: top;">{{line_total_display}}</td> |
| 78 |
</tr> |
| 79 |
</table> |
| 80 |
{{/lines}} |
| 81 |
|
| 82 |
<hr style="border: 0; border-top: 1px dashed #000; margin: 6px 0;" /> |
| 83 |
|
| 84 |
<table style="width: 100%; border-collapse: collapse;"> |
| 85 |
<tr> |
| 86 |
<td style="text-align: left;">{{i18n.subtotal}}</td> |
| 87 |
<td style="text-align: right;">{{totals.subtotal_display}}</td> |
| 88 |
</tr> |
| 89 |
|
| 90 |
{{#discounts}} |
| 91 |
<tr> |
| 92 |
<td style="text-align: left;">{{label}}</td> |
| 93 |
<td style="text-align: right;">-{{total_display}}</td> |
| 94 |
</tr> |
| 95 |
{{/discounts}} |
| 96 |
|
| 97 |
{{#shipping}} |
| 98 |
<tr> |
| 99 |
<td style="text-align: left;">{{label}}</td> |
| 100 |
<td style="text-align: right;">{{total_display}}</td> |
| 101 |
</tr> |
| 102 |
{{/shipping}} |
| 103 |
|
| 104 |
{{#fees}} |
| 105 |
<tr> |
| 106 |
<td style="text-align: left;">{{label}}</td> |
| 107 |
<td style="text-align: right;">{{total_display}}</td> |
| 108 |
</tr> |
| 109 |
{{/fees}} |
| 110 |
|
| 111 |
{{#tax_summary}} |
| 112 |
<tr> |
| 113 |
<td style="text-align: left;">{{#tax.display_excl}}{{label}}{{#rate}} ({{rate}}%){{/rate}}{{/tax.display_excl}}{{#tax.display_incl}}{{i18n.included_tax}}: {{label}}{{#rate}} ({{rate}}%){{/rate}}{{/tax.display_incl}}</td> |
| 114 |
<td style="text-align: right;">{{tax_amount_display}}</td> |
| 115 |
</tr> |
| 116 |
{{/tax_summary}} |
| 117 |
</table> |
| 118 |
|
| 119 |
<table style="width: 100%; border-collapse: collapse; font-weight: 700; font-size: 14px; border-top: 2px solid #000; margin-top: 4px;"> |
| 120 |
<tr> |
| 121 |
<td style="text-align: left; padding-top: 4px;">{{i18n.total}}</td> |
| 122 |
<td style="text-align: right; padding-top: 4px;">{{totals.total_incl_display}}</td> |
| 123 |
</tr> |
| 124 |
{{#totals.total_saved_incl}} |
| 125 |
<tr style="font-weight: 400; font-size: 11px;"> |
| 126 |
<td style="text-align: left;">{{i18n.total_saved}}</td> |
| 127 |
<td style="text-align: right;">{{totals.total_saved_incl_display}}</td> |
| 128 |
</tr> |
| 129 |
{{/totals.total_saved_incl}} |
| 130 |
</table> |
| 131 |
|
| 132 |
<hr style="border: 0; border-top: 1px dashed #000; margin: 6px 0;" /> |
| 133 |
|
| 134 |
<table style="width: 100%; border-collapse: collapse;"> |
| 135 |
{{#payments}} |
| 136 |
<tr> |
| 137 |
<td style="text-align: left;">{{method_title}}</td> |
| 138 |
<td style="text-align: right;">{{amount_display}}</td> |
| 139 |
</tr> |
| 140 |
{{#tendered}} |
| 141 |
<tr> |
| 142 |
<td style="text-align: left; font-size: 10px; padding-left: 8px;">{{i18n.tendered}}</td> |
| 143 |
<td style="text-align: right; font-size: 10px;">{{tendered_display}}</td> |
| 144 |
</tr> |
| 145 |
{{/tendered}} |
| 146 |
{{#change}} |
| 147 |
<tr> |
| 148 |
<td style="text-align: left; font-size: 10px; padding-left: 8px;">{{i18n.change}}</td> |
| 149 |
<td style="text-align: right; font-size: 10px;">{{change_display}}</td> |
| 150 |
</tr> |
| 151 |
{{/change}} |
| 152 |
{{/payments}} |
| 153 |
</table> |
| 154 |
|
| 155 |
{{#order.customer_note}} |
| 156 |
<hr style="border: 0; border-top: 1px dashed #000; margin: 6px 0;" /> |
| 157 |
<div style="font-size: 10px;"> |
| 158 |
<span style="font-weight: 700;">{{i18n.customer_note}}:</span> |
| 159 |
{{order.customer_note}} |
| 160 |
</div> |
| 161 |
{{/order.customer_note}} |
| 162 |
|
| 163 |
<hr style="border: 0; border-top: 1px dashed #000; margin: 6px 0;" /> |
| 164 |
|
| 165 |
<div style="text-align: center; font-size: 10px;"> |
| 166 |
{{i18n.thank_you_purchase}} |
| 167 |
</div> |
| 168 |
</div> |
| 169 |
|
