How To Patch an Existing OWL Component in Odoo 19

The Odoo 19 application uses OWL to develop the web-based interface for different modules. Sometimes, there is a requirement to change the behaviour of the existing OWL widget without replacing it; this can be achieved by using the patch function of @web/core/utils/patch.

What is Patching?

Patching allows you to modify the behaviour of an existing method or introduce a new one without having to replace the entire class. In the OWL framework, the patch() function accepts two parameters:

• Class/instance that should be modified
• An instance with the new or overridden methods/properties

Patching an Order Display Component

Next, let us extend the OrderDisplay component, which is responsible for displaying the order summary, to display the total quantity of items ordered in the POS screen in Odoo 19.

To begin, we need to import the component:

import { OrderDisplay } from "@point_of_sale/app/components/order_display/order_display";

Also, we need to import the patch.

import { patch } from "@web/core/utils/patch";

Extending the template

The next step is to extend the template of the OrderDisplay to include the total number of items line:

<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template" xml:space="preserve">
    <t t-name="pos_item_counter.OrderDisplay"
       t-inherit="point_of_sale.OrderDisplay"
       t-inherit-mode="extension">
        <xpath expr="//div[hasclass('order-summary')]" position="inside">
            <div class="tax-info subentry d-flex justify-content-between w-100 fs-6 text-muted">
                <span>Total Quantity</span>
                <span t-esc="totalQuantity" class="value"/>
            </div>
        </xpath>
    </t>
</templates>

1. t-name="pos_item_counter.OrderDisplay" — declares our extension template.
2. t-inherit="point_of_sale.OrderDisplay" — targets the real Odoo 19 template name (confirmed from core source, not OrderWidget).
3. t-inherit-mode="extension" — keeps the original template's content and appends ours.
4. <xpath expr="//div[hasclass('order-summary')]" position="inside">
5. The markup style (tax-info subentry d-flex justify-content-between w-100 fs-6 text-muted) matches the classes already used by the Subtotal/Taxes rows in Odoo 19's order-summary, so the new row sits consistently.
6. <span t-esc="totalQuantity" class="value"> — renders the getter from the patch below.

Patching the component logic

Modify the OrderDisplay component to create a getter for the sum of all order line quantities:

/** @odoo-module */
import { OrderDisplay } from "@point_of_sale/app/components/order_display/order_display";
import { patch } from "@web/core/utils/patch";
patch(OrderDisplay.prototype, {
    get totalQuantity() {
        let totalQuantity = 0;
        this.order.lines.forEach((line) => (totalQuantity += line.qty));
        return totalQuantity;
    },
});

This adds a totalQuantity getter to the OrderDisplay prototype via patch. OrderDisplay doesn't receive order lines directly as a prop – it receives the full order record and exposes it through its own order getter, so the code reads this.order.lines and sums each line's qty to get the total item count.

Registering the assets

Since this logic lives in a separate custom module, make sure both files are added to the POS assets bundle in the manifest:

'assets': {
    'point_of_sale._assets_pos': [
        'pos_item_counter/static/src/js/order_widget.js',
        'pos_item_counter/static/src/xml/order_widget.xml',
    ],
},

Result

After being installed, the product addition to the POS order displays the total number of products in the order summary, along with the current subtotal/tax lines, without altering any files in the point_of_sale core module.

It is safe and possible to use the patching method to extend third-party modules and core OWL components in Odoo 19. As in your case, you need to add a getter and extend a template with a fragment by using xpath.

To read more about How to Patch Existing OWL Components in Odoo 18, refer to our blog How to Patch Existing OWL Components in Odoo 18.