Are you a Magento store owner? Initiate your Magento development project with us. Lets get started
Magento application implements the Model-view-controller architecture pattern; meaning, the Magento software is architected into layers, including the view layer.
Magento layouts are very important for theme development. Layouts are xml files located in your theme/layout folder. Layout files are responsible for setting positions of various elements on the page and determining which phtml is loaded on which page and placed where.
The basic elements of Magento layout are Header, Footer, and the Main Content. Since main content differs for every page whereas the common elements like header, footer and some default static resources (css, js, fonts) are the same and are loaded for each page.
In some places, we do not need headers or static blocks. For example, we do not need the default elements in the pages returned by AJAX requests, emails, HTML snippets etc.
In this blog we will discuss about how to remove header footer in Magento 2? There are different ways to do this. We will discuss further detail implementation of each type and its pros and cons.
Remove Static Resources (JS, CSS, Fonts) & Elements
To remove the static resources and elements, you can use the below code in your layout file.
The disadvantage of this method is that since we are unaware of some of the default elements and static resources, we will not be able to remove all the elements.
Changing Layout Type
The type of page layout to be used for a certain page is defined in the layout file, in the layout attribute of the root node.
To load an empty page without headers or other elements, set the layout type to empty. (layout=”empty”).
The disadvantage of this type is that though it displays an empty page, it loads all the css and js and default page elements except header and footer.
Generic Layouts
Magento has 3 layout types – Page layout file, Page Configuration file and Generic Layout.
Generic layout defines the contents and detailed structure inside the
section of the HTML page markup. These files are used for pages returned by AJAX requests, emails, HTML snippets and so on.
This layout type will load only the defined contents. The disadvantage is that it will also load some default static resources.
Load Template From Controller
The below code will help to remove the default elements and the static resources.
The best way to load our content without Magento default elements and static resources is to instantiate our block from controller file instead of defining it in layout file.
Controller file to instantiate our block.
The above file instantiates our block, through that we can call our template in controller.
By this way we can load our content in an empty Magento page without any header, footer or static resources. This type will be used while loading content through Ajax request, email or html snippets.
