How to make blocks of sub categories or make them organized in magento 2

Question

I want to make sub categories in navigation bar to display in organized blocks. How can i achieve it through coding.

Like the one in http://rashmian.com/ http://alothemes.com/demo/supermarket/index.php/?___store=english_2

Where category having long sub categories are organized well.

In first link they have used megamenu extension. However if I want any free extension or want to achieve it by coding.

Answer 1

Create custom block:

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

protected $_itemCollectionFactory;
protected $_request;
protected $_categoryFactory;

public function __construct(
    \Magento\Framework\View\Element\Template\Context $context,
    \Magento\Catalog\Model\ResourceModel\Category\CollectionFactory $categoriesCollection,
    \Magento\Catalog\Model\CategoryFactory  $categoryFactory,
    \Magento\Framework\App\Request\Http $request,
    array $data = []
) {
    $this->_itemCollectionFactory = $categoriesCollection;
    $this->_categoryFactory = $categoryFactory;
    $this->_request = $request;
    parent::__construct($context, $data);
}

public function getContent()
{
    return __("Shop By Categories");
}

public function getMainCategories()
{
    $categoryFactory = $this->_itemCollectionFactory->create()
                            ->addAttributeToSelect('*');

    return $categoryFactory;
}

public function getSubCategoryList($category)
{
  $collection = $this->_categoryFactory->create()->getCollection()->addAttributeToSelect('*')
          ->addAttributeToFilter('is_active', 1)
          ->setOrder('position', 'ASC')
          ->addIdFilter($category->getChildren());
  return $collection;

 }
}

Layout xml:

   <referenceContainer name="content">
        <block class="Ktpl\Shopbycategories\Block\Homepagecategories" name="categories_display" template="vendor_Shopbycategories:categories.phtml" />
    </referenceContainer>

Template categories.phtml :

<?php
      $catTitle = $block->getContent();
      $mainCats = $block->getMainCategories();
      $subcats = $block->getMainCategories();
 ?>
 <h2><b><?php echo __($catTitle); ?></b></h2>
 <hr>
    <?php foreach ($mainCats as $category): ?>
        <?php if ($category->getLevel() == 2): ?>
        <div style="box-shadow: 5px 5px 5px 5px rgb(237,237,237); width: 270px;height: 225px;float:left; margin: 10px 20px">
            <div class="categories" style="margin: 10px 20px;">
                <div class="category-title">
                    <h3><b><?php echo __($category->getName()); ?></b></h3>
                </div>
                <?php $subcount = 0; ?>
                <?php foreach ($subcats as $key => $subcategory):?>
                        <?php if ($category->getId() == $subcategory->getParentId()):?>
                                <div class="sub-categories">
                                    <a href="#">
                                        <?php echo __($subcategory->getName()); ?>  
                                    </a>
                                </div>              
                            <?php $subcount++; ?>
                        <?php endif;?>
                        <?php if ($subcount == '5'){break;} ?>
                <?php endforeach; ?>
                <hr>
                <div class="shop-by-all-categories">
                    <a href="<?php echo $block->getUrl('categories/index/view/id/' . $category->getId()) ?>">
                        <?php echo __("Shop All " . $category->getName()); ?>
                    </a>
                </div>
            </div>              
        </div>
      <?php endif; ?>
  <?php endforeach; ?>

Answer 2

Structure :

  vendor->module
      ->Block->Categories.php
      ->view->frontend
             ->layout->cms_page_view.xml
             ->templates->categories.phtml

and then set that line to admin->content->Your page

Answer 3

with my code you will get like this:

so just set block into your category

Answer 4

After lot of struggle what i did was pics up the css of the navigation bar which i want and apply that in my own style sheet file ie: styles-l.css

.navigation .level0.active > .level-top,.navigation .level0.has-active > .level-top{
    border-color: #ff5501;border-style: solid;
    border-width: 0 0 3px;color: #333;
    text-decoration: none;
    display: inline-block
}
.navigation .level0.parent:hover > .submenu{overflow: visible !important}

.navigation .level0 .submenu{
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 5px 5px rgba(0,0,0,0.19);
font-weight: 400;min-width: 230px;
padding: 15px 0;
display: none;
left: 0;
margin: 0 !important;
padding: 0;
position: absolute;
z-index: 1;
margin-top: 11px;
width: 800px;
}
.ui-menu-item {
    display: inline-block;
}
.navigation .level0 .submenu a {
    display: block;
    line-height: inherit;
    color: #575757;
    padding: 8px 20px;
}
.navigation .level0 .submenu > ul{margin-top: 11px}
.navigation .level0 .submenu > ul:before,.navigation .level0 .submenu > ul:after{
    content: '';display: block;overflow: hidden;position: absolute
}
.navigation .level0 .submenu > ul:before{
    color: #fff;left: 20px;top: -20px;border: 10px solid transparent;
    height: 0;width: 0;border-bottom-color: #fff;z-index: 4
}
.navigation .level0 .submenu > ul:after{
    border: 11px solid transparent;
    height: 0;width: 0;border-bottom-color: #ccc;color: #ccc;left: 19px;
    top: -22px;z-index: 3
}
.navigation .level0 .submenu a{
    display: block;line-height: inherit;
    color: #575757;padding: 8px 20px
}
.navigation .level0 .submenu a:hover,.navigation .level0 .submenu a.ui-state-focus{
    background: #e8e8e8;
    color: #333;text-decoration: none
}
.navigation .level0 .submenu .active > a{
    border-color: #ff5501;border-style: solid;
    border-width: 0 0 0 3px;color: #333
}