Magento 2

View Layer in Magento 2

In this tutorial I will give an overview of the Magento 2 View Layer. We will learn how to build Blocks, Templates and Layouts.

Paul Mestereaga

June 7, 2018

In this tutorial I will give an overview of the Magento 2 View Layer. We will learn how to build Blocks, Templates and Layouts.
I will use the previous tutorials as a base. You can check my previous posts about Magento 2.


The location to put the Block classes is inside the Block folder into your module folder. Bellow is an example of a Block class, defined in the Block\Hello.php file.

namespace Mesteru\FirstModule\Block;
use Magento\Framework\View\Element\Template;
use Mesteru\FirstModule\Model\ResourceModel\Item\Collection;
use Mesteru\FirstModule\Model\ResourceModel\Item\CollectionFactory;
class Hello extends Template
    private $collectionFactory;
    public function __construct(
        Template\Context $context,
        CollectionFactory $collectionFactory,
        array $data = []
    ) {
        $this->collectionFactory = $collectionFactory;
        parent::__construct($context, $data);
     * @return \Mesteru\FirstModule\Model\Item[]
    public function getItems()
        return $this->collectionFactory->create()->getItems();

In this class we want to use our Item collection. To do that we make use of the dependency injection to add the $collectionFactory through the constructor. Magento 2 will generate the CollectionFactory class if we just specify it as in the example use Mesteru\FirstModule\Model\ResourceModel\Item\CollectionFactory;.

The method getItems will return our items for the template. When we call $this->collectionFactory->create() it will create a new instace of Mesteru\FirstModule\Model\ResourceModel\Item\Collection for us.


Let’s create a template for our Block. Frontend templates are located in view\frontent\templates. Here we create the hello.phtml template file.

/** @var \Mesteru\FirstModule\Block\Hello $block */
<!--?php foreach ($block--->getItems() as $item): ?&gt;
	<!--?php echo $item--->getName(); ?&gt; 
<!--?php endforeach; ?-->

In this template file we just display a list of our Items.


Finaly we have to create a layout to tell Magento where to display or template. Layouts in Magento 2 are stored in frontend\layout\ inside our module. Here we create an xml file that has the name according to our route. In our case we use mesteru_index_index.xml.

First part of the file name is the frontName of the route defined in the etc\frontend\routes.xml which is mesteru, the second part comes from the controller name which is index and the third part comes from the action of the controller which is the also index. Here is the file content:

<!--?xml version="1.0"?-->
<page xmlns:xsi="" layout="1column" xsi:nonamespaceschemalocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referencecontainer name="content">
            <block name="mesteru_hello" class="Mesteru\FirstModule\Block\Hello" template="hello.phtml">

In this file we define where the block to be rendered. Also we specify the block type and the template.

In the previous tutorial about controllers we created Mesteru\FirstModule\Controller\Index\Index.php. We need to adapt the action to render our layout. For this purpose we change the content of the execute() method as follows:

public function execute()
   return $this-&gt;resultFactory-&gt;create(ResultFactory::TYPE_PAGE);

Now let’s flush the caches:

php bin/magento cache:flush

Go into the browser and navigate to to access the frontend controller.


Now you know how to create Views in Magento 2 and how Magento 2 View Layer works. If you have any question don’t hesitate to leave a message in the comments section bellow.

Get the Code

You can get the complete code on my github profile here.

Related Posts

How to override a Model in Magento 2

16 Jan 2020


Paul Mestereaga

In this short tutorial I will show you how to override a Model in Magento 2 and also an alternative to rewriting introduced in Magento 2.

Extend Magento 2 jQuery Widget

18 Jun 2019


Paul Mestereaga

In this short tutorial we will learn how to extend Magento 2 jQuery widget with our custom logic.

Optimize Magento 2

Free guide to help you optimise your Magento 2 installation and improve your website speed

Get your free optimisation guide.

Enter your name and email to join my mailing list in exchange for the free download. You can opt out any time.

Can I email you?

I will use the information you provide on this form to stay in touch, send you updates, and send marketing emails about our products and services. You can unsubscribe at any time through a link in the footer of an email from me. For more information, please read the Privacy Policy.