Application Router

Now that you have added a new menu item using POS Params and you've enqueued your custom javascript file, it's now time to add your page to the application router.

WooCommerce POS uses Backbone Marionette to provide a framework for routing and rendering views. If you are not familiar with Marionette you should read the docs on AppRouter and ItemView which will be used below. Note that both the POS application and Marionette framework are available as global variables.

// my-custom-pos-page.js

(function(app, Marionette){

  // create a new Marionette View
  var View = Marionette.ItemView.extend({
    template: function(){
      return 'Hello World!';
    }
  });

  // create a new application Route (Controller)
  var CustomRoute = app.Route.extend({
    render: function(){
      var container = app.layout.getRegion('main');
      var view = new View();
      container.show(view);
    }
  });

  // add the route to the application Router
  var CustomRouter = app.Router.extend({
    routes: {
      'my-custom-page' : function(){
        return new CustomRoute();
      }
    }
  });

  new CustomRouter();

}(POS, Marionette));

This simple examples renders 'Hello World' to the main application region. Obviously routes (controllers) and views can be a lot more complicated. For more details examples you should review the WooCommerce POS source code.