如何在Odoo 11的POS界面添加自定义按钮？

Let's walk through fixing your POS button issue step by step—your core approach is right, but there are a few syntax and configuration tweaks needed to get it working in Odoo 11 CE.

First, let's break down why your current code isn't working: #

• You're targeting the wrong asset bundle (using web.assets_backend instead of POS-specific assets)
• Syntax errors in your JS file (unclosed functions, invalid selectors, missing variable declarations)
• Incorrect selector for the button container in Odoo 11's POS UI

1. Update views/templates.xml (Target POS Assets) #

Odoo 11 loads POS resources separately from the backend. You need to inherit the POS-specific asset bundle instead of the general web backend assets:

<?xml version="1.0"?>
<openerp>
    <data>
        <template id="assets_pos_custom" name="pos_custom assets" inherit_id="point_of_sale.assets">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/pos_custom/static/src/js/pos_custom.js"></script>
            </xpath>
        </template>
    </data>
</openerp>

2. Fix pos_custom.js (Syntax & Selector Corrections) #

Your JavaScript had unclosed functions, missing variable declarations, and an incorrect container selector. Here's the cleaned-up version:

odoo.pos_custom = function(instance){
    var module = instance.point_of_sale;
    var round_pr = instance.web.round_precision;
    var QWeb = instance.web.qweb;

    console.log("POS JS Loaded");

    module.PosWidget.include({
        build_widgets: function(){
            this._super(); // Call the parent method first to preserve default widgets
            var self = this;

            // Render the custom button from your QWeb template
            var custom_btn = $(QWeb.render('custom_btn'));

            // Add click functionality
            custom_btn.click(function(){
                alert("Hello from custom POS button!");
            });

            // Append to the built-in POS control buttons container
            custom_btn.appendTo(self.$control_buttons);
            console.log("Custom button added:", custom_btn);
        }
    });
};

Key fixes here:

• Closed all function brackets and added missing semicolons
• Used var for custom_btn to avoid global scope issues
• Replaced the incorrect .control-button selector with self.$control_buttons (a built-in property of PosWidget in Odoo 11)
• Ensured this._super() is called before adding your custom button to maintain default POS functionality

3. Tweak pos_custom.xml (Optional UI Improvement) #

Your template works, but adding Bootstrap classes will make the button match Odoo's POS styling:

<?xml version="1.0" encoding="UTF-8"?>
<templates xml="template" xml:space="preserve">
    <t t-name="custom_btn">
        <button class="btn btn-primary">Custom POS Button</button>
    </t>
</templates>

4. Keep manifest.py (Your Setup is Correct) #

Your manifest file is already properly configured—no changes needed here:

{
    'name': 'Point Custom Module',
    'version': '1.2',
    'category': 'Point of Sale',
    'summary': 'Custom Point of Sale ',
    'description': "",
    'data': [
        "views/templates.xml"
    ],
    'depends': ['point_of_sale'],
    'qweb': ['static/src/xml/*.xml'],
    'application': True,
}

Final Testing Steps: #

1. Uninstall and reinstall your custom module (or upgrade it via the Apps menu)
2. Clear your browser cache (critical for Odoo to load updated JavaScript files)
3. Open the POS interface—you should now see your custom button in the control bar!

The main issues were targeting the wrong asset bundle and small syntax errors in your JS. Odoo 11's PosWidget does include the build_widgets method, so you don't need a separate widgets.js file—your initial approach was correct once these tweaks were applied.

内容的提问来源于stack exchange，提问作者Kyaw Zin Oo