3

I want to put the header.links into another block. this is the icon.phtml file:

<div data-block="dropdown" class="minicart-wrapper">
    <i class='fas fa-user-circle action' data-trigger='trigger'></i>
</div>

the menu.phtml file:

<div id="links-menu" class="block block-minicart"
     data-mage-init='{
        "dropdownDialog": {
            "appendTo": "[data-block=dropdown]",
            "triggerTarget":"[data-trigger=trigger]",
            "timeout": 2000,
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "autoOpen": false,
            "triggerClass": "active",
            "parentClass": "active",
            "dialogContentClass": "active", 
            "buttons": []
        }
     }'>
    content
</div>

This is the layout file:

<referenceContainer name="header-wrapper">
    <block class="Magento\Framework\View\Element\Template" name="icon_account" as="icon_account" template="Magento_Customer::/icon/icon.phtml"/>
    <block class="Magento\Framework\View\Element\Template" name="links-menu" as="links-menu" template="Magento_Customer::/menu/menu.phtml"/>
</referenceContainer>

<move element="header.links" destination="links-menu"/>

The problem is that the header.links are not into the desired destination. How can I fix it?

Full xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>  <!-- this is the css to render the icon of the account link -->
        <css src="https://use.fontawesome.com/releases/v5.7.0/css/all.css" src_type="url"/>
    </head>

    <body>
        <referenceBlock name="header.links">
            <block class="Magento\Customer\Block\Account\Customer" name="customer" template="account/customer.phtml" before="-"/>
            <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link-login" template="account/link/authorization.phtml"/>
        </referenceBlock>

        <block class="Magento\Theme\Block\Html\Header" name="header" as="header">
            <arguments>
                <argument name="show_part" xsi:type="string">welcome</argument>
            </arguments>
        </block>
        <move element="header" destination="header.links" before="-"/>
        <move element="register-link" destination="header.links"/>
        <move element="my-account-link" destination="header.links"/>        
        <move element="top.links" destination="customer"/>
        <move element="authorization-link" destination="top.links" after="-"/>
        <referenceBlock name="register-link" remove="true"/>


        <referenceContainer name="header-wrapper">
            <block class="Magento\Framework\View\Element\Template" name="icon_account" as="icon_account" template="Magento_Customer::/icon/icon.phtml"/>
            <block class="Magento\Framework\View\Element\Template" name="links-menu" as="links-menu" template="Magento_Customer::/menu/menu.phtml"/>
        </referenceContainer>

        <move element="header.links" destination="links-menu"/> 

        <move element="icon_account" destination="header-wrapper" before="minicart"/>
        <move element="top.search" destination="header-wrapper" after="logo"/>

    </body>
</page>
| improve this question | |
  • write full xml. – Sohel Rana May 24 '19 at 9:14
  • where is the closing tag for <referenceBlock name="header.links"> – Ranganathan May 24 '19 at 9:48
  • it doesn't work. – blob May 24 '19 at 9:54
0

I edited the layout file:

<referenceContainer name="header-wrapper">
            <block class="Magento\Framework\View\Element\Template" name="icon_account" as="icon_account" template="Magento_Customer::/icon/icon.phtml"/>
            <block class="Magento\Framework\View\Element\Template" name="links-menu" as="links-menu" template="Magento_Customer::/menu/menu.phtml">
                <block class="Magento\Framework\View\Element\Template" name="links-menu-content" as="links-menu-content" template="Magento_Customer::/menu/content.phtml"/>
            </block>
        </referenceContainer>

        <move element="header.links" destination="links-menu-content" after="-"/>

I created a content.phtml file:

<div id="minicart-content-wrapper">
    <?php echo $block->getChildHtml('header.links'); ?>
</div>

The menu.phtml file:

<div id="links-menu" class="block block-minicart"
     data-mage-init='{
        "dropdownDialog": {
            "appendTo": "[data-block=dropdown]",
            "triggerTarget":"[data-trigger=trigger]",
            "timeout": 2000,
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "autoOpen": false,
            "triggerClass": "active",
            "parentClass": "active",
            "dialogContentClass": "active", 
            "buttons": []
        }
     }'>
<?php echo $block->getChildHtml('links-menu-content'); ?>
</div>

the icon.phtml file:

<div data-block="dropdown" class="minicart-wrapper">
    <i class='fas fa-user-circle action' data-trigger='trigger'></i>
</div>

So the problem was this piece of code was missing:

 <?php echo $block->getChildHtml('child block name'); ?>

It is not implicit in the layout that the parent block call its child block.

| improve this answer | |

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.