WooCommerce-POS
WooCommerce-POS copied to clipboard
kilbot
Skinny Receipt Template
Hey guys, I've made a Skinny Receipt template for stores that need to print via super efficient skinny printers (the traditional 3" wide rolls of paper). These kind of receipts print fast and simple.
I did some work on this but I'm having trouble producing an ORDER LIST with 3 columns into such a skinny frame. Any help here?
<html>
<head>
<meta charset="utf-8">
<title><?php _e( 'Receipt', 'woocommerce-pos' ); ?></title>
<style>
/* SIMPLE CENTER SKINNY RECEIPT CLASS */
.centered-list {
position: absolute;
font-size: 8px;
font-family: sans-serif;
max-width: 200px !important;
line-height: 1 !important;
padding-top: 0px !important;
margin-top: 0px !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
text-align: center;
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
display:inline-block;
}
</style>
</head>
<body>
<div class="centered-list">
{{#if store.logo}}
<img style="max-width:200px" src="{{store.logo}}"><br>
{{else}}
<h1>{{{store.name}}}</h1>
{{/if}}
<br>
<p>
{{#if store.address}}{{formatAddress store.address}}<br>{{/if}}
<br>
{{#if store.url}}{{store.url}}<br>{{/if}}
{{#if store.email}}{{store.email}}<br>{{/if}}
{{#if store.phone}}{{store.phone}}<br>{{/if}}
<br>
</p>
<!--
{{#if store.hours}}
{{#each store.hours}}
<strong>{{formatDay @key format="dddd"}}:</strong> {{#list this ' - '}}{{this}}{{/list}}<br>
{{/each}}
{{/if}}
{{#if store.hours_note}}{{{store.hours_note}}}{{/if}}-->
<!--end of header area -->
<div class="billing-address">
{{formatAddress billing_address title="<?php /* translators: woocommerce */ _e( 'Billing Address', 'woocommerce' ); ?>"}}
</div>
<div class="shipping-address">
{{formatAddress shipping_address title="<?php /* translators: woocommerce */ _e( 'Shipping Address', 'woocommerce' ); ?>"}}
</div>
<!--<table class="order-info">-->
<br>
<div><h2>Order#: {{order_number}}</h2></div>
<div>Order Date: {{formatDate completed_at format="MMMM Do YYYY, h:mm:ss a"}}</div>
<div>Cashier: {{cashier.first_name}} {{cashier.last_name}}</div>
<div>Payment: {{payment_details.method_title}}</div>
{{#if billing_address.email}}
<div>Email: {{billing_address.email}}</div>
{{/if}}
<br>
<!--</table>-->
<!--
<thead>
<tr>
<th class="product"><?php /* translators: woocommerce */ _e( 'Product', 'woocommerce' ); ?></th>
<th class="qty"><?php _ex( 'Qty', 'Abbreviation of Quantity', 'woocommerce-pos' ); ?></th>
<th class="price"><?php /* translators: woocommerce */ _e( 'Price', 'woocommerce' ); ?></th>
</tr>
</thead>
-->
<h3>ORDER LIST</h3>
<!-- need a minimal, simple table of product, qty and amount here without formatting -->
<tbody>
{{#each line_items}}
<tr>
<td class="product">
{{name}}
{{#with meta}}
<dl class="meta">
{{#each []}}
<dt>{{label}}:</dt>
<dd>{{value}}</dd>
{{/each}}
</dl>
{{/with}}
</td>
<td class="qty">{{number quantity precision="auto"}}</td>
<td class="price">
{{#if on_sale}}
<del>{{{money subtotal}}}</del>
<ins>{{{money total}}}</ins>
{{else}}
{{{money total}}}
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr class="subtotal">
<th colspan="2"><?php _e( 'Cart Subtotal', 'woocommerce-pos' ); ?>:</th>
<td colspan="1">{{{money subtotal}}}</td>
</tr>
{{#if has_discount}}
<tr class="cart-discount">
<th colspan="2"><?php /* translators: woocommerce */ _e( 'Discount', 'woocommerce' ); ?>:</th>
<td colspan="1">{{{money cart_discount negative=true}}}</td>
</tr>
{{/if}}
{{#each shipping_lines}}
<tr class="shipping">
<th colspan="2">{{method_title}}:</th>
<td colspan="1">{{{money total}}}</td>
</tr>
{{/each}}
{{#each fee_lines}}
<tr class="fee">
<th colspan="2">{{title}}:</th>
<td colspan="1">{{{money total}}}</td>
</tr>
{{/each}}
{{#if has_tax}}
{{#if itemized}}
{{#each tax_lines}}
{{#if has_tax}}
<tr class="tax">
<th colspan="2">
{{#if ../../incl_tax}}<small>(<?php _ex( 'incl.', 'abbreviation for includes (tax)', 'woocommerce-pos' ); ?>)</small>{{/if}}
{{title}}:
</th>
<td colspan="1">{{{money total}}}</td>
</tr>
{{/if}}
{{/each}}
{{else}}
<tr class="tax">
<th colspan="2">
{{#if incl_tax}}<small>(<?php _ex( 'incl.', 'abbreviation for includes (tax)', 'woocommerce-pos' ); ?>)</small>{{/if}}
<?php echo esc_html( WC()->countries->tax_or_vat() ); ?>
</th>
<td colspan="1">{{{money total_tax}}}</td>
</tr>
{{/if}}
{{/if}}
<!-- order_discount removed in WC 2.3, included for backwards compatibility -->
{{#if has_order_discount}}
<tr class="order-discount">
<th colspan="2"><?php /* translators: woocommerce */ _e( 'Order Discount', 'woocommerce' ); ?>:</th>
<td colspan="1">{{{money order_discount negative=true}}}</td>
</tr>
{{/if}}
<!-- end order_discount -->
<tr class="order-total">
<th colspan="2"><?php /* translators: woocommerce */ _e( 'Order Total', 'woocommerce' ); ?>:</th>
<td colspan="1">{{{money total}}}</td>
</tr>
{{#if payment_details.method_pos_cash}}
<tr class="pos_cash-tendered">
<th colspan="2"><?php _e( 'Amount Tendered', 'woocommerce-pos' ); ?>:</th>
<td colspan="1">{{{money payment_details.method_pos_cash.tendered}}}</td>
</tr>
<tr class="pos_cash-change">
<th colspan="2"><?php _ex('Change', 'Money returned from cash sale', 'woocommerce-pos'); ?>:</th>
<td colspan="1">{{{money payment_details.method_pos_cash.change}}}</td>
</tr>
{{/if}}
</tfoot>
<h3>
NOTES
</h3>
<div class="order-notes">{{note}}</div>
<div class="order-thanks">{{{store.notes}}}</div>
<div class="order-colophon">
<div class="colophon-policies">{{{store.policies}}}</div>
<div class="colophon-imprint">{{{store.footer}}}</div>
</div>
</div><!-- div class="centered-list" -->
</body>
</html>
