Contents
Overview of layout in Magento 2
In Magento 2 layout (1) is used to describe the structure of the website. Container (2) is used to create the elements of the page. It can contain blocks and other containers. Block (3) is used to render the html content of the page contained in the templates .phtml . files
Block
A block is a unit that makes up a web page, anything tangible that the user sees. For example login form, shopping cart… It links between a block class (containing logic) to get data and a template file (.phtml) to display the content. A block can have children or grandchildren, chit…
<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml"/>
- class: The name of a block class that performs data retrieval for templates.
- name: The identifier for the block to call when needed. Note that the name cannot be duplicated and if you leave it blank, Magento will automatically generate a random name.
- template: The name of a .phtml file used to display content with the format: Vendor_Module::path to the template file from the folder inside the templates folder.
- display: defines whether the block is displayed or not (true/false).
- before: Determines which block the current block precedes in the same level. For example, before=”catalog” means that the current block will come before the block named catalog. Or use (-) to put the current block before all other blocks. Note that you can only sort blocks of the same level within a parent element.
- after: same as before but in reverse.
- as: serves as the identifier for the block used in the parent element.
- cacheable: Determines whether the block is cacheable or not.
- ifconfig: makes the display of the block dependent on a system configuration field. For example, ifconfig=”contact/contact/enabled” means that the current block is only visible when the contact/contact/enabled field in the configuration is true.
You can use <argument></argument> to pass arguments to a class variable.
<referenceBlock name="footer_links"> <block class="Magento\Framework\View\Element\Html\Link\Current" name="helloworld-link"> <arguments> <argument name="label" translate="true" xsi:type="string">Helloworld landing</argument> <argument name="path" xsi:type="string">helloworld/index/index</argument> </arguments> </block></referenceBlock>
Above, I passed two parameters, label and path, with corresponding values to the Current class to create a path in the footer.
container
Container can be understood as a container, an outer wrapper or can wrap child elements into an html tag. It does not contain any content. It is used as a container to hold containers or blocks. If there are no child blocks, it will not be displayed outside the frontend.
<container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main"> <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/></container>
- name: defines the name of the container.
- label: used to describe the purpose of the container.
- before and before: similar to block.
- htmlTag: add an HTML tag for the container. For example: div, span, img, table…
- htmlClass: add a class to the container.
- htmlId: add an id for the container.
referenceBlock and referenceContainer
Simply put, these two guys are similar in essence as they update the same block or container respectively. For example, <referenceContainer name=”content”> means I want to update <container name=”content”> again. That is, what you write will overwrite the original element.
<referenceBlock name="block.name" remove="true" />
Update ? Specifically, what can we do?
- Add blocks or containers.
- Edit containers or blocks.
- Delete blocks or containers.
move
Move the block or container to another element you specify. Will be ignored if element is undefined
<move element="name.of.an.element" destination="name.of.destination.element" as="new_alias" after="name.of.element.after" before="name.of.element.before"/>
- element: the name of the element to be removed.
- destination: the name of the parent element you want to move to.
- after and before: similar to block and container.
- as: identifier for the element in the new position.
remove
Used to remove static files like css, js linked to the web page in the <head> tag.
<head> <remove src="css/styles-m.css" /> <remove src="my-js.js"/> <remove src="Magento_Catalog::js/compare.js" /> <remove src="http://fonts.googleapis.com/css?family=Montserrat" /></head>