0

We have customised our own mega-menu for our site. I can display the parent category, sub category and sub-sub category but not able to display the parent category image.

I want show like below:

enter image description here

Code in block file:

<?php
namespace Butterfly\Megamenu\Block;
class Categorylist extends \Magento\Framework\View\Element\Template
{    
    protected $_categoryHelper;
    protected $categoryFactory;
    protected $_catalogLayer;
    protected $_categoryRepository;


    public function __construct(
        \Magento\Catalog\Block\Product\Context $context,     
        \Magento\Catalog\Helper\Category $categoryHelper,        
    \Magento\Catalog\Model\CategoryRepository $categoryRepository,        

        array $data = []
    ) {


        $this->_categoryHelper = $categoryHelper;   
    $this->_categoryRepository = $categoryRepository;
        parent::__construct(
            $context,          
            $data
        );


    }

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

    public function getCategoryById($categoryId) 
    {
        return $this->_categoryRepository->get($categoryId);

    }

public function  getSubcategories($categories) {
    $array= '<ul class="child">';
    foreach($categories->getChildrenCategories() as $category) {
        $array .= '<li>'.
        '<a href="' .$category->getRequestPath().'">' .
                  $category->getName() . "</a>\n";
        if($category->hasChildren()) {
            $children = $this->getCategoryById($category->getId());
             $array .=  $this->getSubcategories($children);
            }
         $array .= '</li>';
    }
    return  $array . '</ul>';
}


}

Code in template file:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Top menu for store
 *
 * @var $block \Magento\Theme\Block\Html\Topmenu
 */
?>


    <link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('css/cart.css')?>">

  <?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Top menu for store
 *
 * @var $block \Magento\Theme\Block\Html\Topmenu
 */
?>



<header class="headers">
  <div class="header-inrs">
    <div class="menu-container">
      <div class="menus contenedor-menu">
        <ul class="clearfix backcolor designmenu">
          <div class="totalmobilelog">
            <div class="lo">
              <a href="" ><b class="clsml"><i class="fa fa-user-plus" aria-hidden="true"></i>Login</b></a>
            </div>
            <div class="si">
              <a href="" ><b class="clsml"><i class="fa fa-registered" aria-hidden="true"></i>Sign Up</b></a>
            </div>
          </div>
          <?php
          $categories = $block->getStoreCategories();

          foreach ($categories as $category):

          ?>


          <li><a href="<?php echo $category->getRequestPath();?>"><?php echo $category->getName(); ?>

            <?php
            $subCategories = $block->getCategoryById($category->getId());
            $subCats = $subCategories->getChildrenCategories();
            if(count($subCats) > 0): ?>
              <i class="fa fa-angle-down" aria-hidden="true"></i>
            <?php endif; ?>
          </a>
            <ul class="subc">
            <?php
            foreach ($subCats as $subCategory):
            ?>

            <li><a href="<?php echo $subCategory->getRequestPath();?>"><?php echo $subCategory->getName(); ?></a>

          </li>

          <?php endforeach; ?>

        </ul>
        <?php echo $block->getSubcategories($subCategories); ?>
        <?php endforeach; ?>
      </li>
  </ul>
</div>
</div>
</div>
</header>

Code in JS:

jQuery(document).ready(function() {
      "use strict";
      jQuery('.itm > ul > li:has( > ul)').addClass('menu-dropdown-icon');
      jQuery('.itm > ul > li > ul:not(:has(ul))').addClass('normal-sub');
      jQuery(".menus > ul").before("<div class=\"barshw\"><a class=\"iconsclick\" onclick=\"show(this)\"><i class=\"fa fa-bars hideicon\" aria-hidden=\"true\"></i></a></div><div class=\"contentbody\"><div class=\"contentmenu\" onclick=\"stop_propogate(event)\"><div class=\"itm\">"+document.querySelector('.menu-container .menus').innerHTML+"</div>");

      jQuery('.contentmenu .items  ul li:has( > ul)').each(function(){ 
                          if(jQuery(this).find('a i').length == 0){ 
                                  jQuery(this).find('a')[0].insertAdjacentHTML('beforeend', '<i class="fa fa-angle-down" aria-hidden="true"></i>'); 
                          } 
                  });

      jQuery(".menus > ul > li").hover(function(e) {
        if (jQuery(window).width() > 943) {
          var el = e.target.tagName.toLowerCase() == 'li' ? e.target : e.target.closest('li');
          if(el.querySelector('ul li') != undefined){
            jQuery(this).children("ul").stop(true, false).fadeToggle(150);
            setTimeout(function(){
              var el = e.target.tagName.toLowerCase() == 'li' ? e.target : e.target.closest('li');
              var sty = el.querySelector('ul').style.display;
              if(sty == 'block'){
                el.querySelectorAll('.menus > ul > li > ul').forEach(function(se){
                  se.style.display = 'flex';
                });
              }
            }, 160);
            e.preventDefault();
          }
        }
      });
      jQuery("li:has( > ul)").each(function(){
      if(jQuery(this).find('i').length > 0){
        jQuery(this).find('i')[0].addEventListener('click', function(ev){
          if (jQuery(window).width() <= 943) {
              ev.stopPropagation();
              jQuery(ev.target).closest('li').children("ul").fadeToggle(150);
           }
        })
       }
     });


      document.querySelector('.contentmenu').style.left = - (document.querySelector('.contentmenu').clientWidth + 300) + 'px';
    });
    jQuery(window).resize(function() {
      jQuery(".itm > ul > li").children("ul").hide();
      jQuery(".itm > ul").removeClass('show-on-mobile');
    });


// jQuery(function(){
// jQuery(".menus > ul > li > ul").css('height','auto');
// });


   });




function show(e){
      var att = e.getAttribute('active');
      if(att == undefined || att == "false"){
        e.setAttribute('active', 'true');
        document.querySelector('.contentmenu').style.left = "26px";
        setTimeout(function(){
          document.querySelector('body').addEventListener('click', close_menu);
        }, 100);
      }else{
        e.setAttribute('active', 'false');
        document.querySelector('body').removeEventListener('click', close_menu);
        document.querySelector('.contentmenu').style.left = - (document.querySelector('.contentmenu').clientWidth + 120) + 'px';
      }
    }
    function close_menu(){
      document.querySelector('.iconsclick').click();
    }
    function stop_propogate(ev){
      ev.stopPropagation();
    }

Can anyone please help me with this?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.