Add links inside My Account in header Magento 2
Pergunta
How can i add links inside Myaccount in header of magento 2 See https://prnt.sc/ren9h3
Solução
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.
Outras dicas
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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a magento.stackexchange