CODEWITHSUNDEEP
javascriptxmlodooodoo-10point-of-sale
law rence
law rence

Reputation: 179

How to modify Payment Interface in POS (Odoo 10)

I am currently struggling in POS on Odoo. I am new in modifying the front-end of Odoo using Javascript.

I already look at different module but I am confuse and I already searched it but I found the related problems and solutions in the older version of Odoo which is version 8 and 9.

All I want to do is to add the "Care of" button below the "Cash (USD)" button in the payment interface and add some functions.

payment interface

but

it appears in left pane above the numpad pane.

using this line of codes.

pos_custom/static/src/js

pos_custom.js

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

var screens = require('point_of_sale.screens');

var careOfButton = screens.ActionButtonWidget.extend({
    template: 'careOfButton',

    button_click: function(){
        var self = this;
        this.gui.show_popup('selection',{
            'title': 'Welcome to JS world',

        });
    },

});

    screens.define_action_button({
        'name': 'careOf',
        'widget': careOfButton,
    });
});

pos_custom/static/src/xml

pos_custom.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <t t-name="careOfButton">
        <div class='control-button'>
            <i class='fa fa-tag' /> Care of
        </div>
    </t>

</templates>

wrong output

Please help me. Any suggestions/ possible solutions. Thank you

Upvotes: 1

Views: 1574

Answers (1)

Juan Salcedo
Juan Salcedo

Reputation: 1668

You have to inherit the template PaymentScreen-Paymentmethods and place your button after all payment methods, your template should be like this:

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" inherit_id="point_of_sale.template">

<t t-extend="PaymentScreen-Paymentmethods">
    <t t-jquery="div[class='paymentmethods']" t-operation="after">
        <div class='control-button'>
            <i class='fa fa-tag' /> Care of
        </div>
    </t>
</t>

For jquery selector take a look the documentation.

I hope this answer can be helpful for you.

Upvotes: 1

Related Questions