magento2 use menu when clicked add class active

Question

I have file.php

<?php
namespace Smartwave\Megamenu\Block;

class Topmenu extends \Magento\Framework\View\Element\Template{

protected $_categoryHelper;
protected $_categoryFlatConfig;
protected $_topMenu;
protected $_categoryFactory;
protected $_helper;
protected $_filterProvider;
protected $_blockFactory;
protected $_megamenuConfig;
protected $_storeManager;

public function __construct(
    \Magento\Framework\View\Element\Template\Context $context,
    \Magento\Catalog\Helper\Category $categoryHelper,
    \Smartwave\Megamenu\Helper\Data $helper,
    \Magento\Catalog\Model\Indexer\Category\Flat\State $categoryFlatState,
    \Magento\Catalog\Model\CategoryFactory $categoryFactory,
    \Magento\Theme\Block\Html\Topmenu $topMenu,
    \Magento\Cms\Model\Template\FilterProvider $filterProvider,
    \Magento\Cms\Model\BlockFactory $blockFactory
) {

    $this->_categoryHelper = $categoryHelper;
    $this->_categoryFlatConfig = $categoryFlatState;
    $this->_categoryFactory = $categoryFactory;
    $this->_topMenu = $topMenu;
    $this->_helper = $helper;
    $this->_filterProvider = $filterProvider;
    $this->_blockFactory = $blockFactory;
    $this->_storeManager = $context->getStoreManager();
    
    parent::__construct($context);
}

public function getCategoryHelper()
{
    return $this->_categoryHelper;
}

public function getCategoryModel($id)
{
    $_category = $this->_categoryFactory->create();
    $_category->load($id);
    
    return $_category;
}

public function getHtml($outermostClass = '', $childrenWrapClass = '', $limit = 0)
{
    return $this->_topMenu->getHtml($outermostClass, $childrenWrapClass, $limit);
}

public function getStoreCategories($sorted = false, $asCollection = false, $toLoad = true)
{
    return $this->_categoryHelper->getStoreCategories($sorted , $asCollection, $toLoad);
}

public function getChildCategories($category)
{
    if ($this->_categoryFlatConfig->isFlatEnabled() && $category->getUseFlatResource()) {
        $subcategories = (array)$category->getChildrenNodes();
    } else {
        $subcategories = $category->getChildren();
    }
    
    return $subcategories;
}

public function getActiveChildCategories($category)
{
    $children = [];
    if ($this->_categoryFlatConfig->isFlatEnabled() && $category->getUseFlatResource()) {
        $subcategories = (array)$category->getChildrenNodes();
    } else {
        $subcategories = $category->getChildren();
    }
    foreach($subcategories as $category) {
        if (!$category->getIsActive()) {
            continue;
        }
        $children[] = $category;
    }
    return $children;
}

public function getBlockContent($content = '') {
    if(!$this->_filterProvider)
        return $content;
    return $this->_filterProvider->getBlockFilter()->filter(trim($content));
}

public function getCustomBlockHtml($type='after') {
    $html = '';
    
    $block_ids = $this->_megamenuConfig['custom_links']['staticblock_'.$type];
    
    if (!$block_ids) return '';
    
    $block_ids = preg_replace('/\s/', '', $block_ids);
    $ids = explode(',', $block_ids);
    $store_id = $this->_storeManager->getStore()->getId();
    
    foreach($ids as $block_id) {
        $block = $this->_blockFactory->create();
        $block->setStoreId($store_id)->load($block_id);
        
        if(!$block) continue;
        
        $block_content = $block->getContent();
        
        if(!$block_content) continue;
        
        $content = $this->_filterProvider->getBlockFilter()->setStoreId($store_id)->filter($block_content);
        if(substr($content, 0, 4) == '<ul>')
            $content = substr($content, 4);
        if(substr($content, strlen($content) - 5) == '</ul>')
            $content = substr($content, 0, -5);

        $html .= $content;
    }
   
    return $html;
}
public function getSubmenuItemsHtml($children, $level = 1, $max_level = 0, $column_width=12, $menu_type = 'fullwidth', $columns = null)
{
    $html = '';
    
    if(!$max_level || ($max_level && $max_level == 0) || ($max_level && $max_level > 0 && $max_level-1 >= $level)) {
        $column_class = "";
        if($level == 1 && $columns && ($menu_type == 'fullwidth' || $menu_type == 'staticwidth')) {
            $column_class = "col-md-".$column_width." ";
            $column_class .= "mega-columns columns".$columns;
        }
        $html = '<ul class="subchildmenu '.$column_class.'">';
        foreach($children as $child) {
            $cat_model = $this->getCategoryModel($child->getId());
            
            $sw_menu_hide_item = $cat_model->getData('sw_menu_hide_item');
            
            if (!$sw_menu_hide_item) {
                $sub_children = $this->getActiveChildCategories($child);
                
                $sw_menu_cat_label = $cat_model->getData('sw_menu_cat_label');
                $sw_menu_icon_img = $cat_model->getData('sw_menu_icon_img');
                $sw_menu_font_icon = $cat_model->getData('sw_menu_font_icon');

                $item_class = 'level'.$level.' ';
                if(count($sub_children) > 0)
                    $item_class .= 'parent ';
                $html .= '<li class="ui-menu-item '.$item_class.'">';
                if(count($sub_children) > 0) {
                    $html .= '<div class="open-children-toggle"></div>';
                }
                if($level == 1 && $sw_menu_icon_img) {
                    $html .= '<div class="menu-thumb-img"><a class="menu-thumb-link" href="'.$this->_categoryHelper->getCategoryUrl($child).'"><img src="' . $this->_helper->getBaseUrl().'catalog/category/' . $sw_menu_icon_img . '" alt="'.$child->getName().'"/></a></div>';
                }
                $html .= '<a href="'.$this->_categoryHelper->getCategoryUrl($child).'" title="'.$child->getName().'">';
                if ($level > 1 && $sw_menu_icon_img)
                    $html .= '<img class="menu-thumb-icon" src="' . $this->_helper->getBaseUrl().'catalog/category/' . $sw_menu_icon_img . '" alt="'.$child->getName().'"/>';
                elseif($sw_menu_font_icon)
                    $html .= '<em class="menu-thumb-icon '.$sw_menu_font_icon.'"></em>';
                $html .= '<span>'.$child->getName();
                if($sw_menu_cat_label)
                    $html .= '<span class="cat-label cat-label-'.$sw_menu_cat_label.'">'.$this->_megamenuConfig['cat_labels'][$sw_menu_cat_label].'</span>';
                $html .= '</span></a>';
                if(count($sub_children) > 0) {
                    $html .= $this->getSubmenuItemsHtml($sub_children, $level+1, $max_level, $column_width, $menu_type);
                }
                $html .= '</li>';
            }
        }
        $html .= '</ul>';
    }
    
    return $html;
}

public function getMegamenuHtml()
{
    $html = '';
    
    $categories = $this->getStoreCategories(true,false,true);
    
    $this->_megamenuConfig = $this->_helper->getConfig('sw_megamenu');
    
    $max_level = $this->_megamenuConfig['general']['max_level'];
    $html .= $this->getCustomBlockHtml('before');
    foreach($categories as $category) {
        if (!$category->getIsActive()) {
            continue;
        }
        
        $cat_model = $this->getCategoryModel($category->getId());
        
        $sw_menu_hide_item = $cat_model->getData('sw_menu_hide_item');
        
        if(!$sw_menu_hide_item) {
            $children = $this->getActiveChildCategories($category);
            $sw_menu_cat_label = $cat_model->getData('sw_menu_cat_label');
            $sw_menu_icon_img = $cat_model->getData('sw_menu_icon_img');
            $sw_menu_font_icon = $cat_model->getData('sw_menu_font_icon');
            $sw_menu_cat_columns = $cat_model->getData('sw_menu_cat_columns');
            $sw_menu_float_type = $cat_model->getData('sw_menu_float_type');
            
            if(!$sw_menu_cat_columns){
                $sw_menu_cat_columns = 4;
            }
            
            $menu_type = $cat_model->getData('sw_menu_type');
            if(!$menu_type)
                $menu_type = $this->_megamenuConfig['general']['menu_type'];
                
            $custom_style = '';
            if($menu_type=="staticwidth")
                $custom_style = ' style="width: 500px;"';

            $sw_menu_static_width = $cat_model->getData('sw_menu_static_width');
            if($menu_type=="staticwidth" && $sw_menu_static_width)
                $custom_style = ' style="width: '.$sw_menu_static_width.';"';
                
            $item_class = 'level0 ';
            $item_class .= $menu_type.' ';
            
            $menu_top_content = $cat_model->getData('sw_menu_block_top_content');
            $menu_left_content = $cat_model->getData('sw_menu_block_left_content');
            $menu_left_width = $cat_model->getData('sw_menu_block_left_width');
            if(!$menu_left_content || !$menu_left_width)
                $menu_left_width = 0;
            $menu_right_content = $cat_model->getData('sw_menu_block_right_content');
            $menu_right_width = $cat_model->getData('sw_menu_block_right_width');
            if(!$menu_right_content || !$menu_right_width)
                $menu_right_width = 0;
            $menu_bottom_content = $cat_model->getData('sw_menu_block_bottom_content');
            if($sw_menu_float_type)
                $sw_menu_float_type = 'fl-'.$sw_menu_float_type.' ';
            if(count($children) > 0 || (($menu_type=="fullwidth" || $menu_type=="staticwidth") && ($menu_top_content || $menu_left_content || $menu_right_content || $menu_bottom_content)))
                $item_class .= 'parent ';
            $html .= '<li class="ui-menu-item '.$item_class.$sw_menu_float_type.'">';
            if(count($children) > 0) {
                $html .= '<div class="open-children-toggle"></div>';
            }
            $html .= '<a href="'.$this->_categoryHelper->getCategoryUrl($category).'" class="level-top" title="'.$category->getName().'">';
            if ($sw_menu_icon_img)
                $html .= '<img class="menu-thumb-icon" src="' . $this->_helper->getBaseUrl().'catalog/category/' . $sw_menu_icon_img . '" alt="'.$category->getName().'"/>';
            elseif($sw_menu_font_icon)
                $html .= '<em class="menu-thumb-icon '.$sw_menu_font_icon.'"></em>';
            $html .= '<span>'.$category->getName().'</span>';
            if($sw_menu_cat_label)
                $html .= '<span class="cat-label cat-label-'.$sw_menu_cat_label.'">'.$this->_megamenuConfig['cat_labels'][$sw_menu_cat_label].'</span>';
            $html .= '</a>';
            if(count($children) > 0 || (($menu_type=="fullwidth" || $menu_type=="staticwidth") && ($menu_top_content || $menu_left_content || $menu_right_content || $menu_bottom_content))) {
                $html .= '<div class="level0 submenu"'.$custom_style.'>';
                if(($menu_type=="fullwidth" || $menu_type=="staticwidth")) {
                    $html .= '<div class="container">';
                }
                if(($menu_type=="fullwidth" || $menu_type=="staticwidth") && $menu_top_content) {
                    $html .= '<div class="menu-top-block">'.$this->getBlockContent($menu_top_content).'</div>';
                }
                if(count($children) > 0 || (($menu_type=="fullwidth" || $menu_type=="staticwidth") && ($menu_left_content || $menu_right_content))) {
                    $html .= '<div class="row">';
                    if(($menu_type=="fullwidth" || $menu_type=="staticwidth") && $menu_left_content && $menu_left_width > 0) {
                        $html .= '<div class="menu-left-block col-md-'.$menu_left_width.'">'.$this->getBlockContent($menu_left_content).'</div>';
                    }
                    $html .= $this->getSubmenuItemsHtml($children, 1, $max_level, 12-$menu_left_width-$menu_right_width, $menu_type, $sw_menu_cat_columns);
                    if(($menu_type=="fullwidth" || $menu_type=="staticwidth") && $menu_right_content && $menu_right_width > 0) {
                        $html .= '<div class="menu-right-block col-md-'.$menu_right_width.'">'.$this->getBlockContent($menu_right_content).'</div>';
                    }
                    $html .= '</div>';
                }
                if(($menu_type=="fullwidth" || $menu_type=="staticwidth") && $menu_bottom_content) {
                    $html .= '<div class="menu-bottom-block">'.$this->getBlockContent($menu_bottom_content).'</div>';
                }
                if(($menu_type=="fullwidth" || $menu_type=="staticwidth")) {
                    $html .= '</div>';
                }
                $html .= '</div>';
            }
            $html .= '</li>';
        }
    }
    $html .= $this->getCustomBlockHtml('after');
    
    return $html;
}
protected function _getMenuItemClasses(\Magento\Framework\Data\Tree\Node $item)
{
    $classes = [];

    $classes[] = 'level' . $item->getLevel();
    $classes[] = $item->getPositionClass();

    if ($item->getIsCategory()) {
        $classes[] = 'category-item';
    }

    if ($item->getIsFirst()) {
        $classes[] = 'first';
    }

    if ($item->getIsActive()) {
        $classes[] = 'active';
    } elseif ($item->getHasActive()) {
        $classes[] = 'has-active';
    }

    if ($item->getIsLast()) {
        $classes[] = 'last';
    }

    if ($item->getClass()) {
        $classes[] = $item->getClass();
    }

    if ($item->hasChildren()) {
        $classes[] = 'parent';
    }

    $classes[] = $this->_getClassNameFromCategoryName($item);

    return $classes;
}

protected function _getClassNameFromCategoryName($category)
{
    $name = $category->getName();
    $name = preg_replace('/-{2,}/', '-', preg_replace('/[^a-z-]/', '-', strtolower($name)));
    $name = trim($name, '-');
    return $name;
}
}

