Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
Want to show top links as "DROPDOWN" in custom theme. Trying from many days but still no success.
Have to show "Sign In/Up" Link in toplinks when customer is not logged in.
After Customer Logged In "Sign In/Up" replaced with Customer Name or Email Id with a "on hover" "DROPDOWN" having the following links in that
"My Account" "My Orders" "Custom Link" "Sign Out"
Please help me out.
Reference for the above question
You have to create a block class to achieve that.
First of all in your module's frontend default.xml layout file you have to add the following code
<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="Your_Namespace\Your_Modulename\Block\Link" name="custom-link" after="my-account-link"/>
</referenceBlock>
</body>
</page>
Your block class
namespace Your_Namespace\Your_Modulename\Block;
/**
* Class Link
*
* @SuppressWarnings(PHPMD.DepthOfInheritance)
*/
class Link extends \Magento\Framework\View\Element\Html\Link
{
/**
* Template name
*
* @var string
*/
protected $_template = 'Your_Namespace_Your_Modulename::link.phtml';
/**
* @param \Magento\Framework\View\Element\Template\Context $context
* @param array $data
*/
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
array $data = []
) {
parent::__construct($context, $data);
}
/**
* @return string
*/
public function getHref()
{
return $this->getUrl('custom/controller/action');
}
/**
* @return \Magento\Framework\Phrase
*/
public function getLabel()
{
return __('Your custom link');
}
}
Then you need also to create the template file we defined in the block class and add the following code
<li class="link custom">
<a <?php /* @escapeNotVerified */ echo $block->getLinkAttributes() ?>><?php echo $block->escapeHtml($block->getLabel()) ?></a>
</li>
First create default.xml in your module (I am assuming that you already know how to create module in magento2) with below path
app/code/YOURNAME_SPACE/YOUR_MODULE_NAME/view/frontend/layout/
and paste below code
<?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="YOUR_NAMESPACE\YOUR_MODUE_NAME\Block\TopLink" name="your-link-top">
<arguments>
<argument name="label" xsi:type="string" translate="true">Custom Link</argument>
<argument name="path" xsi:type="string" translate="true">custom-path</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Now create Block TopLink.php in your module with below path,
YOUR_NAMESPACE\YOUR_MODUE_NAME\Block
<?php
namespace YOUR_NAMESPACE\YOUR_MODUE_NAME\Block;
use Magento\Customer\Model\Context;
use Magento\Framework\View\Element\Template\Context as TemplateContex;
use Magento\Customer\Model\Session;
class TopLink extends \Magento\Framework\View\Element\Html\Link {
/**
*
* @var Session
*/
protected $session;
/**
*
* @param TemplateContex $context
* @param Session $session
* @param array $data
*/
public function __construct(
TemplateContex $context, Session $session,array $data = []) {
$this->session = $session;
parent::__construct($context, $data);
}
/**
* Render block HTML.
*
* @return string
*/
protected function _toHtml() {
if (false != $this->getTemplate()) {
return parent::_toHtml();
}
if ($this->session->isLoggedIn()) {
return '<li><a ' . $this->getLinkAttributes() . ' >' . $this->escapeHtml($this->getLinkLabel()) . '</a></li>';
}
}
/**
*
* @return string
*/
private function getLinkLabel() {
return 'Custom Link';
}
}
You can apply an easier version (but I do not recommend it), using Object Manager. I modified the default.xml theme layout, where I included a phtml made by myself. You can create a custom phtml file, use it in the theme layout:
<block class="Magento\Framework\View\Element\Template" name="custom.block" template="Vendor_Module::header-items.phtml" />
instead of Vendor_Module you set the path to where you created the phtml file
And the header-items.phtml file:
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$context = $objectManager->get('Magento\Framework\App\Http\Context');
$isLoggedIn = $context->getValue(\Magento\Customer\Model\Context::CONTEXT_AUTH);
$customerSession = $objectManager->create('Magento\Customer\Model\Session');
$full_name = $customerSession->getCustomer()->getName();
$first_full_name = $customerSession->getCustomer()->getFirstname();
$last_full_name = $customerSession->getCustomer()->getLastname();
if(trim($first_full_name) != '' && trim($last_full_name) != ''){
$prenume_final = trim(strtoupper($first_full_name))[0];
$nume_final = trim(strtoupper($last_full_name))[0];
}
?>
<div class="account-items">
<?php if($isLoggedIn) : ?>
<div class="isLogged">
<a id="contul-meu" class="isLogged">
<span class="text-header" id="name-account">
<?php if (isset($prenume_final) && isset($nume_final)){ ?><?php
echo $prenume_final.''.$nume_final; }?></span><span class="text-header"> Contul meu</span>
<button class="account btn" id="contul-meu"></button>
</a>
<div class="meniuCont">
<div id="funcCont" class="func-content">
<span class="welcome-menu">Bun venit, <?php
echo $full_name ?>!</span>
<hr class="hr-menu">
<a href="/customer/account/">Sumar cont</a>
<a href="/sales/order/history/">Comenzile mele</a>
<a href="/wishlist/">Produse favorite</a>
<a href="/customer/address/">Adresa</a>
<a href="/customer/account/edit/">Informatii cont</a>
<a href="/vault/cards/listaction/">Metode de plata salvate</a>
<a href="/review/customer/">Recenzii produse</a>
<a href="/newsletter/manage/">Abonare la Newsletter</a>
<a href="/customer/account/logout/">Deconectare</a>
</div>
</div>
<a class="wishlist-block" href="/wishlist"
data-bind="scope: 'wishlist'">
<i class="far fa-heart"></i>
<span class="counter qty empty"
data-bind="css: { empty: !!wishlist().counter == false }">
<span class="counter-number">
<!-- ko if: wishlist().counter -->
<!-- ko text: wishlist().counter.replace(/[^0-9]+/g, '') --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: wishlist().counter -->0<!-- /ko -->
</span>
</span>
<span class="text-header">Favorite</span>
</a>
</div>
<?php else : ?>
<div class="notLogged">
<a id="contul-meu"><i class="far fa-user"></i> <span class="text-header">Contul meu</span>
<button class="account btn" id="contul-meu-guest"></button></a>
<div class="meniuCont">
<div id="funcCont" class="func-content">
<a href="/customer/account/login">Autentificare</a>
<a href="/customer/account/create">Creare cont</a>
</div>
</div>
<a class="wishlist-block" href="/wishlist"
data-bind="scope: 'wishlist'">
<i class="far fa-heart"></i>
<span class="counter qty empty"
data-bind="css: { empty: !!wishlist().counter == false }">
<span class="counter-number">
<!-- ko if: wishlist().counter -->
<!-- ko text: wishlist().counter.replace(/[^0-9]+/g, '') --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: wishlist().counter -->0<!-- /ko -->
</span>
</span>
<span class="text-header">Favorite</span>
</a>
</div>
<?php endif; ?>
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"wishlist": {
"component": "Magento_Wishlist/js/view/wishlist"
}
}
}
}
}
</script>
The next step is to create a CSS file with the menu classes and style them to make a dropdown.
