Failing to load custom vailla js using hooks for POS

Frappe Framework Customization
1

I am trying to add few line of vanilla javascript using hooks
this is the page_js hook:

page_js = {
    "setup-wizard": "public/js/frappe/setup_wizard.js",
    "pos": "assets/js/pos-coz.js",
    "pos": "public/js/pos-coz.js",
    "point-of-sale": "assets/js/poscoz.js",
    "point-of-sale": "public/js/poscoz.js"
}

poscoz.js:

Array.from(document.getElementsByClassName('num-row')).slice(0,3).forEach(x => {
    x.classList.add('hidden')
})

in locations:
/home/frappe/frappe-bench/sites/[site-name]/public/js/poscoz.js
/home/frappe/frappe-bench/sites/assets/js/poscoz.js
FYI: this simple code is working in POS console.

I tried multiple locations as you see but the “poscoz.js” file is nowhere to be found in poinf-of-sale page source, nor the js effect.
I don’t know if I should restart/reload bench after adding a hook or not, the docs didn’t mention anything about that.

Whats could be wrong?

2

Following @kolate_sambhaji example:

I have edit it to be:

erpnext.pos.PointOfSale = erpnext.pos.PointOfSale.extend({
    Array.from(document.getElementsByClassName('num-row')).slice(0, 3).forEach(x => {
        x.classList.add('hidden')
    })
})

Yet, Nothing happened.

3

I am dying.

Another failed approach is to use app_include_js = "assets/js/pos_extension.js"
pos_extension.js:

consloe.log('test')

it seems to work at first sight, but another error comes up:

TypeError: Cannot read property 'extend' of undefined
    at eval (eval at setup (form.min.js?ver=1614286080.0:1), <anonymous>:386:67)
    at init.setup (form.min.js?ver=1614286080.0:1)
    at frappe.ui.form.Form.setup (form.min.js?ver=1614286080.0:1)
    at frappe.ui.form.Form.refresh (form.min.js?ver=1614286080.0:1)
    at get_frm (<anonymous>:603:8)
    at <anonymous>:593:17
    at Object.callback (desk.min.js?ver=1614286080.0:1)
    at Object.success [as success_callback] (desk.min.js?ver=1614286080.0:1)
    at 200 (desk.min.js?ver=1614286080.0:1)
    at Object.<anonymous> (desk.min.js?ver=1614286080.0:1)

still don’t know how to use page_js{"page-name": "location"} properly

4

Update: I had to edit point-of-sale.js in frappe-bench/apps/erpnext/selling/page/point-of-sale.js because I had no idea how to override it using hooks.py.

Of course I missed everything up on the first try and I had to wipe the vps clean and reinatall it all over again, but here we go.

I wish the docs were a bit clearer on the hooks matter.

5

hi @MoSamir ,i have this code , and it works.

class PointOfSaleController extends erpnext.PointOfSale.Controller{
constructor(wrapper){
super(wrapper);
}

prepare_menu() {
super.prepare_menu();
this.page.add_menu_item((“Prestamo”), this.captura_prestamo.bind(this), false);
this.page.add_menu_item((“Egreso”), this.captura_egreso.bind(this), false);

}

}

erpnext.PointOfSale.Controller = PointOfSaleController;

but only works in erpnext v13-beta

in erpnext V13 realease not woking… :frowning_face:
May someone help us?