And file phtml

<?php

?>
<?php
/**
 * Top menu for store
*
 * @see \Smartwave\Megamenu\Block\Topmenu
 */
?>
<?php
$_helper = $this->helper('Smartwave\Megamenu\Helper\Data');
$_config = $_helper->getConfig('sw_megamenu');
$columnsLimit = 0;
$header_type = $_helper->getConfig('porto_settings/header/header_type');

if($_config['general']['enable']) {
?>
<?php $_menu = $block->getMegamenuHtml(); ?>

<nav class="navigation sw-megamenu <?php if($header_type == 8 || $header_type == 10): ?>side-megamenu<?php endif; ?>" role="navigation">
<ul>
    <?php echo $_menu; ?>
</ul>
</nav>

<script type="text/javascript">
require([
    'jquery',
    'Smartwave_Megamenu/js/sw_megamenu'
], function ($) {
    $(".sw-megamenu").swMegamenu();
});
</script>
<?php
} else {
?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit); ?>

<nav class="navigation sw-megamenu" role="navigation">
<ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
    <?php /* @escapeNotVerified */ echo $_menu; ?>
</ul>
 </nav>

<?php
}
?>

And file 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="catalog.topnav" remove="true"/>
    <referenceContainer name="page.top">
        <block class="Smartwave\Megamenu\Block\Topmenu" name="sw.topnav" template="Smartwave_Megamenu::topmenu.phtml" before="-"/>
    </referenceContainer>
    <referenceContainer name="after.body.start">
        <block class="Smartwave\Porto\Block\Template" name="category_list_on_left" template="Smartwave_Megamenu::onepagecategory/category_list.phtml" after="-"/>
    </referenceContainer>
