Close [x]

Customizing layout illustration

Edit this page on GitHub

What's in this topic

This article features a step-by-step illustration of how a real-life layout customization task is performed. Namely, it illustrates how to change the layout of customer account links in a Magento store page header.

Moving customer account links

In their Orange theme, OrangeCo wants to transform the header links block to a drop-down, the way it is done in the Magento Luma theme:

To do this, they need to wrap the list of header links with a container and add a greeting with a drop-down arrow before the list.

By default the rendered header links look like following:

Needed:


Step 1: Define the blocks

OrangeCo applies the Luma theme. Using the approach described in Locate templates, layouts, and styles they find out that the blocks responsible for displaying the header links are defined in <Magento_Customer_module_dir>/view/frontend/layout/default.xml:

...
<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.links">
            <block class="Magento\Customer\Block\Account\Link" name="my-account-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">My Account</argument>
                </arguments>
            </block>
            <block class="Magento\Customer\Block\Account\RegisterLink" name="register-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="true">Register</argument>
                </arguments>
            </block>
            <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link" template="account/link/authorization.phtml"/>
        </referenceBlock>
    </body>
</page>

Step 2: Define the templates

Similar to the way they defined the layout on the previous step, OrangeCo defines the template which is used for rearranging the links:

<Magento_Customer_module_dir>/view/frontend/templates/account/customer.phtml

<?php if($this->customerLoggedIn()): ?>
    <li class="customer welcome customer-welcome">
        <span class="customer name" data-mage-init='{"dropdown":{}}' data-toggle="dropdown">
            <span><?php echo $this->getCustomerName(); ?></span>
            <button type="button" class="action switch"><span><?php echo __('Change')?></span></button>
        </span>
        <?php if($this->getChildHtml()):?>
        <div class="customer menu customer-menu" data-target="dropdown">
            <?php echo $this->getChildHtml();?>
        </div>
        <?php endif; ?>
    </li>
<?php endif; ?>


Step 3: Extend the base layout to add a block

OrangeCo needs to create a new block, say, header.links, in the header.panel container, to move the links there. As the links can be added to this list by different modules, it is better to add this block to the default.xml page configuration of the Magento_Theme module.

So the following extending layout is added in the Orange theme:

app/design/frontend/OrangeCo/orange/Magento_Theme/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header.panel">
            <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>


Step 4: Move links

To move the links to the header.links block, OrangeCo adds an extending layout:

app/design/frontend/OrangeCo/orange/Magento_Customer/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <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>
            <move element="register-link" destination="header.links"/>
            <move element="top.links" destination="customer"/>
            <move element="authorization-link" destination="top.links" after="-"/>
        </body>
    </page>

Now the customer links look like following:

The last touch is adding styles: