1

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?

  • Means want to display all chid categories on parent category page above product listing? – Naresh Rupareliya Nov 28 '19 at 2:27
  • Hello @NareshRupareliya and thank you for your reply, Exactly!! – Alex4842 Nov 28 '19 at 7:38
  • it's easy task. but right now m not free to do this. when i get free i will make for you and will post answer – Naresh Rupareliya Nov 28 '19 at 7:43
0

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.

| improve this answer | |
-1

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
                        }
                    }
                });
            });

| improve this answer | |

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.