Override Phtml File - Bluethink Inc.

Spread the love

Before knowing how to override a Phtml template file in a custom module in Magento 2, we must focus on what is a Phtml template file?

What is a Phtml Template File?

An html code with php script that is parsed by the PHP Engine on web server, is called a phtml file. It is generally used to retrieve and access data to databases like MySQL, Postgres..etc. Simply can say An HTML page including a PHP script is known as a phtml template.

Overriding a file:

Overriding means rewriting functionalities in your own fashion without modifying the Magento core files.

Override a phtml file in a custom module:

As we know, Magento 2 is a rich E-commerce Platform that enables you to add your own functionalities to websites, but modifying the core functionality of Magento 2 is really not a good coding practice. whenever you upgrade your Magento version this customization will not affect your code and you will feel helpless.

Hence, it is strongly recommended better you override a function, class, or file, as per the requirements and desires.

There are two ways to override the phtml file in Magento2

1. Override a phtml file in a theme in Magento 2

2. Override a phtml file in a custom module in Magento 2

Here we will discuss second way to override a phtml file in a custom module in Magento 2.

Step 1: Create file registration.php at app/code/Vendor/Module/ folder (In my case vendor is Bluethink, Module is Overridetemplate and my file path is: app/code/Bluethink/Overridetemplate/registration.php)

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Bluethink_Overridetemplate',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Bluethink_Overridetemplate',

__DIR__

);

Step 2: Create module.xml file at app/code/Vendor/Module/etc/ folder (In my case vendor is Bluethink, Module is Overridetemplate and my file path is : app/code/Bluethink/Overridetemplate/etc/module.xml)

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Bluethink_Overridetemplate" setup_version="1.0.0">
    </module>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

</module>

</config>

Step 3: Create file catalog_category_view.xml at app/code/Vendor/Module/ view/frontend/layout/ folder

Now, you need to create a XML file under view/frontend/layout folder, In which you need to declare original name of referenceBlock where you will redefine path of your custom template.

(In my case vendor is Bluethink, Module is Overridetemplate and my file path is app/code/Bluethink/Overridetemplate/view/frontend/layout/ catalog_category_view.xml)

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="category.products.list">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Bluethink_Overridetemplate::product/list.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left"

xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

<body>

<argument name="template" xsi:type="string">Bluethink_Overridetemplate::product/list.phtml</argument>

</action>

</referenceBlock>

</body>

</page>

Step 4: Now, you can create your custom template in your module and Implement accroding to your requirements. In my case, my template file path is : app/code/Bluethink/Overridetemplate/view/frontend/template/product/list.phtml

Step 5: finally, run the following commands –

sudo php bin/magento setup:upgrade
	sudo php bin/magento setup:di:compile
	sudo php bin/magento setup:static-content:deploy -f
	sudo php bin/magento cache:flush
 	sudo chmod -R 777 var/ generated/ pub/ app/