Adding custom JavaScript/SCSS files

The Point of Sale app uses different asset bundles to manage JavaScript and style sheet files. In this recipe, we will learn how to add SCSS and JavaScript files to the Point of Sale asset bundle.

Getting ready

First, we will load an SCSS style sheet and a JavaScript file into the Point of Sale application.

How to do it…

To load assets into the Point of Sale application, follow these steps:

1. Add a new SCSS file at point_of_sale_customization/static/src/scss/point_of_sale_customization.scss and insert the following code:

   .pos .pos-content {
       .price-tag {
           background: #00abcd;
           width: 100%;
           right: 0;
           left: 0;
           top:0;
       }
   }

2. Add a JavaScript file at point_of_sale_customization/static/src/js/point_of_sale_customization.js and add the following:

   /** @odoo-module */
   console.log("Point Of Sale Javascript Loaded");

3. Register these JavaScript and SCSS files in the point_of_sale assets:

   'assets': {
         'point_of_sale._assets_pos': [
   'point_of_sale_customization/static/src/scss/point_of_sale_customization.scss',
   'point_of_sale_customization/static/src/js/point_of_sale_customization.js'
       ],
   },

4. Install the point_of_sale_customization module.

Figure 22.1 – Installing the POS Customization module

To see your changes in action, start the new session from the Point of Sale | Dashboard menu.

How it works…

So far, we have loaded one JavaScript file and one SCSS file into the Point of Sale application.

In step 1, we changed the background color of the pricing label of the product card. After installing the point_of_sale_customization module, you will be able to see changes to the pricing labels:

Figure 22.2 – The updated price labels

In step 2, we added the JavaScript file. In it, we added the log to the console. In order to see the message, you will need to open your browser’s developer tools. In the Console tab, you will see the following log. This shows that your JavaScript file has loaded successfully. Right now, we have only added the log to the JavaScript file, but in upcoming recipes, we will add more to it:

Figure 22.3 – JavaScript loaded (the log in the console)

In step 3, we added the JavaScript file and the SCSS file, as follows:

'assets': {
    'point_of_sale._assets_pos': [
         'js,scss path'
    ],
}

There’s more…

Odoo also has an add-on module for Point of Sale solutions for restaurants. Note that this Point of Sale restaurant module is just an extension of the Point of Sale application. If you want to do customization in the restaurant module, you will need to add your JavaScript and SCSS files to the same point_of_sale._assets_pos asset bundle.