This is continuation of the previews blog on layouts. In this we will see more examples of using layout and customization
referenceBlock
This is used to remove or hide an existing block. This application of this is very simple,
suppose we want to remove the search box from top header in magento.
In the previous default.xml layout we created add this code
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="top.search" remove="true" />
</body>
</page>
this will remove the search box
More details here
container
container are building blocks, but they don’t have any template or class associated with it. They are simply used to hold other blocks. if you add any block inside a container it will automatically render the output. same is not true for block, adding a block inside another bock won’t render it. We need to explicitly call $block->getChildHtml('block_name') to render it
To see how to use a container let’s create a footer container and add social media links to it through different blocks
Here is how the final output should be
Here is how to do this
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="footer">
<container after="footer_links" name='social.links' htmlTag="ul" htmlClass="footer links">
<block name="facebook" class="Magento\Framework\View\Element\Template" template="Magento_Theme::footer/facebook.phtml" />
<block name="google" class="Magento\Framework\View\Element\Template" template="Magento_Theme::footer/google.phtml" />
<block name="twitter" class="Magento\Framework\View\Element\Template" template="Magento_Theme::footer/twitter.phtml" />
</container>
</referenceContainer>
</body>
</page>
In above code i took reference of a container “footer” which needs to be seen from other layout files. Then add a new container within it and further added multiple blocks to the container.
We have seen here how to use
referenceContainer
and
after
as well.
referenceContainer
and
referneceBlocks
are the same, the can be used to remove or add child container, block
More details here
move
This is used to move block or container around, i.e change the parent of block/container
e.g suppose we need to move newsletter subscription from footer to header.
Step1: Turn on template path hints to find out the module for newsletter box. As you can find its Magento_Newsletter
Step2: Find out the block name for newsletter box from in the Magento/Newsletter/view/frontend/layout/default.xml which is “form.subscribe”
Step3: Create Magento_Newsletter/layout/default.xml in your theme and add this code
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<move element="form.subscribe" destination="header-wrapper" />
</body>
</page>
So here we moved ‘from.subscibe’ block to ‘header-wrapper’ container.
Also another thing to note, in the above code we created a new folder ‘Magento_Newsletter’. This is not required, we can always write code in any default.xml layout file. But to maintain magento coding style this is important to do. If this is not followed, its very easy to loose track of which blocks are defined in which file.
Also go through these blogs by magento which are quite important to understand layouts further
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-extend.html
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-override.html
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-practice.html
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-walkthrough.html
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-override.html
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-sample.html
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-security.html
The post Magento2 Theme – Layouts & Templates – Part2 appeared first on Excellence Technologies Magento Blog | Magento Tutorials | Magento Developer.