@BrianHenderson thanks for the reply! appreciate this so much
In my current POS, they have a mobile application that can be downloaded in google play and we are using Android Tablet to use the Store POS interface.
I’m curious if this is feasible if we will push using bubble.io as a backend and we will use other platforms to create a mobile app and will connect to bubble.io for data sync?
Also, same with a cash drawer, does the bubble have the functionality to connect with two Bluetooth for printing receipts and printing very small stickers that include the name of the customer and the product they ordered which will be put in the cup?
Brian, do you have to write a plug-in in bubble io or do you just pop in some JavaScript without writing a plug-in to get jsprintmanager to work?
Thanks
Hi @cookjeremiah, no plug-in is needed aside from the free Toolkit plugin to trigger javascript in workflows.
With the JSPrintManager software from Neodynamic then all you need to do is upload a few javascript files to your app and then put some code in an HTML container on your page. That’s it! If you basically just copy & paste some of their example code into an HTML element in Bubble then it works almost immediately.
I love that they allow you to test and build as much as you want for free, and only when you’re ready to go live in production then you’re required to buy a license from them. Extremely generous and extremely fair to see if it’s a solution that will work well for you before buying.
I can speak from experience to say their tech support service is also top notch. They were very patient with me as I figured out how to get everything to work
Learning the ESC/POS and ZPL languages to build my receipts and labels was a fascinating process. Every time I got a receipt from a store or restaurant I was always studying it to relate to what I had figured out for my app . It was well worth the time invested though because now I can use just about any receipt printer or label printer that I want! There’s something delightfully anachronistic about injecting dynamic values from Bubble into javascript code to control an ESC/POS device. I didn’t know a lick of javascript or ESC/POS before starting this process but I’ve pieced enough of it together that I achieved my goal and launched a successful product into the hands of real live users.
Thanks for sharing your experience with JSPM, it looks promising.
I started implementing JSPM but I probably messed up somewhere.
Here are the steps I followed :
Install JSPrintManager Client App. This step seems alright since I am able to print ESC/POS from the testing URL
Download JSPrintManager.js and uploaded all the JS files (components and scripts) in my app. I am able access the files through the AWS url. I wonder if I did something wrong with the naming ? Should the name contain the .js extension ?
Add the HTML component to the page
I can see the HTML on the page preview but installed printers are not retrieved
Add the script reference to the Page HTML Header
Add the Script Code to an HTML component on the page
So I think there is some issues with steps 4 and 5. How does the HTML component that display the checkbox and button know what to print ? Is the script suppose to be in the header ?
This is pretty new to me so any help would be appreciated
I’m glad you got it working on their testing URL - that’s great news! I’ve used it many times for a “reality check” to make sure it wasn’t my hardware that had failed somehow
I think that you’ll want to remove the jquery script reference, since Bubble handles that already. I remember running into that issue myself back when I first got started.
I’m sure adding the script references to the header in the way you did is perfectly fine. For myself, I went to the “SEO / Metatags” tab of the Bubble editor and added my script references to the “script in the body” section. Seemed to work for me.
I found copying and pasting the code from this example page was easiest for me to get working. You’ll need to put both the “HTML Code” and “Script Code” sections together into one HTML element on a page in your Bubble app.
Once you can get that example to print, then it’s a matter of learning how to substitute Bubble dynamic values here and there, how to work with Javascript, and how the ESC/POS language works. I’m not going to pretend to have any sort deep understanding of any of it - it was more of a “hammer it out until it works” kind of process.
Oh, and one more thing for when you start subbing in Bubble dynamic values - be sure to use the Javascript escape character (the backslash \ ) before apostrophes and quotation marks (\’ and \") when printing strings or else nothing will print. I usually append the “:find and replace” function to user-submitted values that I suspect might potentially have those characters.
So I removed the script reference from the page header to add it to the SEO/metatags tab in Script in the body and removed the jquery line. I might try to put it back to the page header once I am able to print my first receipt but let’s do it that way for the moment.
Oh, and one more thing for when you start subbing in Bubble dynamic values - be sure to use the Javascript escape character (the backslash \ ) before apostrophes and quotation marks (\’ and ") when printing strings or else nothing will print. I usually append the “:find and replace” function to user-submitted values that I suspect might potentially have those characters.
Thanks for that too, I bet that will save me a lot of time
I found part of your problem - you need to provide the actual URL of the file for JSPrintManager.js that you uploaded. It can’t be just <script src="JSPrintManager.js"></script> Instead we’re expecting to see something that starts with https://s3.amazonaws.com/
I see it’s been uploaded more than once, you might want to get rid of the duplicates.
I don’t think this advice will solve all your problems but it’s a start.
Also, I’m remembering that I too had difficulties with getting the list of installed printers to work. Instead, try just directly typing in the name of your printer instead of trying to use that dropdown menu in the example code to select one.
Hi,
I’ve gone over @BrianHenderson and @pierre6 conversation several times and I just get a blank page when I load it up.
The Chrome console shows me a “$.ajax is not a function” error and I can’t seem to work out why.
. It was well worth the time invested though because now I can use just about any receipt printer or label printer that I want! There’s something delightfully anachronistic about injecting dynamic values from Bubble into javascript code to control an ESC/POS device. I didn’t know a lick of javascript or ESC/POS before starting this process but I’ve pieced enough of it together that I achieved my goal and launched a successful product into the hands of real live users.
