10

I want to remove some blocks from my page. Say for example that I want to remove the container for the logo.

Then I create /app/design/frontend/MYVENDORNAME/MYTHEMENAME/Magento_Theme/layout/default.xml with the following code:

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceBlock name="logo" remove="true"/>
</page>

In this case I managed to find out the name (name="logo") of this reference block by searching through the files in the Base Theme.

The question is: Is there a better way to find out the names of blocks. I figure there must be a list of all names used in the XMl files in Magento? Or some kind of reference?

Say for example that I would like to remove the menu (<div class="sections nav-sections">...</div>). How do I find out the name of that

  • 1
    u can find it in XML file in base theme. if you like to remove the menu this name is catalog.topnav. i find it in default.xml in module Theme in base. – xanka Feb 18 '16 at 1:26
13

There are a couple of ways to do this:

  1. Guess
  2. Review Layout for Base, Blank and Luma Themes
  3. Perform IDE Searches for Class and ID Names
  4. Enable 'Enabled Template Path Hints for Storefront' and 'Add Block Names to Hints'.

You can enable path hints and block hints by logging into the admin interface and going to:

Stores > Configuration > Advanced > Developer > Debug

Unfortunately, there's still no surefire way to find these easily, as far as I know. Though it looks like the guys working on the core are on to it:

https://github.com/magento/magento2/issues/571

  • As Gareth said, you can enable template path hints to try to figure out wich template and block is rendering that part of the code. – Barbanet Feb 21 '16 at 20:32
  • 2
    I like how you said 'guess', path hints is pretty useless in some cases. – wlin May 24 '16 at 19:15
  • #4 did not work for me in the first instance, because I did not whitelist my IP as described here: docs.magento.com/m2/ee/user_guide/system/… – where Aug 13 '18 at 0:05
12

Here's how I find them...

Content > Widgets > Add Widget
Type = CMS Static Block
Design Theme = [Your Theme]

Continue

Layout Updates > Add Layout
Display On = [Pick One]

Right click Inspect on "Please Select" underneath Container.
Expand the <select> element in Dev Tools
All the option value='s are your referenceContainer Names.

:)

  • Why don't we see referenceContainers like header.panel or page.wrapper in this list ? – maxagaz Oct 20 '17 at 8:23
  • 1
    Thank you very much! You think magento 2 devs would provide a quick reference to find these names in their docs. Much appreciated for your helpful tip :) – Jonathan Marzullo Jan 3 '18 at 18:43
  • You need to select "Page Layouts" in the "Display On" drop down, then you will see all the reference containers – Samyer Aug 30 '18 at 15:00
  • Thank you! This worked a treat for me - obvious now! – Freshwebs Feb 7 at 16:37
5

You can execute the php-cli code below to get a list of all the ~200 referenceBlock. Make sure the path to your Magento 2 root folder is correct. You can also change the instruction variable to list block, container and referenceContainer.

<?php

//$instruction = "container";
//$instruction = "referenceContainer";
$instruction = "block";
//$instruction = "referenceBlock";

$path = '/var/www/html/magento2/vendor/magento';
$command = 'cd '.$path.' && egrep -r -i --include \*.xml "<'.$instruction.'".*?"name=" *';
exec($command, $output);

$container_max_length = 1;
$pattern = '/(.*?):.*<'.$instruction.'.*name="(.*?)".*/';
foreach ($output as $subject) {
  preg_match($pattern, $subject, $matches);
  $containers[$matches[2]][] = $matches[1];
  if (strlen($matches[2]) > $container_max_length) $container_max_length = strlen($matches[2]);
}

$n=1;
ksort($containers);
foreach ($containers as $k => $v) {
  printf("%6s", "$n. ");
  printf("%-".$container_max_length."s".$v[0]."\n", $k);
  $i=1;
  while (isset($v[$i])) {
    printf("      %-".$container_max_length."s".$v[$i]."\n", "");
    $i++;
  }
  $n++;
}

?>
  • 1
    Genius. This method is so priceless. Thank you so much for sharing. – crashtestxxx Nov 4 '17 at 18:35
  • 1
    This is awesome thanks very much super helpful. I modified it into one that would dump all of them out as text files for the entire site. gist.github.com/LiamKarlMitchell/… – Liam Mitchell Mar 1 at 6:22
4

You can use this free extension:

https://github.com/ho-nl/magento2-Ho_Templatehints

Or following @blizam answer some references picked from the widgets:

After Page Header > page.top

After Page Header Top > top.container

Before Main Columns > columns.top

Before Page Footer > page.bottom

Before Page Footer Container > page.bottom.container

CMS Footer Links > cms_footer_links_container

Compare Link Wrapper > compare-link-wrapper

Main Content Area > content

Main Content Aside > content.aside

Main Content Bottom > content.bottom

Main Content Container > main

Main Content Top > content.top

Mini-cart promotion block > minicart.addons

Page Bottom > before.body.end

Page Footer > footer

Page Footer Container > footer-container

Page Header > header-wrapper

Page Header Container > header.container

Page Header Panel > header.panel

Page Top > after.body.start

Sidebar Additional > sidebar.additional

Sidebar Main > sidebar.main

3

I put together a little module that will write the XML page structure to a log file in the var/log/ folder.

app/code/CustomerParadigm/PageXml/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="CustomerParadigm_PageXml" setup_version="1.0.0" schema_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
</config>

app/code/CustomerParadigm/PageXml/etc/events.xml

<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="customerparadigm_layout_generate_blocks_after" instance="CustomerParadigm\PageXml\Model\Layout" />
    </event>
</config>

app/code/CustomerParadigm/PageXml/registration.php

<?php
    \Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'CustomerParadigm_PageXml',
    __DIR__
);

app/code/CustomerParadigm/PageXml/Model/Layout.php

<?php

namespace CustomerParadigm\PageXml\Model;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;

class Layout  implements ObserverInterface {
    protected $_logger;

    public function __construct ( \Psr\Log\LoggerInterface $logger ) {
        $this->_logger = $logger;
    }

    public function execute(\Magento\Framework\Event\Observer $observer) {
        $log_file = BP . '/var/log/page_layout.xml';
        if (file_exists($log_file)) {
            unlink($log_file);
        }
        $xml = $observer->getEvent()->getLayout()->getXmlString();
        /*$this->_logger->debug($xml);*/
        $writer = new \Zend\Log\Writer\Stream($log_file);
        $logger = new \Zend\Log\Logger();
        $logger->addWriter($writer);
        $logger->info($xml);
        return $this;
    }
}

Nothing too amazing going on here, and i'm sure there is plenty of room to improve (working with the built in logger is one of them) but it gets the job done for me when i'm developing a site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.