Add links inside My Account in header Magento 2

magento.stackexchange https://magento.stackexchange.com/questions/306742

  •  12-04-2021
  •  | 
  •  

Question

How can i add links inside Myaccount in header of magento 2 See https://prnt.sc/ren9h3

Was it helpful?

Solution

Add the below code in

app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/default.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>
        <referenceBlock name="top.links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-orders-link-top" after="my-account-link" >
                <arguments>
                    <argument name="path" xsi:type="string">sales/order/history</argument>
                    <argument name="label" xsi:type="string" translate="true">My Orders</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Try below code to add a dropdown on your theme, Replace below code with your My account link code

<?php 
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $context = $objectManager->get('Magento\Framework\App\Http\Context');
    $isLoggedIn = $context->getValue(\Magento\Customer\Model\Context::CONTEXT_AUTH);
?>
<div class="item item-left item-interface" style="padding-top : 8px">
    <i class="fa fa-user-circle-o" aria-hidden="true"></i><a id="open_my_account" href="javascript:void(0)" title="<?= __('My Account') ?>" style="color:#ffff";><span class="label"><?= __('My Account') ?></span></a>
    <div class="drop-down-links" id="account_links_content" style="display: none;">
        <ul>
            <li><a href="<?= $block->getUrl('wishlist'); ?>"><?= __('My wishlist') ?></a></li>
            <li><a href="<?= $block->getUrl('checkout/cart'); ?>"><?= __('My Cart') ?></a></li>
            <li><a href="<?= $block->getUrl('checkout'); ?>"><?= __('Checkout') ?></a></li>
            <?php if(!$isLoggedIn): ?>
                <li><a href="<?= $block->getUrl('customer/account/create'); ?>"><?= __('Register') ?></a></li>
            <?php endif; ?>
            <li><a href="<?= $block->getUrl('knowledge-base'); ?>"><?= __('Knowledge Base') ?></a></li>
            <?php if(!$isLoggedIn): ?>
                <li><a href="<?= $block->getUrl('customer/account/login'); ?>"><?= __('Login') ?></a></li>
            <?php else: ?>
                <li><a href="<?= $block->getUrl('customer/account/logout'); ?>"><?= __('Logout') ?></a></li>
            <?php endif; ?>
        </ul>
    </div>
</div>

And add the below JS code at the end of your file.

<script type="text/javascript">
    require(['jquery', 'jquery/ui'], function($){ 
        $(document).ready(function() {
            $("#open_my_account").click(function(){
                $("#account_links_content").slideToggle();
            }); 
        })
    });
</script>

CSS code

.header-container .right-column .top-links > ul {float: left; position: relative; text-align: left; width: 100%; line-height: 36px;}
#account_links_content {position: absolute; right: -20px; top: 40px; background: #ffffff; width: 190px; color: #000000; border: 1px solid #999999; padding: 16px 15px; z-index: 11;}
#account_links_content::after {content: ""; position: absolute; right: 40px; top: -9px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff;}
#account_links_content::before {content: ""; position: absolute; right: 40px; top: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #999;}
#account_links_content ul {float: left; position: relative; text-align: left; width: 100%;}
#account_links_content ul li a {color: #000; line-height: normal;}

This code will create the dropdown but you need to add styling using CSS to make the design the same as your screenshot.

OTHER TIPS

step 1 Add default.xml in app/design/frontend/your-theme-namespace/yourtheme/Magento_Sales/layout.

 <?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>
        <referenceBlock name="top.links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-orders-link-top" after="my-account-link" >
                <arguments>
                    <argument name="path" xsi:type="string">sales/order/history</argument>
                    <argument name="label" xsi:type="string" translate="true">My Orders</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top