Magento 2 html file and phtml file in custom template process?

Question

As I checked from magento 2 documentation about changing minicart content.

There are two ways :

1. In this page : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-inherit.html

We change it by customizing minicart.phml and placing it in: app/design/frontend/OrangeCo/orange/Magento_Checkout/templates/cart/minicart.phtml

2. But on the other page : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-sample.html

We customise it in content.html and place it in:

app/design/frontend/OrangeCo/orange/Magento_Checkout/web/template/minicart/content.html

So these questions are :

How magento 2 decides when to use html file and phtml file ?

Is this related to 3 mode in Magento 2: Default, Developer and Production ?

Answer 1

Both .phtml and .html files are part of the view layer in Magento 2 difference being phtml files work with Block which according to Magento Docs is a special PHP class that is usually (but not always) connected to a template closely. Blocks usually work with model layer (core Magento) to manipulate data and return results/response to templates (.phtml or .html files). These files are used by layout files in setting up templates for certain blocks and so on.

html files on the other end are solely used to display content on the frontend and javascript libraries such as knockout JS use them accordingly. These files are also used for AJAX content loading.

Answer 2

phtml files used as backend php templates. html files used as frontend javascript templates.

This is not related to the Magento mode.

• thienphucvx: I don't think so, Have you checked every module phtml file in frontend/templates . Are all those files only used for backend php template ? Why the view folder of every module has two folders : frontend and backend ?
• KAndy: when I say frontend/backend i mean on server/on client side. The folder adminhtml is Admin Panel and frontend is Store Front part (can have frontend/backend part)
• thienphucvx: I think I get your point about html is rendered by javascript. But I'm not clear why they're using it. For example, we customize content of minicart on content.html . But for customizing form in review, we edit it on form.phtml (devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/…)
• KAndy: m2 has many legacy (m1) code. not all parts are refactored, but process of moving rendering of content on client side will be continue. and you can use client side rendering
• thienphucvx: So it means in the future, there is only html file for client side ?

Answer 3

@thienphucvx The documentation on http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-inherit.html is incorrect.

The correct answer is within: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-sample.html .

If you were to look at the file referenced in the first link vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml you'd see that you can't modify the placement of items in the minicart with the checkout button.

This is because that portion of the minicart is here: vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html

When I find inconsistencies in the docs, like you have here, I open up a Pull Request in GitHub. There's too many docs for the documentation team to have 100% correct all of the time. Open a PR, they'll review your update..and if they aren't sure themselves, they'll reach out to an internal authority on the subject and get back to you with feedback about you being correct or not. They're friendly. GO for it!