search

kilbot / WooCommerce-POS

:bangbang: All development now at https://github.com/wcpos.
http://wcpos.com
GNU General Public License v3.0
354 stars 126 forks source link

Skinny Receipt Template #229

Open peterpenguw opened 4 years ago

peterpenguw commented 4 years ago

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>