How are the «*.phtml» templates rendered?

dmitrii_fediuk · May 6, 2017, 9:22am

I will use the standard «Contact Us» frontend form as an example.

1. The primary actors in this scenario

1.1. Magento/Contact/view/frontend/templates/form.phtml

magento/magento2/blob/2.1.6/app/code/Magento/Contact/view/frontend/templates/form.phtml#L10-L53


<form class="form contact"
  action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"
  id="contact-form"
  method="post"
  data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
  data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
    <legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Write Us') ?></span></legend><br />
    <div class="field note no-label"><?php /* @escapeNotVerified */ echo __('Jot us a note and we’ll get back to you as quickly as possible.') ?></div>
    <div class="field name required">
        <label class="label" for="name"><span><?php /* @escapeNotVerified */ echo __('Name') ?></span></label>
        <div class="control">
            <input name="name" id="name" title="<?php /* @escapeNotVerified */ echo __('Name') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getPostValue('name') ?: $this->helper('Magento\Contact\Helper\Data')->getUserName()) ?>" class="input-text" type="text" data-validate="{required:true}"/>
        </div>
    </div>
    <div class="field email required">
        <label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></label>
        <div class="control">
            <input name="email" id="email" title="<?php /* @escapeNotVerified */ echo __('Email') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getPostValue('email') ?: $this->helper('Magento\Contact\Helper\Data')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
        </div>
    </div>
    <div class="field telephone">
        <label class="label" for="telephone"><span><?php /* @escapeNotVerified */ echo __('Phone Number') ?></span></label>
        <div class="control">
            <input name="telephone" id="telephone" title="<?php /* @escapeNotVerified */ echo __('Phone Number') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getPostValue('telephone')) ?>" class="input-text" type="text" />
        </div>
    </div>
    <div class="field comment required">
        <label class="label" for="comment"><span><?php /* @escapeNotVerified */ echo __('What’s on your mind?') ?></span></label>
        <div class="control">
            <textarea name="comment" id="comment" title="<?php /* @escapeNotVerified */ echo __('What’s on your mind?') ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}"><?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getPostValue('comment')) ?></textarea>
        </div>
    </div>
    <?php echo $block->getChildHtml('form.additional.info'); ?>
</fieldset>
<div class="actions-toolbar">
    <div class="primary">
        <input type="hidden" name="hideit" id="hideit" value="" />
        <button type="submit" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>" class="action submit primary">
            <span><?php /* @escapeNotVerified */ echo __('Submit') ?></span>
        </button>
    </div>
</div>
</form>

1.2. Magento/Contact/view/frontend/layout/contact_index_index.xml

github.com

magento/magento2/blob/2.1.6/app/code/Magento/Contact/view/frontend/layout/contact_index_index.xml#L13-L17


<referenceContainer name="content">
    <block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml">
        <container name="form.additional.info" label="Form Additional Info"/>
    </block>
</referenceContainer>

1.3. Magento\Contact\Block\ContactForm

github.com

magento/magento2/blob/2.1.6/app/code/Magento/Contact/Block/ContactForm.php#L8-L13


use Magento\Framework\View\Element\Template;


/**
* Main contact form block
*/
class ContactForm extends Template

2. The rendering process

Step 1. Magento\Framework\View\Layout::_renderBlock()

github.com

magento/magento2/blob/2.1.6/lib/internal/Magento/Framework/View/Layout.php#L545-L556


/**
 * Gets HTML of Ui Component
 *
 * @param string $name
 * @return string
 * @throws \Magento\Framework\Exception\LocalizedException
 */
protected function _renderUiComponent($name)
{
    $uiComponent = $this->getUiComponent($name);
    return $uiComponent ? $uiComponent->toHtml() : '';
}

Step 2. Magento\Framework\View\Element\AbstractBlock::toHtml()

Magento 2.2

github.com

magento/magento2/blob/62667cb6/lib/internal/Magento/Framework/View/Element/AbstractBlock.php#L641-L682


