How to override a template file

Question

I am only starting with Magento and I'm reading the devdocs but I seem to be stuck on something that would most likely be pretty obvious to more experienced developers.

In the theme inheritance documentation here, in the checkout button example, it says that in order to override the file

<Magento_Checkout_module_dir>/view/frontend/templates/cart/minicart.phtml 

all I have to do is copy the file in

app/design/frontend/<vendor>/<theme>/Magento_Checkout/templates/cart/minicart.phtml

and then modify it as needed.

I tried that, and it worked as expected, I was able to add some text and then see it in the site.

Of course I did not understand much about the changes I needed to make to the file to follow the example so I kept reading and it says:

"You can find out what exactly code changes are required to perform this and other tasks in the Illustration of customizing templates topic."

In the link, it describes a different file,

<Magento_Checkout_module_dir>/view/frontend/web/template/minicart/content.html

than can be overridden by copying it to

app/design/frontend/<vendor>/<theme>/Magento_Checkout/web/template/minicart/content.html

This does not seem to work for me at all. Creating the file does not seem to affect the inheritance, and the file from <Magento_Checkout_module_dir> ends up being used when the site is rendered.

I would like to ask the following.

1) Am I messing up somewhere and the file is not overridden? (absolutely not unexpected)

2) What is the difference between template files in the /view/frontend/templates directory and the ones in view/frontend/web/template? What could I read to clarify that?

Thank you for your time

---

EDIT

After cleaning up the pub/static directory with rm -R pub/static/* and running php bin/magento setup:static-content:deploy successfully (0 errors on all themes, including the one I created), the file seems to remain not overridden.

However, after checking in

pub/static/frontend/<vendor>/<theme>/en_US/Magento_Checkout

everything seems to be a normal file except template/minicart/content.html that appears to be a symlink to

app/design/frontend/<vendor>/<theme>/Magento_Checkout/web/template/minicart/content.html

which is indeed the static file I am trying to override.

Still, any changes to the file (made both before and after the static content deployment) are not displayed in the site.

Answer 1

--When overriding the html templates under web/template/, in your case: web/template/minicart/content.html, we need to run static content deploy command. That will "copy" the html templates and js files to pub/static/frontend/{Vendor}/{Theme} folder.

--The differences between template files in the /view/frontend/templates directory and the ones in view/frontend/web/template:

+view/frontend/templates contains the phtml files. These file can work directly with PHP Magento code.

+view/frontend/web/template contains the static html template files. They are usually used for Javascript template - the Knockout template.

When executing static content deploy command, the static content doesn't override the exist static files. So, when we want to to update the latest static content, we should delete the old and run this command again. Actually, for testing purpose, we can modify and edit directly the html templates and js files under pub/static.

Answer 2

After copy html file to custom theme in app folder.

Step1 : install node.js on machine

node_modules folder will show in root of magento directory.

Step2 : Install Grunt

npm install -g grunt-cli

Step3 : Go to magento directory

Run the following commands

grunt clean:theme_name

grunt exec:theme_name

Reference Link