Adding a Barcode to Order Printer via JavaScript in Asset Folder

Highlighted
Tourist
4 0 1

Hello..We're trying to add a barcode to Order Printer some HTML placed in the order printer template that references a Javascript uploaded to the theme's Assets. The problem is that using the liquid command Asset URL doesnt seem to let you reference the javascript code from the Order Printer. Has anyone tried this? How would you be able to access javascript from the Order Printer template?

{{ 'code39' | asset_url | script_tag }}

 

Thanks in advance.

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
338 0 56

Hi Andrew,

You're not able to add javascript to the order printer templates. Only HTML5 and CSS3 are applicable.

Alicia | Support Lead for Shopify
0 Likes
Highlighted
Tourist
4 0 1

Hi Alicia, thanks for the info. Is there any solution you are aware of that could generate a barcode on the order output page?

Andrew

0 Likes
Tourist
4 0 1

Figured out one way to get this done without javascript!

I used barcodesinc.com barocode generator URL to generate the barcode. I placed the code below into the HTML of the template and subitituted the {{ order_number }} varibale for the code. When the URL is called, it returns the order number as a barcode image file and is placed on the page using the <img> tag

A quick and easy fix for turning any of the data into a printable barcode on your invoices or packing slip.

 

Place this code into your order template:

<img src="https://www.barcodesinc.com/generator/image.php?code={{ order_number }}&style=197&type=C39&width=200%&height=65px&xres=1&font=2" alt="the barcode printer: free barcode generator" border="0" width="200" height="75">

 

Andrew

 

Highlighted
Shopify Partner
2471 129 406

Very nice, be sure to check how your orders display if that script doesn't work(service outage).

Don't want to batch a 100 blank slips.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted

It is possible to use javascript in the Order Printer app, no problems at all. You just cannot use the script_tag for including the file itself ;)

Here's what I do in my Order Printer Templates app to include barcodes in the designs, using the free/open-source https://github.com/lindell/JsBarcode plugin:

<script>
    $.ajaxSetup({
      cache: true
    });
    // LINK TO THE JAVASCRIPT NEEDED FOR BARCODES
    // SEE https://github.com/lindell/JsBarcode
    // YOU COULD CHANGE THIS TO BE HOSTED ON YOUR SITE
    var url = "https://orderprintertemplates.com/JsBarcode.all.min.js";
    // OPTIONS FOR SIZE AND TYPE ETC.
    var options = {
      format: "CODE128",
      width: 1,
      height: 14,
      quite: 1,
      lineColor: "#000000",
      displayValue: false, //Show the text below the barcode (can be true or false)
      fontSize: 13,
      font: "Arial",
      textAlign: "left"
    }
    // FIND AND INSERT BARCODES AT THE MARKERS
    $.getScript( url, function() {
      // Barcode Generator for Products
      $('.product-barcode').each(function(){
          var productBarcode = String($(this).data('barcode'));
          if (productBarcode != null || productBarcode != ''){
            $(this).JsBarcode(productBarcode, options);
          };
       });
    });
</script>

.... rest of your template code goes down here

Then you just place the below code in your HTML, where you want the barcode to show up:

<img class="product-barcode" data-barcode="{{ line_item.variant.barcode }}"/>

And voila!

Hope this helps!

Cheers
Bjorn

Of course if you  want to save yourself the hassel of coding it up yourself, check out my Order Printer Templates app.. it a simple one time purchase ;)
https://apps.shopify.com/order-printer-templates

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
Highlighted
Tourist
4 0 1

Very cool of you to post this Bjorn. Works perfectly. Is it ok to keep the reference to the barcode plugin on your site? Or is it better to host this somewhere else and reference it?

Regards,

Andrew

 

0 Likes
Highlighted

Hi Andrew,

Glad you like the solution :) You are welcome to keep the reference to the barcode plugin to my app, it will continue to be available there.

If you (or anyone else reading this) do want to host it yourself, here's what you would do:

1. Upload the javascript file called "JsBarcode.all.min.js" to your Shopify Admin (Shopify Admin -> Settings -> Files -> Upload file)
2. Once uploaded, copy the url that Shopify shows for the file
3. Replace in the code, the part in quotes below, with the copied url:

var url = "https://orderprintertemplates.com/JsBarcode.all.min.js";

Enjoy your weekend when you get there.

Cheers,
Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
Highlighted
Shopify Partner
6 0 0

I tried what you recommended but no dice.  You can’t include the <script> tag in the template so what’s the alternative option to include the script/

0 Likes
Highlighted

Try creating a new template instead of updating an existing one, then it will save ;)

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
0 Likes