DEV Community

Cover image for Extending the Rewards Button class in the Point of Sale
Jeevachaithanyan Sivanandan
Jeevachaithanyan Sivanandan

Posted on

Extending the Rewards Button class in the Point of Sale

Extending the Rewards Button class in the Point of Sale (PoS) module involves creating a custom module with JavaScript code to modify the behavior of the Rewards Button. Here's a step-by-step guide:

  1. Create a Custom Module:

Create a new module for your customization. Let's call it custom_pos_rewards.

custom_pos_rewards/
|-- __init__.py
|-- __manifest__.py
|-- static/
|   `-- src/
|       `-- js/
|           `-- custom_pos_rewards.js
`-- views/
    `-- pos_template.xml
Enter fullscreen mode Exit fullscreen mode
  1. Define the Manifest File (manifest.py):
{
    'name': 'Custom POS Rewards',
    'version': '14.0.1.0.0',
    'category': 'Point of Sale',
    'summary': 'Customize POS Rewards Button',
    'description': """
        Customize the behavior of the Rewards Button in the Point of Sale.
    """,
    'depends': ['point_of_sale'],
    'data': [
        'views/pos_template.xml',
    ],
    'qweb': [
        'static/src/xml/custom_pos_rewards.xml',
    ],
    'auto_install': False,
    'installable': True,
}
Enter fullscreen mode Exit fullscreen mode
  1. Define the POS Template (pos_template.xml):

Create a simple XML file to load your JavaScript code in the Point of Sale interface.

<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="PointOfSale.assets">
        <t t-call-assets="PointOfSale.assets"/>
        <script type="text/javascript" src="/custom_pos_rewards/static/src/js/custom_pos_rewards.js"></script>
    </t>
</templates>
Enter fullscreen mode Exit fullscreen mode
  1. Define the JavaScript Code (custom_pos_rewards.js):

Write the JavaScript code to extend the Rewards Button class. This code will be executed when the Point of Sale interface loads.

odoo.define('custom_pos_rewards', function (require) {
    "use strict";

    const PosBase = require('point_of_sale.PosBase');

    const CustomRewardsButton = PosBase.PosComponent.extend({
        template: 'CustomRewardsButton',

        // Override the click behavior of the Rewards Button
        click() {
            this.showRewardsMessage();
            this._super.apply(this, arguments);
        },

        // Custom method to show a message when Rewards Button is clicked
        showRewardsMessage() {
            this.env.pos.alertMessage({
                title: 'Rewards Button Clicked',
                body: 'Custom message to show when Rewards Button is clicked.',
            });
        },
    });

    // Register the custom Rewards Button class
    const CustomRewardsButtonWidget = PosBase.PosComponent.extend(CustomRewardsButton);
    PosBase.PosWidget.include({
        build_widgets() {
            this._super.apply(this, arguments);
            this.widgets.push({
                name: 'custom_rewards_button',
                widget: CustomRewardsButtonWidget,
                append: '.control-buttons',
            });
        },
    });

    return {
        CustomRewardsButton,
    };
});
Enter fullscreen mode Exit fullscreen mode
  1. Reload the Module:

After creating the module, install or upgrade it in your Odoo instance. You can do this through the Odoo web interface or by using Odoo command-line tools.

  1. Test the Customization:

Open the Point of Sale interface and click on the Rewards Button. You should see your custom message displayed.

This is a basic example, and you can further customize the JavaScript code based on your specific requirements. Remember to adapt the module and code according to the version of Odoo you are using.

Top comments (0)