Table of Contents
As a part of this process, you may require to add or remove a block from the layout in Magento 2. Here, I’ve shown how to remove blocks or containers from layout in Magento 2 with a programmatic solution.
1. How to remove block from Layout in Magento 2:
The implementation allows you to remove a block or container in your layout by setting the remove attribute value to true, or to cancel the removal of a block or container by setting the value to false.
One of easiest method to remove block from layout is just removed it from layout XML file. The syntax is like below
<referenceBlock name="block_name" remove="true" />
For example, I want to remove the “Create An Account” link from the header.
To remove the block, make a change similar to the following in a theme extending app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml:
<?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>
<referenceContainer name="register-link" remove="true"/>
</body>
</page>
<referenceBlock>for the blocks, or<referenceContainer>for the containersname=> name of the block or container which you want to removeremove=> set to true to remove.
After flushing cache, the “Create An Account” link will get removed from header.
2. Conditionally Remove Block From Layout using Event Observer
Do you want to remove a block from the layout on a specific condition? You just need to use a Magento event to do that. Let’s check it together.
To remove a block from the layout on a specific condition we will need the Magento event “layout_generate_blocks_after” which is called after the page layout blocks are generated. So lets define our event.
For example:- you would like to remove wishlist link for certain customer group only.
To do this,
Step 1: Define the event in events.xml file.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="layout_generate_blocks_after">
<observer name="thecoachsmb_layout_generate_blocks_after" instance="Thecoachsmb\Custom\Observer\Removeblocks" />
</event>
</config>
Step 2: Define Observer file Removeblocks.php
As you can see the class instance that is defined to be used is the Removeblocks. So on the observer class below where the execute function is the one that will be called we add our condition to remove the block that we want.
<?php
namespace Thecoachsmb\Custom\Observer;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
class Removeblocks implements ObserverInterface
{
public function execute(Observer $observer)
{
/** @var \Magento\Framework\View\Layout $layout */
$layout = $observer->getLayout();
//$block = $layout->getBlock('block_name');
$block = $layout->getBlock('customer-account-navigation-wish-list-link');
if ($block) {
//you can apply or add you condition here.
//$layout->unsetElement('block_name');
$layout->unsetElement('customer-account-navigation-wish-list-link');
}
}
}
First we get the block by name from the layout. If the block exists then we can add our condition and if it’s true, then we remove the block from the layout using the unsetElement function.
Please notice that the example above is not gonna work on the pages that the full page cache is enabled.
3. How to eliminate block depending on a config setting in Magento 2?
Now, let’s learn how to eliminate block depending on a config setting in Magento 2.
By using two steps we will be able to remove block depending on a config setting in Magento 2. The following steps are:
-
- Step 1: create your Event.xml
- Step 2: create the observer to apply condiftion
Step 1: Create Your Event.Xml
Construct your event.xml in the event.xml file in app\code\[Name_Space]\[Your_Module]\etc
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="layout_generate_blocks_after">
<observer name="remove_block" instance="[Name_Space]\[Your_Module]\Model\Observer\RemoveBlock" />
</event>
</config>
Step 2: Create the observer to apply condition
In app\code\[Name_Space]\[Your_Module]\Model\Observer
<?php
namespace [Name_Space]\[Your_Module]\Model\Observer;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
class RemoveBlock implements ObserverInterface
{
protected $_scopeConfig;
public function __construct(
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
) {
$this->_scopeConfig = $scopeConfig;
}
public function execute(Observer $observer)
{
/** @var \Magento\Framework\View\Layout $layout */
$layout = $observer->getLayout();
$block = $layout->getBlock('dashboard');
if ($block) {
$remove = $this->_scopeConfig->getValue(
'dashboard/settings/remove',
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
);
if ($remove) {
$layout->unsetElement('dashboard');
}
}
}
}
The above-mentioned steps are the shortest process to eliminate block in Magento depending on a config setting.
4. How to remove a container in Magento2
A container renders child elements during view output generation. It can be empty or it can contain an arbitrary set of <container> and <block> elements. If the <container> is empty, and there is no child <block> available, it will not be displayed in the frontend source code.
Steps to Remove Container From Layout in Magento 2:
Your code will be like this:
<referenceContainer name="content" remove="true"/>
For example, remove the content form the product page:
In catalog_product_view.xml
<?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> <referenceContainer name="content" remove="true"/> </body> </page>
Other than removing the block, I used <referenceContainer> to remove the container.
Name is the name of the container which I want to delete.
Remove is set to true to remove. After flushing cache, the content will get removed from the product page.
5. How to remove Static resource (JavaScript, CSS, fonts)
To remove the static resources, linked in a page <head>, make a change similar to the following in a theme extending app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml:
<?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">
<head>
<!-- Remove local resources -->
<remove src="css/styles-m.css" />
<remove src="my-js.js"/>
<remove src="Magento_Catalog::js/compare.js" />
<!-- Remove external resources -->
<remove
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
<remove
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
<remove src="http://fonts.googleapis.com/css?family=Montserrat" />
</head>
</page>
Note, that if a static asset is added with a module path (for example Magento_Catalog::js/sample.js) in the initial layout, you need to specify the module path as well when removing the asset.
If js files are called via the RequireJS approach: by declaring in the require/define sections, we cannot remove it from the layout.
Conclusion
In this article, we have learned removing blocks, remove blocks based on the specific condition, remove containers, remove css, js, fonts.
Feel free to write a comment if you face any difficulty while implementing any of above approaches. I’d be happy to help you to achieve your task.