How to make a multi-level category menu in opencart 2.0?

Question

PHP

In opancart 1.5 there are modules that expand the functionality of displaying categories up to 3 or more levels of nesting. How to do the same for Opencart 2.0. I did not find ready-made modules. Can anyone share their experience?

Answer 1

Solved for 3 levels
Module category:
HTML

<div class="panel panel-default">
    <div class="panel-heading"><b> Каталог товаров </b><!--- <?php echo $heading_title; ?> --> </div>    


<ul class="customdrop" role="menu" aria-labelledby="dropdownMenu">


<?php foreach ($categories as $category) { ?>
    <?php 
        $classes = '';
        if ($category['category_id'] == $category_id) { 
            $classes .= 'active';
        }

        if($category['children']) {
            $classes .= ' dropdown-submenu';
        }
    ?>
        <li class="<?php echo $classes; ?>">
            <a href="<?php echo $category['href'];?>" title="<?php echo $category['name'];?>">
                <?php echo $category['name']; ?>
            </a>

            <?php if($category['children']) { ?>
            <ul class="dropdown-menu">
                <?php 
                    $classes = '';
                    foreach ($category['children'] as $child)
                    { 
                        if($child['children']) {
                            $classes .= ' dropdown-submenu';
                        }
                ?>
                <li class="<?php echo $classes; ?>">
                    <a href="<?php echo $child['href'];?>" tabindex="-1" title="<?php echo $child['name'];?>"><?php echo $child['name'];?></a>
                    <?php 
                        if($child['children']) {
                    ?>
                    <ul class="dropdown-menu">
                        <?php 
                            $classes = '';
                            foreach ($child['children'] as $subChild)
                            { 
                                if($subChild['children']) {
                                    $classes .= 'dropdown-submenu';
                                }
                        ?>
                        <li class="<?php echo $classes; ?>">
                            <a href="<?php echo $subChild['href'];?>" title="<?php echo $subChild['name'];?>"><?php echo $subChild['name'];?></a>
                        </li>
                        <?php } ?>
                    </ul>
                        <?php } ?>
                </li>
                <?php } ?>
            </ul>

                <?php }?>

        </li>
<?php } ?>
    </ul>

</div>

Styles:

.customdrop {
  display: block;
  position: relative;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: -2px;
  list-style: none;
  padding: 10px;
}

.customdrop:hover {
  background: #ffda10;
}
.customdrop > li:hover  > a,
.customdrop > li.active > a{
   color: #000;
}

.customdrop .dropdown-menu li > a:hover {
text-decoration: none;
color: #000;
background-color: #ffda10;
background-image: none;
}

.customdrop .dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: 0px;
}
.customdrop .dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
}
.customdrop .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 262px;
  padding: 5px 0;
  margin: 7px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #fff;
}

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 0px 0 0px 0px;
    -moz-border-radius: 0px 0 0px 0px;
    border-radius: 0px 0 0px 0px;
}

Category module code

<?php
class ControllerModuleCategory extends Controller {
  public function index($setting) {
    $this->load->language('module/category');

    $data['heading_title'] = $this->language->get('heading_title');

    if (isset($this->request->get['path'])) {
      $parts = explode('_', (string)$this->request->get['path']);
    } else {
      $parts = array();
    }

    if (isset($parts[0])) {
      $data['category_id'] = $parts[0];
    } else {
      $data['category_id'] = 0;
    }

    if (isset($parts[1])) {
      $data['child_id'] = $parts[1];
    } else {
      $data['child_id'] = 0;
    }

    $this->load->model('catalog/category');

    $this->load->model('catalog/product');

    $data['categories'] = array();

    $categories = $this->model_catalog_category->getCategories(0);

    foreach ($categories as $category) {
      $children_data = array();

      $children = $this->model_catalog_category->getCategories($category['category_id']);

      foreach ($children as $child) {
        $filter_data = array(
          'filter_category_id'  => $child['category_id'],
          'filter_sub_category' => true
        );

        $subChild_data = array();
        $subChildrens = $this->model_catalog_category->getCategories($child['category_id']);
        foreach ($subChildrens as $subChild) {
          $filter_data = array(
            'filter_category_id'  => $subChild['category_id'],
            'filter_sub_category' => true
          );

          $subChild_data[] = array(
            'category_id' => $subChild['category_id'],
            'name'        => $subChild['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
            'href'        => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $subChild['category_id'])
          );
        }

        $children_data[] = array(
          'category_id' => $child['category_id'],
          'children'	  => $subChild_data,
          'name'        => $child['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
          'href'        => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
        );

      }

      $filter_data = array(
        'filter_category_id'  => $category['category_id'],
        'filter_sub_category' => true
      );

      $data['categories'][] = array(
        'category_id' => $category['category_id'],
        'name'        => $category['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
        'children'    => $children_data,
        'href'        => $this->url->link('product/category', 'path=' . $category['category_id'])
      );
    }

    if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/category.tpl')) {
      return $this->load->view($this->config->get('config_template') . '/template/module/category.tpl', $data);
    } else {
      return $this->load->view('default/template/module/category.tpl', $data);
    }
  }
}

Answer 2

Do you write code? Or suggest how to do it? If the second, then you can look at
www.getinfo.ru/article610.html

Answer 3

Hello. Have you tested this code on Opencart 2.2 ?

Answer 4

https://opencartforum.com/files/file/5217-mnogofun...