MAGENTO

Render a phtml file in Magento 2 – Javascript Solutions

Render a phtml file in Magento 2

Unlike Magento 1.x version creating a module in Magento 2 is very simplified and easy. In this tutorial I am going to show you how to Render a phtml file in Magento 2 using basic steps of it.

(Namespace: Magento, Module Name: Hello)

Example link on local host: http://localhost/magento20/hello/index/index

Step I

In this step we write an xml in module.xml file @  app/code/Magento/Hello/etc/module.xml to declare the module.

Render a phtml file in Magento 2
Render a phtml file in Magento 2

 

Step II

Lets create a controller for our phtml to render

Create controller and action:

Create the file Index.php in app/code/Magento/Hello/Controller/Index/Index.php. Here folder Index is the controller that playes the action index.php via execute methode.

Render a phtml file in Magento 2
Render a phtml file in Magento 2

Create a Block:

Render a phtml file in Magento 2
Render a phtml file in Magento 2

Write configuration file: /app/code/Magento/Hello/etc/frontend/routes.xml

In Magento 1.0 we create an xml file as config.xml to declare route, module, frontnames and observers Magento/Hello/etc/config.xml. However, in Magento 2.0, file config.xml only configures the default configuration value in tag <default>

+) Information about router of frontend will be reported in:

Magento/Hello/etc/frontend/routes.xml (it is similar to backend)

+) Event of frontend will be declared in: Magento/Hello/ect/frontend/events.xml  (it is similar to backend)

In the scope of a simple module, we only declare routers in Magento/Hello/etc/frontend/routes.xml

Render a phtml file in Magento 2
Render a phtml file in Magento 2

 

Step III

Create a Frontend Template

Creating frontend templates in Magento 2 is a simple thing. All we need to create is phtmls files and assign routes. But before that we need to write a layout for it. @ file: app\code\Magento\Hello\view\frontend\layout\hello_index_index.xml Name of layout file is really important in this step. It will be named after the structure. router name_controlle namer_action name

Render a phtml file in Magento 2
Render a phtml file in Magento 2

Then, we create a file success.phtml as reporting in layout fileapp\code\Magento\Hello\view\frontend\templates\success.phtml

Render a phtml file in Magento 2
Render a phtml file in Magento 2

 

Step IV

Activate Magento_Hello extension in configuration file

This is the final step in rendering phtml files

  1. Open the file app/etc/config.xml
  2. In the array ‘module’, add the element: ‘Magento_Hello’ => 1,
Render a phtml file in Magento 2
Render a phtml file in Magento 2

So this is how we Render a phtml file in Magento 2.0. Hit http://localhost/magento20/hello/index/index to render the phtmls

Render a phtml file in Magento 2
Render a phtml file in Magento 2

Conslusion

This is my first blog about Magento to render a phtml file in Magento 2.x version. In this quick tutorial I assume that you have a base knowledge in php zend architecture and Magento 1.x version. Apart from creating modules this tutorail has also explained how to configure xml files and assigne routes to controller and phtml file. Similarly blocks and custom observers can also be executed like this. Thank you for reading ! Stay subscribed !

Share

Leave a Comment

Your email address will not be published. Required fields are marked *