Frontend view
In this topic, we will learn about View in Magento 2 including Block, Layouts, and Templates. In the previous topic, we create route and controller. As you know, a View will be used to output the representation of the page.
In Magento 2, The view is built by three paths:
- block
- layout
- template
We will find how it works by building the simple view for the module we created In the previous topic
Create a controller
Firstly, We will create a controller to call the layout file .xml
<?php
namespace Karabiner\HelloMagento2\Controller\SomethingElse;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
class Index extends Action
{
/**
* @var PageFactory
*/
private $pageFactory;
public function __construct(Context $context, PageFactory $pageFactory)
{
parent::__construct($context);
$this->pageFactory = $pageFactory;
}
/**
* call Karabiner/HelloMagento2/view/frontend/layout/hellomagento2_somethingelse_index layout
*/
public function execute()
{
return $this->pageFactory->create();
}
}
Create a Layout file (.xml)
The Layout is the major path of view layer in the Magento 2 module. The layout file is an XML file that will define the page structure and will be located in {MAGENTO_DIRECTORY}/view/{area}/layout/ folder. The Area path can be frontend or adminhtml(admin dashboard) which defines where the layout will be applied.
the layout file will have name as format: {router_id}{controller_name}{action_name}.xml.
When a rendering page, Magento will check the layout file to find the handle for the page and then load Block and Template. We will create a layout handle file for this module:
File: app/code/Karabiner/HelloMagento2/view/frontend/layout/hellomagento2_somethingelse_index.xml
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Karabiner\HelloMagento2\Block\SomethingElse" name="hello_magento2_display"
template="Karabiner_HelloMagento2::hello_world.phtml" />
</referenceContainer>
</body>
</page>
In this file, we define the block and template for this page:
Create Block file
Block class: HelloMagento2\HelloMagento2\Block\SomethingElse
Block class is class which provides data to the template file.
Template file: Karabiner_HelloMagento2::hello_world.phtml
the filename has two parts:
1. Karabiner_HelloMagento2
: refer to Karabiner/HelloMagento2/view/frontend/templates
2. hello_world.phtml
: location inside the above folder location it could be SomethingElse/hello_world.phtml
.
name: It is the required attribute and is used to identify a block as a reference
Create a template file
Create a template file called hello_world.phtml
app/code/Karabiner/HelloMagento2/view/frontend/templates/hello_world.phtml
Insert the following code:
<?php
/**
* @var \Karabiner\HelloMagento2\Block\SomethingElse $block
*/
?>
<?= $block->sayHi() ?>
In the layout file, we define the template by Karabiner_HelloMagento2::hello_world.phtml
. It means that Magento will find the file name hello_world.phtml
in the templates folder of module Karabiner_HelloMagento2
. The template folder of the module isapp/code/{vendor_name}/{module_name}/view/frontend/templates/
.
In the template file, we can use the variable $block
for the block object. As you see, we call the method sayHi()
in Block. It’s done,
after any change on layout or phtml we should run cache:clean command line
bin/magento cache:clean
please access this page again (http://[MAGENTO_URL]/custom_router_name/somethingelse) and see the result.