/**
 * Produce and return block's html output
 *
 * This method should not be overridden. You can override _toHtml() method in descendants if needed.
 *
 * @return string
 */
public function toHtml()
{
    $this->_eventManager->dispatch('view_block_abstract_to_html_before', ['block' => $this]);
    $this->getModuleName();


    $html = $this->_loadCache();
    if ($html === false) {
        if ($this->hasData('translate_inline')) {
            $this->inlineTranslation->suspend($this->getData('translate_inline'));
        }


        $this->_beforeToHtml();
        $html = $this->_toHtml();
        $this->_saveCache($html);


        if ($this->hasData('translate_inline')) {
            $this->inlineTranslation->resume();
        }
    }
    $html = $this->_afterToHtml($html);


    /** @var \Magento\Framework\DataObject */
    $transportObject = new \Magento\Framework\DataObject(
        [
            'html' => $html,
        ]
    );
    $this->_eventManager->dispatch('view_block_abstract_to_html_after', [
        'block' => $this,
        'transport' => $transportObject
    ]);
    $html = $transportObject->getHtml();


    return $html;
}

Magento 2.1.6

github.com

magento/magento2/blob/2.1.6/lib/internal/Magento/Framework/View/Element/AbstractBlock.php#L635-L669


/**
 * Produce and return block's html output
 *
 * This method should not be overridden. You can override _toHtml() method in descendants if needed.
 *
 * @return string
 */
public function toHtml()
{
    $this->_eventManager->dispatch('view_block_abstract_to_html_before', ['block' => $this]);
    if ($this->_scopeConfig->getValue(
        'advanced/modules_disable_output/' . $this->getModuleName(),
        \Magento\Store\Model\ScopeInterface::SCOPE_STORE
    )) {
        return '';
    }


    $html = $this->_loadCache();
    if ($html === false) {
        if ($this->hasData('translate_inline')) {
            $this->inlineTranslation->suspend($this->getData('translate_inline'));
        }


        $this->_beforeToHtml();
        $html = $this->_toHtml();
        $this->_saveCache($html);


        if ($this->hasData('translate_inline')) {
            $this->inlineTranslation->resume();
        }
    }
    $html = $this->_afterToHtml($html);


    return $html;
}

Step 3. Magento\Framework\View\Element\Template::_toHtml()

github.com

magento/magento2/blob/2.1.6/lib/internal/Magento/Framework/View/Element/Template.php#L269-L280


/**
 * Render block HTML
 *
 * @return string
 */
protected function _toHtml()
{
    if (!$this->getTemplate()) {
        return '';
    }
    return $this->fetchView($this->getTemplateFile());
}

Details: How is Magento\Framework\View\Element\Template::getTemplateFile() implemented and used?

Step 4. Magento\Framework\View\Element\Template::fetchView()

github.com

magento/magento2/blob/2.1.6/lib/internal/Magento/Framework/View/Element/Template.php#L238-L267


/**
 * Retrieve block view from file (template)
 *
 * @param string $fileName
 * @return string
 */
public function fetchView($fileName)
{
    $relativeFilePath = $this->getRootDirectory()->getRelativePath($fileName);
    \Magento\Framework\Profiler::start(
        'TEMPLATE:' . $fileName,
        ['group' => 'TEMPLATE', 'file_name' => $relativeFilePath]
    );


    if ($this->validator->isValid($fileName)) {
        $extension = pathinfo($fileName, PATHINFO_EXTENSION);
        $templateEngine = $this->templateEnginePool->get($extension);
        $html = $templateEngine->render($this->templateContext, $fileName, $this->_viewVars);
    } else {
        $html = '';
        $templatePath = $fileName ?: $this->getTemplate();
        $this->_logger->critical(
            "Invalid template file: '{$templatePath}' in module: '{$this->getModuleName()}'"
            . " block's name: '{$this->getNameInLayout()}'"
        );
    }


    \Magento\Framework\Profiler::stop('TEMPLATE:' . $fileName);
    return $html;
}

Details:

dmitrii_fediuk · May 6, 2017, 4:04pm