Magento 2 Fundementals: Rendering

Templates

Handle HTMl, JS and some PHP

templates are *.phtml files

Blocks

Move reusable functionality from PHP temalte files into classes for reuse

Blocks provides data to template. Blocks instantiate models to query database.

UiComponents

rendered by Javascript, but still depend on backend to obtain data

Design layouts

pull together entire set of template files to be rendered in browser

Process flow

Gather layout Configuration -> Generate page layout XML -> Generate blocks -> Execute output blocks -> Include tempaltes -> Execute child blocks -> Flush output

2 rendering systems: * rendering layout like magento 1 - View::loadLayout() and View::renderLayout() (ResultInterface) * page objects

Page object: 1. controller execute until ResultFactory::create() is created and returns a page object. 2. Application goes back to object and runs Page::renderResult()

Result Object: * Page : Magento\Framework\View\Result\Page * Json : Magento\Controller\Result\Json * Forward: Magento\Controller\Result\Forward * Redirect: Magento\Controller\Result\Redirect

Result object: most important rednerResult()

Magento\Framework\View\Result\Page extends \magento\Framework\View\Result\Layout, extends Magento\Framework\Controller\AbstractResult that implements ResultInterface

Page::renderPage() includes the rootTemplate

The root template is found: Magento/Theme/view/base/templates/root.phtml

Page Objects

2 steps: build and render

3 actions: * loadLayout(), generateLayout(), loadLayoutBlocks()

View Elements

  • UiComponents
  • Containers
  • Blocks

UiComponents

standalone reusable elements

Used for: grids, forms, minicart

Related to JS

Containers

  • Doesn’t have any classes related to it
  • Renders all its children
  • Allows configuration of some attributes (wrapping tag / css class)

Blocks

Every web page is a hierachy of blocks that can have any number of content blockd or child containers

Role: * Change look and feel of website * Add something to the page * Change the style of certain elemnt on a page * Change data on a page

Magento 2 structure is more complex. Structure is defined by layout xml files

In a template, access to block’s instance provides access to the data:

Block Architecture and Life Cycle

BlockInterface -> AbstractBlock

AbstractBlock Methods

  • _prepareLayout() - method executed when a block is created.
  • addChild() - For hierachical layout
  • _toHtml() - before rendering
  • _beforeToHtml()/_afterHtml()/toHtml()

toHtml() needs to be implemented. Not final. Not recommended to override.

Overriding _toHtml() is recommended

Block Types

  • Text
  • ListText
  • Messages - list of messages, can have a template
  • Redirect - template block, renders javascript redirect
  • Template

Template: Assigning a template file

  • setTemplate() - when you have physical access
  • Constructor argument - $data['template']

In magento 1 all templates are included in the body or a block. In magento 2, you can specify another object as the data container for a template.

Creating or customising blocks

  • Using layout: $layout->createBlock()
  • Using object manager: No need for declaration
  • Can be customised using DI/PLugins

Lifecycle of block

  1. Generating
    • instance of all blocks based on layout are created
    • structure built, child blocks set
    • _prepareLayout() called for every block
    • Nothing rendered
  2. Rendering
    • toHtml()

Generators

  • View\Page\Config\Generator\Head
  • View\Page\Config\Generator\Body
  • View\Layout\Generator\Block
  • View\Layout\Generator\Container
  • View\Layout\Generator\UiComponent

UiComponent

A class and often a block which is why is has to be instantiated.

Templates

Snippets of html code in .phtml format. The contains PHP elements such as PHP instructions, variables and calls for methods of some classes

Location

In modules sub-folder: view/<area>/templates

eg. app/code/Magento/Catalog/view/frontend/templates/product/view/details.phtml

Best practice: Prepend the template with the module name

catalog/product/view/price.phtml becomes Magento_Catalog::catalog/product/view/price.phtml

Variables

In template a calls from a block are made with: $this->getSmth()

which calls the corresponding function in the block

In magento 1 function getSmth() could be public, protected or private. In magento 2 a tamplte can only call a public function.

Template is rendered with Block::_toHtml() goes to fetchView() then to templateEngine::render() to include the filename.u can create and rewrite new themes as a core template in the module

Template file included in the template engine: Magento\Framework\View\TemplateEngine\Php

Fallback

Defining a full path to a file given only its relative path.

product/view/details.phtml > Magento_Catalog/view/frontend/templates/product/view/details.phtml

uses getTemplateFile()-> Block::fetchView(), engine::render() and includes filename($failname)

Block::getTemplateFile() is crucial

The real work of finding remplate is in Magento\Framework\View\Filesystem class

Customising templates

3 steps in rewriting the core template:

  1. Create your module
  2. Create a new template in your module
  3. Set your template to the block that contains the core template to rewrite

Layout XML Structure

Build pages in modular and flexible manner.

Design pattern

2 step view: * Gather and arrange content in logical structure * Generate HTML output

Changes: each layout update resides in its own file so XML syntax issues much easier to identify

Module can add content to existing pages without changing other modules. It can remove and move conent added by other modules.

Page Sections

  • Head
  • Body (Visible to visitors)
  • Html
  • Update - used to include more page processing instructions in seperate files, to avoid code duplication

In magento 1 layout xml could describe any content. In magento 2, layout xml is just for HTML.

Still possible to overwrite files but it is now non-default behaviour. Not recommened because of upgrade issues.

Layout of page is determined by containers - which act as a framework and don’t caontain acual content. Blocks are content within containers.

XML structure is generated by merging the layout XML files within one design area.

Layout files can be found in 2 places: * Modules - app/code/[Namespace]/[Module]/view/[area]/layout/*.xml * Themes - app/design/frontend/[Namespace]/[theme]/[Namespace]_[Module]/layout/*.xml

In magento 2 the base theme is now the module directory instead of base/default. Now each layout file is identified with a module.

Root nodes: * <page> - Renders complete html page. (html, body, header, update) * <layout> - Only a section of an html page (does not allow other nodes inside)

Eg. Page:

```

``` renders: `` ### Head #### JS In Magento 2, `$layoutContent` is included in the `` tag, while `` section is rendered using `head` section. In `head/script`: ```