Magento calling a block with getChildHtml

Question

Please follow the code bellow, which is taken from my Magento Commerce theme:

extract from layout/page.xml

<block type="page/html_header" name="header" as="header">
    <block type="page/template_links" name="top.links" as="topLinks"/>
    <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
    <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml"/>
    <block type="directory/currency" name="store_currency_selector" as="store_currency_selector" template="directory/currency_top.phtml"/>
    <block type="core/text_list" name="top.menu" as="topMenu" translate="label">
        <label>Navigation Bar</label>
        <block type="page/template_links" name="top.links.mobile" as="topLinksMobile"/>
        <block type="checkout/cart_sidebar" name="cart_sidebar_mobile" as="cartSidebarMobile" template="checkout/cart/topbar.phtml"/>
    </block>
    <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
        <label>Page Header</label>
        <action method="setElementClass"><value>top-container</value></action>
    </block>
    <block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" template="checkout/cart/topbar.phtml"/>
</block>

extract from template/catalog/navigation/top.phtml

<li class="level0 nav-2 active level-top first parent">
    <a href="javascript:;">ACCOUNT</a>
    <?php echo $this->getParentBlock()->getChildHtml('topLinksMobile'); ?>
</li>
<li class="level0 nav-3 active level-top first parent">
    <a href="javascript:;">CART</a>
    <?php echo $this->getChildHtml('cartSidebarMobile'); ?>
</li>

Basically, what I'm trying to do, is create two sub-blocs inside the "topMenu" block, and than print them into the template by using "getChildHtml" function.

Unfortunately, my function call fails, while the two blocks are loaded before my top.phtml generated content.

Please give me some advice about what am I doing wrong.

Many thanks in advance.

Methadone

Answer 1

Try call function in following file template/page/html/topmenu.phtml

Schumer

Answer 2

I've advanced a bit.

By reading: Magento - display block but only show when I call it with getChildHtml

and: Understanding Magento Block and Block Type

I understood that core/text_list automatically prints the content, so I've changed the type to "page/html_wrapper".

Problem is that now the content of those two elements are duplicated. Once before the content of top.phtml, and the second when getChildHtml is called.

Any ideas would be much appreciated.

Methadone

UPDATE: I gave up. I'm initializing the elements via getBlock function: <?php echo $this->getLayout() ->getBlockSingleton('checkout/cart_sidebar')->setTemplate('checkout/cart/topbar.phtml')->toHtml(); ?> I am still interested though, in the other method, so my question remains. – Methadone

I would try core/template type - it definitely won't output any child block without getChildHtml. – Sternutation

Answer 3

The getChildHtml method is the real power of blocks/templates. It allows you to render all the blocks inside a secondary block(“child”). inside of a primary block (“parent”). Blocks calling blocks calling blocks is how the entire HTML layout for your page is created.

Format:

getChildHtml('block_name'); ?>

Notes: Use $block instead of $this in PHTML template files, since the use of $this, according to Magento 2 Coding Standards, is discouraged

If the command can find block_name in template files anywhere, it will get you the HTML of block_name, that is only if block_name is a child of the current block.

For example, let’s take a look at an excerpt of the template file (view.phtml) for module-wishlist:

helper(\Magento\Wishlist\Helper\Data::class)->isAllow()) : ?>

<div class="toolbar wishlist-toolbar"><?= $block->getChildHtml('wishlist_item_pager'); ?></div>
<?= ($block->getChildHtml('wishlist.rss.link')) ?>

Here we can see the class wishlist-toolbar has its content rendered by the blocks: wishlist_item_pager and wishlist.rss.link. These blocks are child blocks and are defined in wishlist_index_index.xml (located in vendor\magento\module-wishlist\view\frontend\layout):

Note: The getChildHtml method can only include blocks that are specified as sub-blocks (child) in the Layout. This allows Magento to only instantiate the blocks it needs, and also allows you to set different templates for blocks based on context.

Illusage