Enable Dark Mode!
how-to-add-pop-up-widget-in-odoo-pos.png
By: Cirin C Baby

How to Add Pop-Up Widget in Odoo POS

Technical Pos

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


Here, in this blog, I will be showing you how to add a popup widget in 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, it remains intuitive and efficient. Moreover, with features such as a 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 by grabbing the attention of customers by showing discounts and other promotional deals. Let's now look at an example to see how to add a pop-up widget in Odoo POS.


Example:

how-to-add-pop-up-widget-in-odoo-pos


In the above screenshot, you can see a popup named “Unknown Barcode”. Now, I am going to remove the above popup and add another popup for unknown barcodes. That can be done initially by extending these pop-ups and we need js, XML files, and more.


Furthermore, 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. Nextly we should add 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>


In addition, the below XML file is used to inherit  point_of_sale.assets and add a 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. As the final result is shown in the below image, you can see that the popup has changed as given in the NoBarcodeFound Template.


how-to-add-pop-up-widget-in-odoo-pos


This is how the pop-up widget is added in the Odoo Point of Sale module.



If you need any assistance in odoo, we are online, please chat with us.



1
Comments

Sithija

Is it possible to add a welcome popup when a new user logins first time to odoo. Please advice with the method

03/05/2020

-

5:27AM



Leave a comment

 


whatsapp_icon
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message