Odoo Point of Sale (POS) stands out as the top all-in-one solution for overseeing retail stores, restaurants, accounting, and sales. This straightforward and intuitive interface is accessible on iPods, tablets, and laptops.
This blog will guide you through the process of overriding a component in the Point of Sale (POS). Before delving into programming, it's essential to comprehend what a component is. A widget serves as a vital element of a user interface, controlling most of Odoo's user interface components. In simpler terms, a template and a widget can be associated. Let's explore how this functions: upon initialization, the widget renders the template and appends it to the user interface.
To override a component, start by creating a JavaScript file under the directory structure: static > src > overrides > [folder name] > [file.js]. Furthermore, ensure to include the JavaScript file in the manifest file.
'assets': {
'point_of_sale._assets_pos': [
'bg_pos_customer_maximum_discount/static/src/overrides/discount_button/discount_button.js'
],
},
/** @odoo-module */
import { DiscountButton } from '@pos_discount/overrides/components/discount_button/discount_button';
import { patch } from "@web/core/utils/patch";
import { _t } from "@web/core/l10n/translation";
import { AlertPopup } from"@bg_pos_customer_maximum_discount/overrides/utils/alert_popup/alert_popup";
patch(DiscountButton.prototype,
{
if(self.pos.orders[0].partner.discount_type === 'fixed'){
const discount_percentage = self.pos.orders[0].partner.discount;
const total_amount = this.pos.orders[0].get_total_with_tax()
const disc_value = ((val/100)*total_amount)
if (disc_value > discount_percentage){
this.env.services.popup.add(AlertPopup, {
title: _t("Exceed Discount Limit!"),
body: _t("Sorry, Discount is not allowed. Maximum discount for this customer is %s", discount_percentage),
});
}else{
await self.apply_discount(val);
}
}
});
To enhance the functionality of the discount button, we begin by importing the component. Then, we proceed to patch the DiscountButton component. Here, we incorporate popup functionality, necessitating the import of the popup path. Our custom alert popup is illustrated below.
import { AlertPopup } from"@bg_pos_customer_maximum_discount/overrides/utils/alert_popup/alert_popup"Subsequently, we can implement our desired functionality as described above. This is the process for overriding a component and integrating additional features.