Override existing template

Hi

I need to customize web view of item detail page http://167.99.230.253/products/canon-5d-glkpi. I have created a template item.html in apps/frappe/frappe/www. But it is not working :disappointed:

Thanks

So the page you linked isn’t showing very much. Do you have a wireframe or mockup?

This is the mockup for detail page

That’s a nice layout.
One of the better carts for ERPNext is AwesomeCart, but I believe it’s pinned to Version 7, which you do not want to go back to. So take it as a reference.
If you are going to be writing cart components, please consider doing it in Vue so that it can be more modular.
And consider joining Proposal: Formation of eCommerce Working Group

I want to edit the template of item detail page. No cart functionality now

Thanks

OK. Just a warning, direct edits to item.html will work but will not survive updates.
Are you in developer mode?

Yes. In developer mode.
Can’t we override the template?

@haris.m.aslam the best approach is

Create one application for your custom templates, and install it, and copy the templates from ERPNext / frappe to your custom template, and start changing it there.

Ensure you have the same folder estructure

eg:

frappe/www/__init__.py -> my_app/www/__init__.py
frappe/www/item.html -> my_app/www/item.html
frappe/www/item.py -> my_app/www/item.py 

So it will apply the teamplates of your application.

6 Likes

@max_morais_dmm does that mean he’ll have to re-implement a shopping cart when he gets there?
@haris.m.aslam this is expected to be a fully functional shopping cart eventually, right?

@tmatteson only if him will need the shopping cart functionality, if not, him can use the standard ERPNext funcionality.

No. I just have to change the template. No need to shopping cart functionality

HI @max_morais_dmm

I have created these files in extact folder structure. But my template is reflecting . I am getting an error like this

Traceback (most recent call last):
File “/home/frappe/frappe-bench/apps/frappe/frappe/website/render.py”, line 39, in render
data = render_page_by_language(path)
File “/home/frappe/frappe-bench/apps/frappe/frappe/website/render.py”, line 133, in render_page_by_language
return render_page(path)

item.html was incorrect folder. It was in apps/erpnext/erpnext/templates/generators/item.html. So I copied the file to my app folder myapp/templates/generators/item.html and it overrided.

Thank you guys
@max_morais_dmm and @tmatteson

2 Likes

@max_morais_dmm, this is a very good find! thanks for this. I have some questions

  • what is the logical explanation why this works?
  • Also, this approach of mirroring files would work for what all paths? ex. in above topic 2 paths are mentioned. what all other paths are possible?

erpnext/templates/generators/
frappe/www/

  • It would work for what all file types .html/.py/.js ?
    Waiting for your guidance!

@ashish-greycube, It only will work for Templates and WWW, because, the way that the website map is built, allow you to do exactly this.

Templates and WWW contents, are the unique that can be overrided by this behavior

1 Like

Just an FYI, the order that templates are overridden appears to be the reverse app order to that listed in sites/apps.txt. First template encountered with the correct name ‘wins’.

However, this does not cause the corresponding python file to be overridden.
So:
custom/templates/pages/home.html overrides erpnext/templates/pages/home.html
But:
custom/templates/pages/home.py does NOT override erpnext/templates/pages/home.py

have any one idea about kanban_card.html overriding. If yes then please share

What will be solution for html files which are not present in templates folder . for example kanban_card.html does not present in templates folder its relative path is-
apps/frappe/frappe/public/js/frappe/views/kanban/kanban_card.html
so how can overrides this file withmy kanban_card_custom.html file.
is there any solution for this

@Bhagyashri_Patil yes there’s a solution, basedly on the build.json

can you explain in details please