The Widget class is extremely a significant structure for a user interface. It is considered to be the important building blocks for the UI. Basically, everything in the user interface is under the influence of a widget. And the Widget class, therefore, is characterized in the module web.Widget, in widget.js.

Via this blog, I will be showing you how to add a popup widget in the Odoo’s point of sale module. We know Odoo’s point of sale is rich in functionality. Right from managing a single store to the complete management of a restaurant/bar, Odoo’s point of sale remains intuitive and efficient. Features like barcode scanner to process point of sale orders, loyalty points and discount programs, configuration of different payment methods, floor/table management, kitchen order printing, Odoo POS simply enhances the performance and experience of the application user. 

A pop-up further enhances the functionality of the websites via grabbing the attention of customers by showing discounts and other promotional deals. 

So, let’s see how to add pop-up widget in Odoo POS.

Here is an example:

In the above screenshot, you can see a popup named “Unknown Barcode”. 

So now, am going to remove the above popup and add another popup for unknown barcodes.

For that, firstly we need to extend these popup and we need js, XML files and more.

We can do the pop-up extension via using the following JS code.

odoo.define('javascript_tutorial.tutorial', function (require) {
"use strict";
var gui = require('point_of_sale.gui');
var popups = require('point_of_sale.popups');
var ErrorBarcodePopupChanged = popups.extend({
    template:'NoBarcodeFound',
    show: function(barcode){
        this._super({barcode: barcode});
    },
});
gui.define_popup({name:'error-barcode', widget: ErrorBarcodePopupChanged});
});

As in the above Js file, we are going to add a new pop-up for an unknown barcode,  firstly we need to extend point_of_sale.popups to create a new template -NoBarcodeFound. Next to adding the show function to it.

Followed, adding this extended widget to the existing popup “error-barcode”. So upon calling this widget again, the NoBarcodeFound Template will be loaded.

Template defined in XML as:

<t t-name="NoBarcodeFound">
        <div role="dialog" class="modal-dialog">
            <div class="popup popup-barcode" style=style= "height: 200px;width: 30%;background-color: #e6b4ed">
                <header class="title">Unknown Barcode
                    <br />
                    <span class='barcode'>
<t t-esc="widget.options.barcode"/>
</span>
                </header>
                <main class="body">
                   There is no such a barcode
                </main>
                <footer class="footer">
                    <div class="button cancel">
                        Cancel
                    </div>
                </footer>
            </div>
       </div>
 </t>

The below XML file is used to inherit  point_of_sale.assets and adding path to the files in it.

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="pos_extend_assets" inherit_id="point_of_sale.assets">
        <xpath expr="." position="inside">
<script type="text/javascript" src="/javascript_tutorial/static/src/js/tutorial.js"/> 
        </xpath>
    </template>
</odoo>

Inside point_of_sale.assets template, we should call our javascript file.

In the below image, you can see popup has changed as given in the NoBarcodeFound Template.

This is how pop-up widget is added in Odoo Point of Sale. Hope the blog was useful to you.