How to Override a Widget in the Odoo 18 POS

Odoo 18 Point of Sale (POS) is a powerful and flexible retail management tool within the Odoo ERP ecosystem. It provides seamless integration with other Odoo applications, supporting real-time inventory updates, customer loyalty programs, and multi-store management. With its user-friendly interface and support for both online and offline operations, Odoo POS is designed to cater to diverse retail environments.

This guide explains how to override a widget in Odoo 18 POS. Widgets are core components of the POS interface, allowing customization and enhancement of its functionality. By patching an existing widget, you can dynamically tailor the interface to specific business needs. We’ll demonstrate this by adding an alert popup when clicking an order line.

Step 1: Create a New Module

First, create a custom module to house your changes. Inside the module directory, create a JavaScript file under static/src/js. Then, update the module's manifest file to include this file:

'assets': {
    'point_of_sale._assets_pos': [
        'your_module_name/static/src/js/pos_widget_override.js',
    ],
},

This ensures the POS system loads your custom script.

Step 2: Patch the Widget

In this example, we’ll patch the OrderSummary widget to extend the functionality of clickLine function. Below is the base structure for the override:

/** @odoo-module */
import { OrderSummary } from "@point_of_sale/app/screens/product_screen/order_summary/order_summary";
import { patch } from "@web/core/utils/patch";
patch(OrderSummary.prototype, {
    setup() {
        super.setup(...arguments);
    },
});

The above code extends the OrderSummary widget, allowing us to introduce additional functionality.

Step 3: Add Custom Functionality

Next, we override the clickLine() method to display an alert dialog that provides vital product information. This method will now show an alert popup with the product’s price and invoicing policy when an order line is clicked.

Here’s the implementation:

/** @odoo-module */
import { patch } from "@web/core/utils/patch";
import { OrderSummary } from "@point_of_sale/app/screens/product_screen/order_summary/order_summary";
import { AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { _t } from "@web/core/l10n/translation";
patch(OrderSummary.prototype, {
    clickLine(ev, orderline) {
        this.dialog.add(AlertDialog, {
            title: _t(orderline.product_id.name),
            body: _t("'Price : %s - invoice_policy : %s'",orderline.product_id.lst_price,
                       orderline.product_id.invoice_policy),
        });
        super.clickLine(ev, orderline)
    }
});

Here’s what happens in this code:

When a user clicks an order line, an AlertDialog pops up, showing the product name, its price, and the invoicing policy. The use of _t() ensures that your dialog text can be easily translated for different locales. After showing the alert, the original functionality of clickLine is maintained by calling super.clickLine(ev, orderline).

Step 4: Test the Customization

Now open the point of sale and create an order, then click an order line, then it shows the information regarding the product in the orderline as shown below

Overriding a widget in Odoo 18 POS is straightforward and allows for extensive customization of the interface. By using the modular architecture, businesses can implement tailored solutions to enhance user experience and ensure operational efficiency. This example demonstrates the flexibility of Odoo POS and its capacity to meet specific business requirements.

To read more about How to Override Widget in the Odoo 17 POS, refer to our blog How to Override Widget in the Odoo 17 POS.