LoginSignup
0

More than 3 years have passed since last update.

How to create Frontend view

Last updated at Posted at 2020-03-17

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

Karabiner/HelloMagento2/Controller/SomethingElse/Index.php
<?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

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:

app/code/Karabiner/HelloMagento2/view/frontend/templates/hello_world.phtml
<?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

MAGENTO_DIRECTORY
bin/magento cache:clean

please access this page again (http://[MAGENTO_URL]/custom_router_name/somethingelse) and see the result.

block-created.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0