0

We have faced design collapse issue on the category menu part at the frontend of the website. So, we have created the mega menu using html and css, and included that code in topmenu.phtml.

Now, we just hardcoded and how can I get the category and sub category from backend and map them with the code I have included in topmenu.phtml.

Could anyone please help me?

Code I used in topmenu.phtml

<?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
 */
?>
<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('css/cart.css')?>">



<!-- <div class="sections nav-sections">
        <div class="menu">
            <span>1</span>
            <span>1</span>
            <span>1</span>
        </div> -->
<header class="headers">
    <div class="header-inrs">
        <div class="menu-container">
  <div class="menus">

    <ul class="clearfix">
      <li><a href="#">LG SIGNATURE</a></li>
      <li><a href="#">TV/ AUDIO/ VIDEO  <i class="fa fa-angle-down" aria-hidden="true"></i></a>
        <ul>
          <li><a href="#">School</a>
            <ul>
              <li><a href="#">Lidership</a></li>
              <li><a href="#">History</a></li>
              <li><a href="#">Locations</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Research</a>
            <ul>
              <li><a href="#">Undergraduate research</a></li>
              <li><a href="#">Masters research</a></li>
              <li><a href="#">Funding</a></li>
            </ul>
          </li>
          <li><a href="#">Something</a>
            <ul>
              <li><img src="https://placeimg.com/300/200/nature"></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">MOBILE <i class="fa fa-angle-down" aria-hidden="true"></i></a>
        <ul>
          <li><a href="#">Today</a></li>
          <li><a href="#">Calendar</a></li>
          <li><a href="#">Sport</a></li>
        </ul>
      </li>
      <li><a href="#">COMPUTER APPLIANCE  <i class="fa fa-angle-down" aria-hidden="true"></i></a>
        <ul>
          <li><a href="#">School</a>
            <ul>
              <li><a href="#">Lidership</a></li>
              <li><a href="#">History</a></li>
              <li><a href="#">Locations</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Empty sub</a>
            <ul>
                <li><img src="https://blog.malwarebytes.com/wp-content/uploads/2017/07/shutterstock_328174601-900x506.jpg"></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">AIR CONDITIONER</a></li>
      <li><a href="#">SUPPORT</a></li>
    </ul>
  </div>
</div>
</div>

<div class="search-outer">
        <div class="search-icon">
            <span></span>
        </div>
        <div class="wishlist">
            <span class="wishlist-icon"></span>
        </div>
        <div class="my-account">
            <span class="my-account"></span>
        </div>
        <div class="cart">
            <span class="cart-icon"></span>
        </div>
    </div>
    </div>
</header>


        <nav class="navbar" data-action="navigation">
            <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
                <?= /* @escapeNotVerified */ $_menu ?>
                <?= /* @escapeNotVerified */ $block->getChildHtml() ?>
            </ul>
        </nav>
</div>

<?php
$objectManager =  \Magento\Framework\App\ObjectManager::getInstance(); 
$categoryCollection = $objectManager->get('\Magento\Catalog\Model\ResourceModel\Category\CollectionFactory');

$categoryHelper = $objectManager->get('\Magento\Catalog\Helper\Category');
$categories = $categoryHelper->getStoreCategories();

foreach ($categories as $category) { 
//print_r($category->getData()); ?>  
    <a href="<?php echo $category->getUrl();?>"><?php echo $category->getName() ;?></a>

<?php }?>

Thanks in advance.

  • Can you please share the topmenu.phtml file here? – Sumit Sep 19 at 13:15
  • @Sumit, I have included the code in question. Please help me – Siva Sep 19 at 13:20
0

You can use below code to fetch category and subcategory collection

<?php
$objectManager =  \Magento\Framework\App\ObjectManager::getInstance(); 
$categoryCollection = $objectManager->get('\Magento\Catalog\Model\ResourceModel\Category\CollectionFactory');

$categoryHelper = $objectManager->get('\Magento\Catalog\Helper\Category');
$categories = $categoryHelper->getStoreCategories();
?>
<ul>
<?php
foreach ($categories as $category):  ?>  
    <?php if ($category->getIsActive()): ?>
        <li>
            <a href="<?php echo $category->getUrl();?>"><?php echo $category->getName() ;?></a>
            <ul>
                <?php 
                $subcats = $category->getChildrenCategories();
                $_helper = $this->helper('Magento\Catalog\Helper\Output');
                ?>
                <?php foreach ($subcats as $subcat): ?>
                    <?php if ($subcat->getIsActive()): ?>
                        <li>
                            <a href="<?php echo $subcat->getUrl();?>"><?php echo $subcat->getName() ;?></a>
                        </li>
                    <?php endif; ?>
                <?php endforeach; ?>
            </ul>
        </li>
    <?php endif; ?>
<?php endforeach; ?>
</ul>

Your Answer

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

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