Add js in odoo 9

Question

I want to extend OrderWidget in Point of Sale and display date in between the h2 tag.

  <script>
    var d = new Date();
    var strDate = d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();
    $("#div1").load(strDate);
  </script>

---

i have inherited the template of OrderWidget like this.

<?xml version="1.0" encoding="UTF-8"?>
  <templates id="template" xml:space="preserve">
  <t t-extend="OrderWidget" >
  <t t-jquery=".order-empty" t-operation="append">
            <h2 id="div1"></h2>
  </t>
  </t>
  </templates>

Where can i put script in above example?

Answer 1

You inherited OrderWidget template correctly.

    <?xml version="1.0" encoding="UTF-8"?>
    <templates id="template" xml:space="preserve">
          <t t-extend="OrderWidget" >
              <t t-jquery=".order-empty" t-operation="append">
                <h2><span t-esc="strDt"/></h2>
              </t>
          </t>
    </templates>

So, now you need to set the date in between the <h2 id="div1"></h2>

You can include the OrderWidget like this.

Then you need to create one .js file to include your custom code, let's say order_extend.js.

odoo.define('your_module.order_extend', function (require) {
"use strict";
var screens =  require('point_of_sale.screens');
var core = require('web.core');
var QWeb = core.qweb;
var _t = core._t;

screens.OrderWidget.include({
renderElement: function(scrollbottom){
    var order  = this.pos.get_order();
    if (!order) {
        return;
    }
    var orderlines = order.get_orderlines();

    var d = new Date();
    var strDate = d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();
    var el_str  = QWeb.render('OrderWidget',{widget:this, order:order, orderlines:orderlines,strDt:strDate});

    var el_node = document.createElement('div');
        el_node.innerHTML = _.str.trim(el_str);
        el_node = el_node.childNodes[0];


    var list_container = el_node.querySelector('.orderlines');
    for(var i = 0, len = orderlines.length; i < len; i++){
        var orderline = this.render_orderline(orderlines[i]);
        list_container.appendChild(orderline);
    }

    if(this.el && this.el.parentNode){
        this.el.parentNode.replaceChild(el_node,this.el);
    }
    this.el = el_node;
    this.update_summary();

    if(scrollbottom){
        this.el.querySelector('.order-scroller').scrollTop = 100 * orderlines.length;
    }

},
});

    });

And that js file you need to add in the pos backend like this by xml file.

eg. template.xml

<?xml version="1.0" encoding="utf-8"?>
<openerp>
    <data>

        <template id="assets" inherit_id="point_of_sale.assets">
          <xpath expr="." position="inside">
           <script type="text/javascript" src="/your_module/static/src/js/order_extend.js"></script>
          </xpath>
        </template>

    </data>
</openerp>

And this xml file template.xml you need to add in the openerp.py file in the data section like this.

...
'data': [
       ...
       ...
        'views/template.xml',
    ],
....

I hope this answer is worthy for you.