Display subcategories on category Magento 2

Question

i would like please your help. I am newbie on Magento and I would like to show subcategories of category on its parent's page on a slider. I tried initially to show the categories on the parent category (on list.phtml) but with no luck, as suggested here

https://mage2.pro/t/topic/1813/15

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');
    $subcats = $category->getChildrenCategories();
    $_helper = $this->helper('Magento\Catalog\Helper\Output');?>
    <ul>
    <?php
    foreach ($subcats as $subcat) {
        if ($subcat->getIsActive()) {
            $_category = $objectManager->create('Magento\Catalog\Model\Category')->load($subcat->getId());
            $_outputhelper = $this->helper('Magento\Catalog\Helper\Output');
            $subcaturl = $subcat->getUrl();

            $_imgHtml = '';
            if ($_imgUrl = $_category->getImageUrl()) {

                $_imgHtml = '<img src="' . $_imgUrl . '" />';
                $_imgHtml = $_outputhelper->categoryAttribute($_category, $_imgHtml, 'image');

                /* @escapeNotVerified */
                echo '<li><a href="' . $subcaturl . '" class="block-promo" title="' . $subcat->getName() . '">' . $_imgHtml . '<span  class="categ_div"><strong></strong><br><br><span class="action more button">Learn More</span></span></a></li>';
            }
        }
    } ?>
</ul>

Can you please help?

Answer 1

First of all please avoid using object manager (why? https://devdocs.magento.com/guides/v2.3/extension-dev-guide/object-manager.html)

There is already a magento core feature that provides something in line what you want to do: the category left navigation, it's a list of subcategories normally used in the left sidebar of a category page (that doesn't use filters aka layered navigation). Have a look at what is inside magento/module-catalog/view/frontend/templates/navigation/left.phtml

The steps I would do to achieve what you want to do is something like this: In your theme or module (depending on what you're developing) create a new template and add it to the category page using xml. Use the same block as the left navigation, copy the content of the left.phtml in to you custom template and modify it to your needs.

Answer 2

Managed to do like it says here https://mage2.pro/t/topic/1813/5

   $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
   $category = $objectManager->get('Magento\Framework\Registry')registry('current_category');//get current category
   $subcats = $category->getChildrenCategories();
   $_helper = $this->helper('Magento\Catalog\Helper\Output');?>

   <?php if(($subcats->count())>0) {?>
  <div class="product-items">
      <div id="owlsliderCat">
  <?php     foreach ($subcats as $subcat) {
    if ($subcat->getIsActive()) {
        $_category = $objectManager->create('Magento\Catalog\Model\Category')->load($subcat->getId());
        $_outputhelper = $this->helper('Magento\Catalog\Helper\Output');
        $subcaturl = $subcat->getUrl();
        $_imgHtml = '';
        if ($_imgUrl = $_category->getImageUrl()) {
            $_imgHtml = '<img  src="' . $_imgUrl . '" />';
            $_imgHtml = $_outputhelper->categoryAttribute($_category, $_imgHtml, 'image');
            /* @escapeNotVerified */
            echo '<div class="list_categ item"><a href="' . $subcaturl . '" class="block-promo" title="' . $subcat->getName() . '">' . $_imgHtml . '<p>' . $subcat->getName() . '</p></a></div>';
        }
    }
} ?>
</div>
</div>

<?php }?>

 <script type="text/javascript">
            require([
                'jquery',
                'mgs/owlcarousel'
            ], function ($) {
                $('#owlsliderCat').owlCarousel({
                    items: 10,
                    autoplay: true,
                    autoplayHoverPause: true,
                    nav: true,
                    dots: true,
                    lazyLoad: true,
                    navText: ["<i class='pe-7s-angle-left'></i>","<i class='pe-7s-angle-right'></i>"],
                    responsive:{
                        0:{
                            items:1
                        },
                        768:{
                            items:2
                        },
                        992:{
                            items:5
                        }
                    }
                });
            });