Kdjykuj

I want to display subcategory in category page with the image.
I've to put below code get only subcategory name not getting the image.

How to get subcategory image in category page?

if($this->getLayer()->getCurrentCategory())



            $subcategories=$this->getLayer()->getCurrentCategory()->getCategories($this->getLayer()->getCurrentCategory()->getId());





            if($subcategories->count()>0){



                foreach($subcategories as $subcategory){



                   <li>

                      <a href="<?php echo $subcategory->getRequest_path(); ?>"><?php echo $subcategory->getName() ?></a>

                   </li> 

                }      

            }else{}



endif;

i used this block to have the same functionality and called the block in xml ( don't forget to create a template for the block with the desired functionality and html mockup

namespace NamespaceModule_NameBlock;



class Subcategories extends MagentoFrameworkViewElementTemplate

{



    /**

     * @var MagentoFrameworkRegistry

     */

    protected $_registry;



    /**

     * @var MagentoCatalogModelResourceModelCategoryCollectionFactory

     */

    protected $_categoryCollectionFactory;



    /**

     * @var MagentoCatalogHelperCategory

     */

    protected $_categoryHelper;



    /**

     * Subcategories constructor.

     * @param MagentoBackendBlockTemplateContext $context

     * @param MagentoCatalogModelResourceModelCategoryCollectionFactory $categoryCollectionFactory

     * @param MagentoCatalogHelperCategory $categoryHelper

     * @param MagentoFrameworkRegistry $registry

     * @param array $data

     */

    public function __construct(

        MagentoBackendBlockTemplateContext $context,

        MagentoCatalogModelResourceModelCategoryCollectionFactory $categoryCollectionFactory,

        MagentoCatalogHelperCategory $categoryHelper,

        MagentoFrameworkRegistry $registry,

        array $data = 

    )

    {

        $this->_registry = $registry;

        $this->_categoryCollectionFactory = $categoryCollectionFactory;

        $this->_categoryHelper = $categoryHelper;

        parent::__construct($context, $data);

    }





    public function getCurrentCategory()

    {

        return $this->_registry->registry('current_category');

    }





    public function getCategoryCollection(){

        $_category = $this->getCurrentCategory();

        $collection = $this->_categoryCollectionFactory->create();

        $collection->addAttributeToSelect('*')

            ->addAttributeToFilter('is_active', 1)

            ->setOrder('position', 'ASC')

            ->addIdFilter($_category->getChildren());



        return $collection;

    }





}

I did this by creating a preference for MagentoModelResourceModelCategory and an observer for MagentoModelResourceModelCategoryFlat.

Create a Module

app/code/{vendor_name}/{module_name}

Create

app/code/{vendor_name}/{module_name}/registration.php

MagentoFrameworkComponentComponentRegistrar::register(

MagentoFrameworkComponentComponentRegistrar::MODULE,

    '{vendor_name}_{module_name}',

    __DIR__

);

app/code/{vendor_name}/{module_name}/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

    <module name="{vendor_name}_{module_name}" setup_version="1.0.0"></module>

</config>

app/code/{vendor_name}/{module_name}/etc/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <preference for="MagentoCatalogModelResourceModelCategory" type="{vendor_name}{module_name}{path_to_class i.e ModelResourceModelCategory}" />

</config>

I've just used the same name as the file this is taking precedence over but this is optional.

app/code/{vendor_name}/{module_name}ModelResourceModelCategory.php

namespace {vendor_name}{module_name}ModelResourceModel;



class Category extends MagentoCatalogModelResourceModelCategory

{

    /* Override this method */



    public function getChildrenCategories($category)

    {        

        $collection = $category->getCollection();

        /* @var $collection 

        MagentoCatalogModelResourceModelCategoryCollection */

        $collection->addAttributeToSelect(

            'url_key'

        )->addAttributeToSelect(

            'name'

        )->



        /* Add this section to select image */

        addAttributeToSelect(

            'image'

        )->

        /* Add this section to select image */



        addAttributeToSelect(

        'all_children'

        )->addAttributeToSelect(

        'is_anchor'

        )->addAttributeToFilter(

            'is_active',

            1

        )->addIdFilter(

            $category->getChildren()

        )->setOrder(

            'position',

            MagentoFrameworkDBSelect::SQL_ASC

        )->joinUrlRewrite()->load();



        return $collection;

    }

}

Ideally I would have used a plugin here, but sadly because of how this method is defined I don't see how I can.

I used Magento_Catalog/template/category/description.phtml to output my subcategories, I'm using the category main image as a thumbnail.

<?php if ($_description = $_category->getDescription()): ?>

<div class="category-description">

    <?php /* @escapeNotVerified */ echo $this->helper('MagentoCatalogHelperOutput')->categoryAttribute($_category, $_description, 'description') ?>

</div>

<?php endif; ?>



<?php if($_category->hasChildren()): ?>

   <div class="categories wrapper grid categories-grid">

       <ul class="categories list items categories-items">

           <?php foreach($_category->getChildrenCategories() as $_child): ?>

               <?php if($_child->getIsActive()): ?>

                   <li class="item category category-item">

                       <?php if($_child->getImageUrl()): ?> <!-- We can now use getImageUrl() on child categories -->

                           <a href="<?php echo $_child->getUrl() ?>" class="category photo category-item-photo" tabindex="-1">                        

                                <span class="category-image-container">

                                    <span class="category-image-wrapper" style="padding-bottom: 125%;">

                                        <img class="category-image-photo" src="<?php echo $_child->getImageUrl(); ?>" alt="<?php /* @escapeNotVerified */ echo $this->helper('MagentoCatalogHelperOutput')->categoryAttribute($_child, $_child->getName(), 'name') ?>" />

                                    </span>

                                </span>                    

                            </a>

                        <?php endif; ?>

                        <strong class="category name category-item-name">

                            <a class="category-item-link" href="<?php echo $_child->getUrl() ?>"><?php /* @escapeNotVerified */ echo $this->helper('MagentoCatalogHelperOutput')->categoryAttribute($_child, $_child->getName(), 'name') ?></a>

                        </strong>

                    </li>

                <?php endif; ?>

            <?php endforeach; ?>

        </ul>

    </div>

<?php endif; ?>

This works great for EAV mode but doesn't work in flat category mode, to fix that we need to create an observer, oddly Magento provides a hook/event to modify the database query in flat category mode, but not in EAV mode.

Create

app/code/{vendor_name}/{module_name}/etc/frontend/events.xml

I've used frontend here as I'm only interested in observing this event on the frontend.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">

<event name="catalog_category_flat_loadnodes_before">

    <observer name="{uour_unique_observer_name}" instance="{vendor_name}/{module_name}/Observer/{Whatever i.e CategoryFlatObserver}" />

</event>

Finally an observer class

app/code/{vendor_name}/{module_name}/Observer/{your_observer_name

i.e FlatCategoryObserver.php}`

namespace {vendor_name}{module_name}Observer;



use MagentoFrameworkEventObserverInterface;



class CategoryFlatObserver implements ObserverInterface

{

    public function execute(MagentoFrameworkEventObserver $observer)

    {

        $select = $observer->getData('select');

        $select->columns('image');

    }

}

Now anywhere the category resource model and getChildrenCategories() method is used on the frontend it will select the category image. Need to do a setup:upgrade and clear all caches before this will work.

If you are still looking for a solution to show Subcategories on parent category page. Have a look at Advanced Subcategory Grid module on Magento2 Marketplace that can be used to show subcategories on category pages, its highly customizable and also supports configurable color swatches as-well.

I have Put Below Code Magento_Catalog/templates/category/products.phtml File and Get all Subcategory Images and Data.

$_helper    = $this->helper('MagentoCatalogHelperOutput');

    $objectManager = MagentoFrameworkAppObjectManager::getInstance();

    $category = $objectManager->get('MagentoFrameworkRegistry')->registry('current_category');

    $childcategories = $category->getChildrenCategories();

    $sub_category_count = count($childcategories);



if($sub_category_count != 0){

echo '<ul>';

foreach($childcategories as $child)

{   

    echo '<li class="sub-cat">';

    $cat = $objectManager->create('MagentoCatalogModelCategory')->load($child->getId()); 



       if ($_imgUrl = $cat->getImageUrl())

             {

        $_imgHtml = '<div class="category-image"><img src="' . $_imgUrl . '" alt="' . $block->escapeHtml($cat->getName()) . '" title="' . $block->escapeHtml($cat->getName()) . '" class="image" /></div>';

        $_imgHtml = $_helper->categoryAttribute($cat, $_imgHtml, 'image');

        /* @escapeNotVerified */ echo $_imgHtml;

} 



echo '</li>'; }

echo '</ul>';

} else {

if (!$block->isContentMode() || $block->isMixedMode()):

echo $block->getProductListHtml();

endif;

}

It's Working Fine for me.