How to modify Payment Interface in POS (Odoo 10)

Question

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.

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>

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

Juan Salcedo Juan Salcedo · Accepted Answer · 2018-07-14T02:06:35

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.

How to modify Payment Interface in POS (Odoo 10)

1 Answers