Login link add as dropdown into my account magento 2.1.x

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

Question

I want to show My account menu as drop-down and add Login/Logout link in it.

enter image description here

Currently it shows as separate menu link in top.links >> header.links enter image description here

here is my default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="default_head_blocks" />
<body>
      <referenceBlock name="top.links">
           <block class="Magento\Wishlist\Block\Link" name="wish-list-link" before="my-account-link">
                <block class="<vendor_name>\<module_name>\Block\WishlistCollection" name="wishlist_header" as="wishlist.header" template="<vendor_name_<module_name>::wishlist_items.phtml"/>
           </block>
      </referenceBlock>
      <referenceContainer name="header.panel">
           <block class="Magento\Cms\Block\Block" name="header_top_text" after="-">
                <arguments>
                     <argument name="block_id" xsi:type="string">header_top_text</argument>
                </arguments>
           </block>
      </referenceContainer>
 
    <move element="top.links" destination="header-wrapper" after="minicart" />
    <move element="authorization-link" destination="top.links" after="-"/>
        <referenceBlock name="register-link" remove="true" />
        <referenceBlock name="authorization-link" remove="false" />
        <referenceBlock name="header" remove="true"/>  <!-- remove welcome msg   -->
        <referenceBlock name="footer_links" remove="true" />
        <referenceBlock name="report.bugs" remove="true" />
        <referenceBlock name="catalog.compare.link" remove="true"/>
       <!-- <move element="copyright" destination="before.body.end" />   -->
   </body>
  </page>

Any Suggestions how to set Login/Logout in my accountstrong text as drop-down.

Note : It's Custom theme with parent theme as blank so don't give suggestion with luma theme.

Was it helpful?

Solution

You need to create custom module for achieve this function.

app/code/Vendor/ModuleName/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_ModuleName',
    __DIR__
);

app/code/Vendor/ModuleName/etc/module.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ModuleName" setup_version="1.0.0">
    </module>
</config>

app/code/Vendor/ModuleName/Block/Html/Index.php

<?php
/**
 * @author Vendor Team
 * @copyright Copyright (c) 2016 Vendor
 * @package Vendor_ModuleName
 */

namespace Vendor\ModuleName\Block\Html;

use Magento\Framework\ObjectManagerInterface;


class Index extends \Magento\Framework\View\Element\Template
{
    /**
     *
     * @var \Magento\Customer\Model\Session
     */
    protected $_customerSession;

    /**
     * @var \Magento\Framework\ObjectManagerInterface
     */
    protected $_object;
    /**
     *
     * @var \Magento\Framework\Module\Manager $moduleManager
     */
    protected $_moduleManager;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Framework\Module\Manager $moduleManager,
        \Magento\Customer\Model\Session $customerSession,
        ObjectManagerInterface $interface
    ) {
        $this->_customerSession = $customerSession;
        $this->_object = $interface;
        $this->_moduleManager = $moduleManager;
        parent::__construct($context);
    }

    public function getCustomerSession(){
        $customerSession = $this->_object->create('Magento\Customer\Model\SessionFactory')->create();
        return $customerSession;     
    }

    /**
     * Check customer is logged in or not
     * @var $_SESSION['customer_base']['customer_id'] 
     * used to resolve confliction from magento FPC
     * @return boolean
     */
    public function getCustomerLoggedIn()
    {
        $login = false;
        $_customCustomerSession = $this->getCustomerSession();
        $_customerId = $_customCustomerSession->getCustomerId();
        $customerSession = $this->_customerSession;
        if($customerSession->isLoggedIn() || $_customerId) {
            $login = true;
        }

        return $login;
    }

    /**
     * get customer data
     * @return array [customer id,name,email,group]
    */
    public function getCustomerData()
    {
        $om = \Magento\Framework\App\ObjectManager::getInstance();
        $_customCustomerSession = $this->getCustomerSession();
        $_customerId = $_customCustomerSession->getCustomerId();

        if($_customerId)
        {
            $_customerId = $_SESSION['customer']['customer_id'];    
            $_customer = $om->get('\Magento\Customer\Model\Customer')->load($_customerId);
            $_customerData = array(
                'name' => $_customer->getName(),
                'id' => $_customer->getId(),
                'email' => $_customer->getEmail(),
                'group' => $_customer->getGroupId()
            );
            return $_customerData;
        }
    }

    /**
     * Whether a module is enabled in the configuration or not
     *
     * @param string $moduleName Fully-qualified module name
     * @return boolean
     */
    public function isModuleEnabled($moduleName)
    {
        return $this->_moduleManager->isEnabled($moduleName);
    }

    /**
     * Whether a module output is permitted by the configuration or not
     *
     * @param string $moduleName Fully-qualified module name
     * @return boolean
     */
    public function isOutputEnabled($moduleName)
    {
        return $this->_moduleManager->isOutputEnabled($moduleName);
    }
}

Vendor/ModuleName/view/frontend/layout/default.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="top.links">
            <block class="Vendor\ModuleName\Block\Html\Index" name="newlogin" template="Vendor_ModuleName::html/myfile.phtml" />
         </referenceContainer>
    </body>
</page>

Vendor/ModuleName/view/frontend/templates/html/myfile.phtml

<?php
/**
 * Vendor account login dropup
 */
?>
<?php 
$login = $block->getCustomerLoggedIn();
$_logInUrl = 'customer/account/login';
$_myAccountInUrl = 'customer/account/';
$buttonTitle = __("Sign In");

if($login) {
    $buttonTitle = __("Sign Out");
    $_logInUrl = 'customer/account/logout';
}
?>
<li id="minilogin" class="minilogin-wrapper">
    <a id="minilogin-toggle" class="action" href="<?php echo $block->getUrl($_myAccountInUrl);?>"><span class="text"><?php echo __('Mein Konto');?></span></a>
    <div id="minilogin-content-wrapper" style="display: none;">
        <?php if($login):?>
            <div class="minilogin-customer">
                <?php echo $this->getLayout()->createBlock('Magento\CMS\Block\Block')->setBlockId('my-account-link')->toHtml(); ?>
            </div>
        <?php endif;?>
        <a href="<?php echo $block->getUrl($_logInUrl);?>" id="minilogin-login" class="minilogin-login button btn">            
            <?php echo $buttonTitle;?></a>
            <?php if(!$login):?>
                <div class="minilogin-login-text">
                    <span><?php echo __('New to store?');?></span>
                    <span class="minilogin-sign-link">
                        <a href="<?php echo $block->getUrl('customer/account/create/');?>"><?php echo __('Register for free');?></a>
                    </span>
                </div>
            <?php endif;?>
        <div class="minilogin-saperator"></div>
        <div class="minilogin-links-wrapper">
            <ul class="minilogin-links">
            <?php echo $this->getChildHtml();?>
            </ul>
        </div>
    </div>
</li>

<script type="text/javascript">
    require([
        'jquery'
    ], function($) {
        $(document).ready(function($) {
            $("#minilogin").hover(function () {
                $("#minilogin-content-wrapper").toggle();
            })
        });
    });
</script>

Let me know if you have face any issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top