The Magento 2 root template is used as a base template for all of Magento’s store pages. This is a very basic template, and in HTML terms it contains the HTML5 doctype declaration, <head> and <body> tags.
The root template resolves HTML duplication within Magento 1 applications, as out of the few templates that were provided by default in the earlier versions, all of them contained their own doctype, html and body sections.
Magento 2’s root template is found within the vendor/magento/module-theme/view/base/templates/ directory.
// vendor/magento/module-theme/view/base/templates/root.phtml
<!doctype html>
<html <?php /* @escapeNotVerified */ echo $htmlAttributes ?>>
<head <?php /* @escapeNotVerified */ echo $headAttributes ?>>
<?php /* @escapeNotVerified */ echo $requireJs ?>
<?php /* @escapeNotVerified */ echo $headContent ?>
<?php /* @escapeNotVerified */ echo $headAdditional ?>
</head>
<body data-container="body" data-mage-init='{"loaderAjax": {}, "loader": { "icon": "<?php /* @escapeNotVerified */ echo $loaderIcon; ?>"}}' <?php /* @escapeNotVerified */ echo $bodyAttributes ?>>
<?php /* @escapeNotVerified */ echo $layoutContent ?>
</body>
</html>The template echoes multiple variables, however the variables are not actually defined within the same file.
The variables are assigned values within the Magento/Framework/View/Result/Page class’ render() method, using $this->assign().
// vendor/magento/framework/View/Result/Page.php
....
protected function render(ResponseInterface $response)
{
$this->pageConfig->publicBuild();
if ($this->getPageLayout()) {
$config = $this->getConfig();
$this->addDefaultBodyClasses();
$addBlock = $this->getLayout()->getBlock('head.additional'); // todo
$requireJs = $this->getLayout()->getBlock('require.js');
$this->assign([
'requireJs' => $requireJs ? $requireJs->toHtml() : null,
'headContent' => $this->pageConfigRenderer->renderHeadContent(),
'headAdditional' => $addBlock ? $addBlock->toHtml() : null,
'htmlAttributes' => $this->pageConfigRenderer->renderElementAttributes($config::ELEMENT_TYPE_HTML),
'headAttributes' => $this->pageConfigRenderer->renderElementAttributes($config::ELEMENT_TYPE_HEAD),
'bodyAttributes' => $this->pageConfigRenderer->renderElementAttributes($config::ELEMENT_TYPE_BODY),
'loaderIcon' => $this->getViewFileUrl('images/loader-2.gif'),
]);
$output = $this->getLayout()->getOutput();
$this->assign('layoutContent', $output);
$output = $this->renderPage();
$this->translateInline->processResponseBody($output);
$response->appendBody($output);
} else {
parent::render($response);
}
return $this;
}
....
}$this->renderPage() is responsible for including the root template file.
$layoutContent is particularly important, as it contains layout content that is generated based on the empty.xml, and 1(2,3)column.xml layout files, together with all layout updates for the current page.
The root template, like other templates in Magento, can be overridden if necessary. If you’ve successfully created and are using a custom theme, copy the contents of the template file into your theme’s Magento_Theme/templates directory and amend the contents to suit your needs.
Note: This article is based on Magento CE version 2.1.7.