What are Templates?

In web development, templates are files that define the structure and layout of a webpage. They are used to separate the presentation layer (HTML and CSS) from the data and logic (usually handled by backend code). Templates allow developers to create reusable and consistent designs for web pages, making it easier to maintain and update the visual appearance of a website.Templates typically contain placeholders, also known as template tags or variables, which are replaced with dynamic content at runtime. The dynamic content can come from various sources, such as a database, server-side code, or user input.They serve as a foundation for generating the final HTML output that is sent to the user’s web browser. They facilitate the creation of consistent page layouts and user interfaces across different pages of a website.

In the context of different web development frameworks and content management systems (CMS), templates may have different names or specific roles. Here are some examples:

1. HTML Templates: In simple static websites, templates refer to HTML files with placeholders for dynamic content, which are replaced either manually or through server-side processing.
2. PHP Templates: In PHP web development, templates are often PHP files containing HTML with embedded PHP code. They are used to generate dynamic web pages by executing the PHP code and replacing placeholders with dynamic data.
3. JavaScript Templates: In front-end JavaScript frameworks like Handlebars, Mustache, or Vue.js, templates are used to render dynamic content on the client-side. These templates are usually defined in HTML-like syntax with specific template tags for dynamic data.
4. CMS Templates: Content Management Systems (CMS) like WordPress, Joomla, or Drupal use templates to define the layout of different sections of a website, such as headers, footers, and content areas. CMS templates are often a mix of HTML, CSS, and specific template tags or shortcodes to handle dynamic content and site-wide settings.

Location of Templates

In Magento 2, templates are located in specific directories within the module’s view folder. The exact location depends on whether the template is meant for the frontend (storefront) or the backend (admin) of the Magento 2 store.

1. Frontend Templates:

Frontend templates are used to render the visual elements of the storefront, including the product pages, category pages, checkout pages, and other frontend views. The location of frontend templates is as follows:

– Location: `app/code/<Vendor>/<Module>/view/frontend/templates/`

`<Vendor>`: The name of the vendor or company developing the module.
`<Module>`: The name of the module where the templates are defined.

For example, if you have a custom module named “Example_SampleModule,” the templates for the frontend will be located in:
`app/code/Example/SampleModule/view/frontend/templates/`

2. **Adminhtml Templates:**
Adminhtml templates are used to render the visual elements of the backend/admin interface in Magento 2. These templates are responsible for displaying various configuration pages, admin grids, and other backend views. The location of adminhtml templates is as follows:

– Location: `app/code/<Vendor>/<Module>/view/adminhtml/templates/`

`<Vendor>`: The name of the vendor or company developing the module.
`<Module>`: The name of the module where the templates are defined.

For example, if you have a custom module named “Example_AdminModule,” the templates for the adminhtml interface will be located in:
`app/code/Example/AdminModule/view/adminhtml/templates/`

Usage of Templates

In Magento 2, templates play a crucial role in defining the visual presentation of the storefront and admin interfaces. They are used to generate the HTML output that users see in their web browsers. Templates work in conjunction with layout XML files and block classes to render dynamic content and create the final user interface.

How templates are used in Magento 2:

1. Layout XML Files:
In Magento 2, the layout XML files define the structure and composition of a page. These XML files contain various instructions that map blocks (PHP classes) to specific containers within the page layout. Each block is associated with a template that will render the HTML content for that block.

2. Blocks:
Blocks are PHP classes that handle the business logic and provide data to be displayed in the templates. In the layout XML files, blocks are referenced using the `<block>` directive along with the name of the block class and the associated template.

3. Template Rendering:
When Magento 2 processes a request to generate a page, it reads the layout XML files to determine which blocks to instantiate and which templates to use for rendering. The block class fetches the necessary data and prepares it for the template.

4. Dynamic Content:
Templates contain placeholders (template tags or variables) that are replaced with dynamic content at runtime. The dynamic content can come from various sources, such as the database, server-side code, or user input.

5. HTML Generation:
The template, being a PHTML (PHP + HTML) file, contains the HTML structure along with embedded PHP code. When the template is rendered, the PHP code is executed, and the placeholders are replaced with the actual dynamic content, generating the final HTML output that is sent to the user’s web browser.

6. Customization and Theming:
One of the main uses of templates in Magento 2 is for customization and theming. You can create custom themes by overriding existing templates or adding new ones in your theme’s template directory. This allows you to modify the look and feel of your store without changing the core code.

7. Template Inheritance:
Magento 2 templates support inheritance, allowing you to create templates that extend or override other templates. This is helpful when you want to customize specific parts of a page without redefining the entire template.

Overriding templates

Steps to override a template

1. Create a Custom Theme:
Before overriding a template, you need to create a custom theme that will be used to hold your customized template files. You can create a new theme or use an existing one. To create a custom theme, you’ll need to create the necessary theme files and register the theme in Magento.

Example:

Create a custom theme or use an existing one. Let’s assume your custom theme is named “Example_CustomTheme.”

2. Identify the Template to Override:
Determine which template you want to override. You can find the original template path and file name in the layout XML files or by enabling template path hints in the Magento Admin Panel.

Example: For the example we suppose we want to override the template responsible for rendering the product price on the product detail page. The original template file path is:

`vendor/magento/module-catalog/view/frontend/templates/product/price.phtml`

3. Create the Custom Template:
In your custom theme directory, create a new folder path that mirrors the original template path. Place your customized template file in this location. The file name should be the same as the original template file.

Example: In your custom theme directory, create the necessary folder structure to mirror the original template path:

`app/design/frontend/Example/CustomTheme/Magento_Catalog/templates/product/`

Copy the `price.phtml` file from the original location (`vendor/magento/module-catalog/view/frontend/templates/product/`) to your custom theme’s corresponding location:

`app/design/frontend/Example/CustomTheme/Magento_Catalog/templates/product/price.phtml`

4. Modify the Custom Template:
Open the custom template file and make the necessary changes. You can add or remove HTML elements, update styles, or customize the layout as per your requirements.

Example: Make the desired changes to the `price.phtml` file in your custom theme directory.

5. Clear Cache:
After creating and modifying the custom template, clear the Magento cache to ensure that your changes take effect.

Example:

Clear the Magento cache to apply the changes:

“`
php bin/magento cache:clean
php bin/magento cache:flush
“`