</body>
</page>

But when i clicked menu i echo exit in function getMegamenuHtml() it received. But when echo exit _getMenuItemClasses not working. And not received class 'active'. Please help me!

ANGEL · Accepted Answer · 2021-09-27 15:26:10Z

0

Same question here for porto in order to add a class on the first level for the selected category.

If someone can help me ... thanks a lot

answered Sep 27, 2021 at 15:26

ANGEL

1

Add a comment |

moazzams · Accepted Answer · 2022-08-12 20:03:50Z

    <script type="text/javascript" charset="utf-8" async defer>
    require(['jquery', 'jquery/ui'], function($){
          var path = window.location.href; 
          // because the 'href' property of the DOM element is the absolute path
          $(".ui-menu-item a").each(function() {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
    });
    
    </script>

**for parent category**
<script type="text/javascript" charset="utf-8" async defer>
require(['jquery', 'jquery/ui'], function($){
      var path = window.location.href; 
      // because the 'href' property of the DOM element is the absolute path
      $(".ui-menu-item a").each(function() {
        if (this.href === path && $(this).parent().hasClass('parent')) {
          $(this).first().addClass('active');
        }
      });
});
</script>

Stack Exchange Network

magento2 use menu when clicked add class active

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento2.3
or ask your own question.

Hot Network Questions

magento2 use menu when clicked add class active

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento2.3 or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento2.3
or ask your own question.