If you need a way to include barcodes in your email or receipt templates, you can do so with Order Desk and some Twig.
Adding QR Codes
To add a QR Code to a template using Twig, use this filter:
|qrcode
or:
|qrcode(300)
for a larger size. The default size is 150.
Example:
<img src="{{ order.source_id|qrcode }}">
Adding Barcodes
To add a barcode, use this Twig filter:
|barcode
or:
|barcode(type, width, height)
Replace (type, width, height) with the values needed. The default values are (“C128”, 2, 80).
Example:
<img src="{{ order.source_id|barcode("C39", 2, 80) }}">
Barcode Types
Available barcode options are
C39
C39+
C39E
C39E+
C93
S25
S25+
I25
I25+
C128
C128A
C128B
C128C
EAN2
EAN5
EAN8
EAN13
UPCA
UPCE
MSI
MSI+
POSTNET
PLANET
RMS4CC
KIX
IMB
CODABAR
CODE11
PHARMA
PHARMA2T
Using Barcode Scanners
Order Desk can listen for your USB scanner input. Depending on how your barcodes are set up, you can do one of three things with a scanner.
Enable this functionality by adding USBSCANNER to the feature tag section of your Store Settings page.
Access Order Detail Page
This works with regular QR codes or barcodes.
Example code to pull up the order number:
<img src="{{ ("^#^" ~ order.id)|barcode("C128", 1, 40) }}">
Move Order to Different Folder
This works with regular QR codes or barcodes.
Example code for moving an order to folder 300:
<img src="{{ ("^F300^" ~ order.id)|barcode("C128", 1, 40) }}">
Execute Button Action or Integration Submission
In order to execute a button action from Order Desk using your QR code and scanner you will need to use the following code (using a button called “Blue” as an example):
<img src="{{ ("^submit_to_blue_zvoxh9^" ~ order.id)|qrcode(100) }}">
Please note: You have to have the Order Desk app open and in focus to ensure this works. Also, the output from the QR code must end in a new line.
If you wish to test this we recommend opening a text-editor, such as notepad, scanning a QR code and you should see the output to the text-editor as below, with a new line at the end.
^submit_to_blue_zvoxh9^<order-id>
If you are not using a USB Scanner but just wish to use your phone to generate links that can be pressed to activate buttons, you need to be logged in on your phone and use the code below:
<img src="{{ ("https://app.orderdesk.me/act/scanner?input=^submit_to_blue_zvoxh9^" ~ order.id)|qrcode(100) }}">
Note: For best results, we recommend using a WoneNice USB Laser Barcode Scanner. Additionally, your keyboard language must be US.
Sample Barcode Email Template
The following code is an example of an email template you can use in Order Desk that would send the customer a receipt and create barcodes on the spot. The variable field names are slightly different from the receipt template itself.
In this example a barcode is generated for every item on the order, and the barcode will read the item’s unique ID.
If you don’t see the code, please click the expand button above to open this article in a full-size window.
| <!DOCTYPE html> |
| <html lang=”en”> |
| <head> |
| <meta charset=”utf-8″> |
| <title>{{ store_name }} Receipt</title> |
| <link rel=”stylesheet” href=”{{ base_url }}/css/receipt.css”> |
| <style type=”text/css”> |
| /* CUSTOM CSS HERE */ |
| </style> |
| </head> |
| <body id=”printpage”> |
| <a href=”#” onclick=”window.print(); return false;” id=”printbutton” class=”btn noprint”>Print</a> |
| {% for key, order in orders %} |
| {{ key > 0 ? ‘<div class=”page-break”></div>’ }} |
| <div class=”main”> |
| {# This is a good place to put in a logo if you want should be https: #} |
| {# <img src=”your_image_url” alt=”{{ store_name|e }}”> #} |
| <div class=”header_logo”>{{ store_name }}</div> |
| <div class=”wrapper”> |
| <div class=”wrapper-table”> |
| <ul> |
| <li class=”invoice-title”>Receipt</li> |
| <li> </li> |
| <li><b>Date:</b> {{ order.date_added|date_modify(“+0 hours”)|date(store_date_format, store_timezone) }}</li> |
| <li><b>Order Number:</b> {{ order.source_id }}</li> |
| <li><b>Email:</b> {{ order.email }}</li> |
| {% if order.shipping.phone %}<li><b>Phone:</b> {{ order.shipping.phone }}</li>{% endif %} |
| {% if order.shipping_method %}<li><b>Shipping:</b> {{ order.shipping_method }}</li>{% endif %} |
| {# Checkout Data #} |
| {% if order.checkout_data|length > 0 %} |
| {% for key, val in order.checkout_data %} |
| <li><b>{{ key }}:</b> {{ val }}</li> |
| {% endfor %} |
| {% endif %} |
| </ul> |
| <br> |
| <table class=”address_table” cellpadding=”0″ cellspacing=”0″ border=”0″> |
| <tbody> |
| <tr> |
| <td> |
| <b>Invoice Address:</b><br /> |
| {{ order.customer.first_name }} {{ order.customer.last_name }}<br> |
| {% if order.customer.company %}{{ order.customer.company }}<br>{% endif %} |
| {{ order.customer.address1 }}<br> |
| {% if order.customer.address2 %}{{ order.customer.address2 }}<br>{% endif %} |
| {{ order.customer.city }}, {{ order.customer.state }} {{ order.customer.postal_code }}<br> |
| {{ order.customer.country != store_country ? order.customer.country }}<br> |
| </td> |
| <td> |
| <b>Shipping Address:</b><br /> |
| {{ order.shipping.first_name }} {{ order.shipping.last_name }}<br> |
| {% if order.shipping.company %}{{ order.shipping.company }}<br>{% endif %} |
| {{ order.shipping.address1 }}<br> |
| {% if order.shipping.address2 %}{{ order.shipping.address2 }}<br>{% endif %} |
| {% if order.shipping.address3 %}{{ order.shipping.address3 }}<br>{% endif %} |
| {% if order.shipping.address4 %}{{ order.shipping.address4 }}<br>{% endif %} |
| {{ order.shipping.city }}, {{ order.shipping.state }} {{ order.shipping.postal_code }}<br> |
| {{ order.shipping.country != store_country ? order.shipping.country }}<br> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| {# Show Products #} |
| <table class=”product_table” cellpadding=”5″ cellspacing=”5″ border=”0″> |
| <thead> |
| <tr> |
| <th class=”product_header”>Product</td> |
| <th class=”price_header” class=”short_cell”>Price</th> |
| <th class=”qty_header” class=”short_cell”>Qty</th> |
| <th class=”subtotal_header product_total_price_header” class=”short_cell”>Subtotal</th> |
| </tr> |
| </thead> |
| <tbody> |
| {# List of Items in Order #} |
| {% for item in order.order_items %} |
| <tr> |
| <td> |
| {{ item.name }} |
| <img src=”{{ item.code|barcode(“C128″, 2, 80) }}”> |
| {# Checkout Data and Variations #} |
| {% if item.variation_list|length > 0 %} |
| <ul> |
| {% for key, val in item.variation_list %} |
| <li><b>{{ key }}:</b> {{ val }}</li> |
| {% endfor %} |
| </ul> |
| {% endif %} |
| </td> |
| <td>{{ item.price|money_format }}</td> |
| <td>{{ item.quantity }}</td> |
| <td>{{ (item.quantity * item.price)|money_format }}</td> |
| </tr> |
| {% endfor %} |
| {# Show Totals #} |
| {% if order.shipping_total > 0 %} |
| <tr> |
| <td colspan=”3″ align=”right”><b>Shipping:</b></td> |
| <td>{{ order.shipping_total|money_format }}</td> |
| </tr> |
| {% endif %} |
| {% if order.tax_total > 0 %} |
| <tr> |
| <td colspan=”3″ align=”right”><b>Tax:</b></td> |
| <td>{{ order.tax_total|money_format }}</td> |
| </tr> |
| {% endif %} |
| {% if order.discount_list|length > 0 %} |
| {% for discount in order.discount_list %} |
| <tr> |
| <td colspan=”3″ align=”right”><b>{{ discount.name|e }}:</b></td> |
| <td>{{ discount.amount|money_format }}</td> |
| </tr> |
| {% endfor %} |
| {% endif %} |
| <tr> |
| <td colspan=”3″ align=”right”><b>Total:</b></td> |
| <td>{{ order.order_total|money_format }}</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| {# Show a Nice Shadow Image at the Bottom of The Table #} |
| <div class=”shadowimg”><img src=”{{ base_url }}/images/paper-shadow.png” width=”505″ height=”8″ alt=”shadow” /></div> |
| {# This is a nice place to put a thank-you message #} |
| <p class=”receipt_footer”></p> |
| </div> |
| {% endfor %} |
| </body> |
| </html> |
view rawsample_receipt_with_barcodes.txt hosted with ❤ by GitHub