Modifying a .js Function for Print [QZ Tray, WooCommerce POS]

Question

I’m sure this is an easy question, but I’m struggling to understand what I’m missing here. Skip to the bottom for the actual questions.

Background

I’m modifying a WordPress POS plugin to work with QZ Tray to print receipts from the POS directly without print dialogues. Currently, the print function inside the existing plugin looks like this:

function posPrintReceipt(url, gift_receipt) {
    gift_receipt = gift_receipt || false;
    var find = '&';
    var re = new RegExp(find, 'g');

    url = url.replace(re, '&');
    url = url + '&gift_receipt=' + gift_receipt;
    if (wc_pos_params.tabs_management) {
        url = url + '&tab_id=' + jQuery('.woocommerce_order_items_wrapper .tab.active').data('tab_number');
    }
    openModal('modal-printing-receipt');
    if (jQuery('#printable').length)
        jQuery('#printable').html('');

    var newHTML = jQuery('<div></div>');

    //var container = ;
    newHTML.load(url + '#pos_receipt', function () {
        newHTML.find('title, meta').remove();
        jQuery('#printable').append(newHTML.html());
        if (jQuery('#print_barcode img').length) {
            var src = jQuery('#print_barcode img').attr('src');
            if (src != '') {
                jQuery("<img>").load(function () {
                    window.print();
                    closeModal('modal-printing-receipt');
                    wp.heartbeat.connectNow();
                    if (change_user && typeof APP_auth_show != 'undefined') {
                        APP.user_logout();
                    }
                }).attr('src', src);
            } else {
                window.print();
                closeModal('modal-printing-receipt');
                wp.heartbeat.connectNow();
                if (change_user && typeof APP_auth_show != 'undefined') {
                    APP.user_logout();
                }
            }
        }
        else if (jQuery('#print_receipt_logo').length) {
            var src = jQuery('#print_receipt_logo').attr('src');
            if (src != '') {
                jQuery("<img>").load(function () {
                    window.print();
                    closeModal('modal-printing-receipt');
                    wp.heartbeat.connectNow();
                    if (change_user && typeof APP_auth_show != 'undefined') {
                        APP.user_logout();
                    }
                }).attr('src', src);
            } else {
                window.print();
                closeModal('modal-printing-receipt');
                wp.heartbeat.connectNow();
                if (change_user && typeof APP_auth_show != 'undefined') {
                    APP.user_logout();
                }
            }
        }
        else {
            window.print();
            closeModal('modal-printing-receipt');
            wp.heartbeat.connectNow();
            if (change_user && typeof APP_auth_show != 'undefined') {
                APP.user_logout();
            }
        }
    });
}

You’ll notice there’s 5 window.print(); commands in there. I’ve found some success by switching out those print commands for a Promise chain for use with QZ Tray – as laid out in their wiki.

The command I’ve substituted for each window.print() is below. Our goal is to send 2 separate receipts to 2 separate printers at once, hence the long almost duplicated chain:

qz.websocket.connect().then(function() {      // Start of WriteDrive Modification - 1 of 5
   return qz.printers.find("Star");              // Pass the Star printer name into the next Promise
   }).then(function(printer) {
      var config = qz.configs.create(printer);       // Create a default config for the found printer
      var colA = '<h2>*&nbsp; Star HTML Printing &nbsp;*</h2>' +
                                      '<span style="color: #F00;">Find, Config & Print in 1 Function</span><br/>' +
                                      '<span style="color: #F00;">Testing for new POS</span>';
      var colB = '<img src="https://www.domain.com/logo.png">';

      var printData = [
         {
            type: 'html',
            format: 'plain',
            data: '<html>' +
            '   <table style="font-family: monospace; border: 1px;">' +
            '       <tr style="height: 6cm;">' +
            '           <td valign="top">' + colA + '</td>' +
            '           <td valign="top">' + colB + '</td>' +
            '       </tr>' +
            '   </table>' +
            '</html>'
            }
         ];  // Raw HTML Output
      return qz.print(config, printData);
   }).then(function() {
      return qz.printers.find("Boca");              // Pass the Boca printer name into the next Promise
      }).then(function(printer2) {
         var config = qz.configs.create(printer2);       // Create a default config for the found printer
         var colA = '<h2>*&nbsp; Boca HTML Printing &nbsp;*</h2>' +
            '<span style="color: #F00;">Find, Config & Print in 1 Function</span><br/>' +
            '<span style="color: #F00;">Testing for new POS</span>';
         var colB = '<img src="https://domain.com/logo2.png">';

         var printTicketData = [
            {
            type: 'html',
            format: 'plain',
            data: '<html>' +
            '   <table style="font-family: monospace; border: 1px;">' +
            '       <tr style="height: 6cm;">' +
            '           <td valign="top">' + colA + '</td>' +
            '           <td valign="top">' + colB + '</td>' +
            '       </tr>' +
            '   </table>' +
            '</html>'
            }
            ];  // Raw HTML Output
         return qz.print(config, printTicketData);
    }).then(function () {qz.websocket.disconnect()}).catch(function(e) { console.error(e); });

All of which tests well – when swapping the print.window() commands for the QZ chain, the testing html prints to each printer.

Problems

First, I’m getting confused in the setup here. From the initial posPrintReceipt function, am I attempting to print what’s inside the newHTML variable? or something else altogether?

2nd, I’m not sure if I’m laying out the data properly in HTML. So far, I’ve mainly tried the following inside one of the print chains:

function(printer) {
   var config = qz.configs.create(printer);       // Create a default config for the found printer

   var printable = newHTML;

   var printData = [
      {
      type: 'html',
      format: 'plain',
      data: '<html>' +
      '   <table style="font-family: monospace; border: 1px;">' +
      '       <tr style="height: 6cm;">' +
      '           <td valign="top">' + printable + '</td>' +
      '       </tr>' +
      '   </table>' +
      '</html>'
      }
      ];  // Raw HTML Output
   return qz.print(config, printData);

Swapping out the ‘printable’ variable for a few ideas. Everything so far only prints out a single [object Object] line in the final print. Some other ideas I’ve thrown into that variable:

JSON.stringify(data);  // 'data' is from another function, seems to hold all of the order's data from WooCommerce
jQuery('#printable');
jQuery('#pos_receipt');

Am I just missing something simple in turning JQuery objects into printable HTML? Or is there a way inside of the QZ Tray printData area to simply pull the info from the function it’s inside of?

Any help would be appreciated. Thank you.

0
, , , Curtis B 2 years 2019-12-26T16:49:26-05:00 0 Answers 73 views 0

Leave an answer

Browse
Browse