Adding a Barcode to Order Printer via JavaScript in Asset Folder

Highlighted
Shopify Partner
57 0 13

Hi, I dont like apps, could be problems in future so I prefer to know how to do this withput buying an  app for 120USD per year and with future problems with other apps.

Thanks for your help but must be a solution without and app. thanks.

0 Likes
Highlighted
Shopify Expert
2 0 0

One option that we've used with some success with clients is a barcode font. I think in the original example you were looking to include a Code 39 encoded barcode and this would be a perfect solution in this instance. For these situations where you might want to encode arbitrary information of no fixed length or format Code 39 might be a good way to go. In this situation you might try a font like this one https://fonts.google.com/specimen/Libre+Barcode+39+Text

 

The use case would be to include the font in your order printer template, and then apply to the font to the information you'd like to encode, starting and ending the information with an asterisk.

 

For example to create a Code 39 barcode of the order number we might use:

 

<!-- Importing the font -->
<link href='https://fonts.googleapis.com/css?family=Libre Barcode 39 Text' rel='stylesheet'>
<!-- Creating the styling for the font --> <style> .barcode { font-family: 'Libre Barcode 39 Text'; font-size: 40px; } </style>

<!-- Encoding the information in the special font, making sure to start and finish with an asterisk --> <div class="barcode">*{{ order_name }}*</div>

 

Hope this helps!

 

Luke

 

0 Likes
Highlighted
Shopify Partner
57 0 13
Hi Luke, thanks a lot.
I thought about it
We want to use code128 as is the font that shopify uses for barcodes.

That's mean that we can use a font, but when need to calculate the code.

I think about saving the code (in code128 "language") in product's barcode "column", but that way shopify won't be able to generate barcodes properly, as it will code again the code that you put in barcode column.

I think someone from shopify has to explain us how we can add JavaScript.

I see that order templates uses that functionality without any app, so .... Does this app work today ?

Please, shopify, explain us. May be loading the template with api ? (I have to checl if api lets to create or save a new template)

Thanks
0 Likes
Highlighted
Shopify Partner
57 0 13

Hi, anyone from Shopify could check this and open a ticket for solve this recently/new bug ?

Thanks

0 Likes
Highlighted
Shopify Expert
2 0 0

You should be able to use a similar method to the one I described above to encode arbitrary content in Code 128. I believe the trick is to do the conversion in liquid, starting with the unadulterated barcode value, then using liquid to compute the Code 128 checksum value and formatting appropriately. Then apply your Code 128 font to the field.

 

Honestly though these kind of implementations look a bit obtuse from a code-readability point of view. But I do believe it can be done.

0 Likes
Highlighted
Shopify Partner
57 0 13

Thanks @LJWebSolutions 

 

I have the visualstudio code for do the math, but i need to search how to do that in liquid. Could I post here the code and work together with anyone?

0 Likes
Highlighted
Shopify Partner
57 0 13

Hi, I have check that liquid hs very poor support for "doing maths", or ascii character table, and codes ... is there any other way to do the math to get code128 encnded? Thanks

0 Likes
Highlighted
New Member
1 0 0

When I try to buy the template, shopify check out kept showing me errors. sad

0 Likes
Highlighted
New Member
1 0 0

Hi there,

 

That's great! But how do I do this automatically for every order?

0 Likes