Skip to Content
This question has been flagged
widgetpoint_of_salePoint Of Sale
4 Replies
7986 Views
Avatar
Thanh Loyal

Hello,

I need to add a few things to the Point of sale screen. In details, I need to add some custom HTML elements to ClientDetails widget. I know that the widget is defined in point_of_sale/static/src/xm/pos.xml, <t t-name="ClientDetails">. If I modify code there, changes will be made immediately. But I don't want to hack into the core. I want to write a custom module to modify (override) that widget.

I did read these:

https://www.odoo.com/documentation/8.0/howtos/web.html

and "template inheritance" in:

https://www.odoo.com/documentation/8.0/reference/qweb.html#calling-sub-templates

but still don't know how to do that.

Please help.

Thank you!

Avatar
Discard
Avatar
Axel Mendoza
Best Answer

It's not the same, those docs refers to qweb templates in other scenarios like reports and qweb, your situation involve qweb templates for js views and there are some diferences.

In your custom module you need to create an xml file for define the client qweb templates, new or extensions in a path below /static/ conventions use /static/src/xml/

In that file you need to define your templates definitions. For your case you could just copy and paste the original template to change it in place like:

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="ClientDetails">
        <section class='client-details'>
            <div class='client-picture'>
                <img t-att-src='widget.partner_icon_url(partner.id)' />
            </div>
            <div class='client-name'><t t-esc='partner.name' /></div>
            <div class='edit-buttons'>
                <div class='button edit'><i class='fa fa-pencil-square' /></div>
            </div>
            <div class='client-details-box clearfix'>
                <div class='client-details-left'>
                    <div class='client-detail'>
                        <span class='label'>Address</span>
                        <span class='detail client-address'><t t-esc='partner.address' /></span>
                    </div>
                    <div class='client-detail'>
                        <span class='label'>Email</span>
                        <span class='detail client-email'><t t-esc='partner.email' /></span>
                    </div>
                    <div class='client-detail'>
                        <span class='label'>Phone</span>
                        <t t-if='partner.phone'>
                            <span class='detail client-phone'><t t-esc='partner.phone' /></span>
                        </t>
                        <t t-if='!partner.phone'>
                            <span class='detail client-phone empty'>N/A</span>
                        </t>
                    </div>
                </div>
                <div class='client-details-right'>
                    <div class='client-detail'>
                        <span class='label'>Barcode</span>
                        <t t-if='partner.ean13'>
                            <span class='detail client-id'><t t-esc='partner.ean13'/></span>
                        </t>
                        <t t-if='!partner.ean13'>
                            <span class='detail client-id empty'>N/A</span>
                        </t>
                    </div>
                    <div class='client-detail'>
                        <span class='label'>Tax ID</span>
                        <t t-if='partner.vat'>
                            <span class='detail vat'><t t-esc='partner.vat'/></span>
                        </t>
                        <t t-if='!partner.vat'>
                            <span class='detail vat empty'>N/A</span>
                        </t>
                    </div>
                </div>
            </div>
        </section>
    </t>
</templates>
next you need to register that file to be loaded in the __openerp__.py under the key 'qweb'.
This only will change the widget visually, if you need to change some other behavior you will need to do it using js widget inheritance. 

Avatar
Discard
Thanh Loyal
Author

Hi Axel Mendoza, thank you for your answer. I think copy and paste template from original module to custom module is one method and it works. But I prefer the "extend" way. I made mistakes and that's why my code did not work. I reviewed and edited it and now my new element shows up. All I have to do is extending the ClientDetails template like this: My Custom Element

Thanh Loyal
Author

Oops! I am not familiar with the editor of this forum. I even can't edit my comment. Here is the code: 


    
        
            Lịch sử mua hàng
Thanh Loyal
Author

Oh, no. I'm gonna post to an answer. :D

Axel Mendoza

Then you have solve it?

Thanh Loyal
Author

New button shows up but click does not work. 

var historyButton = this.$el.find("#history_button");
console.log(historyButton);   //
Thanh Loyal
Author

var historyButton = this.$el.find("#history_button"); console.log(historyButton); // [prevObject: jQuery.fn.jQuery.init[1], context: undefined, selector: "#history_button"] // BUT historyButton.click(function () { console.log("Clicked. Now show history"); // does not work. });

Avatar
Thanh Loyal
Author Best Answer 
<templates id="template" xml:space="preserve">
     <t t-extend="ClientDetails">
        <t t-jquery="div.edit-buttons" t-operation="prepend">
            <span class="sc_button sc_history">Custom element</span>
        </t>
    </t>
</templates>
Avatar
Discard
Related Posts Replies Views Activity
How to inherit point_of_sale action_pad.xml?
point_of_sale Point Of Sale
Avatar
Avatar
1
Dec 24
39
Custom filter odoo 17
point_of_sale Point Of Sale
Avatar
0
Dec 24
43
Looking for a solution to "MODULE ERROR Adjusting the price is not allowed".
point_of_sale Point Of Sale
Avatar
Avatar
1
Jan 21
1403
How to inherit POS javascript for customization? Solved
point_of_sale Point Of Sale
Avatar
Avatar
Avatar
Avatar
6
Nov 19
13069
Can't access Point of Sale ValueError: Expected singleton: pos.session(95, 94)
point_of_sale Point Of Sale
Avatar
1
Mar 17
2797