cancel
Showing results for 
Search instead for 
Did you mean: 

getting sub category list with images 2.1

getting sub category list with images 2.1

I'm new to magento and really been racking my brain to figure out how to get sub categories to show images on parent page

 

anyone that can help i will be totally grateful   

 

looking to do this for sub categories under main category

2 REPLIES

Re: getting sub category list with images 2.1

Create Static Block,

Name as Subcategory Listing,

Keep content inside block,

 

set content inside block,

 

{{block class="Vendor\Modulename\Block\Subcategory" template="Vendor_Modulename::listing.phtml"}}

Now Open your main category,
Now changes on Display Setting tab as below,
Display mode set to static block only.
Set CMS Block from dropdown listing,Subcategory Listing.
Save Category.


Crate one block file in your module,

<?php
namespace Vendor\Modulename\Block;

use Magento\Framework\App\Filesystem\DirectoryList;

class Subcategory extends \Magento\Catalog\Block\Product\ListProduct
{
    protected $catalogProductVisibility;
    protected $_categoryHelper;
    protected $categoryFactory;
    protected $_catalogLayer;

    public function __construct(
        \Magento\Catalog\Block\Product\Context $context,     
        \Magento\Catalog\Helper\Category $categoryHelper,   
        \Magento\Catalog\Model\CategoryFactory $categoryFactory,
        \Magento\Framework\Filesystem $filesystem,
        \Magento\Framework\Data\Helper\PostHelper $postDataHelper,
        \Magento\Catalog\Model\Layer\Resolver $layerResolver,
        \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository,
        \Magento\Framework\Url\Helper\Data $urlHelper,      
        array $data = []
    ) {
        $this->_categoryHelper = $categoryHelper;
        $this->categoryFactory = $categoryFactory;  
        $this->_catalogLayer = $layerResolver->get();        
        $this->storeManager = $context->getStoreManager();
        $this->_filesystem = $filesystem;  
        parent::__construct(
            $context,
            $postDataHelper,
            $layerResolver,
            $categoryRepository,
            $urlHelper,
            $data
        );
    }

    public function getCurrentCategoryInfo(){
        $categories = $this->_catalogLayer->getCurrentCategory()->getChildrenCategories();
        return $categories;
    }

    public function getStoreCategories($sorted = false, $asCollection = false, $toLoad = true)
    {
        return $this->_categoryHelper->getStoreCategories($sorted , $asCollection, $toLoad);
    }
    
    public function getCategoryData($id){
        return $category = $this->categoryFactory->create()->load($id);       
    }
    
}

In template file,

<?php
   $currentCategory = $this->getCurrentCategoryInfo();
   $noOfCategory  = count($currentCategory);
?>
<?php if($noOfCategory) { ?>
<ul class="listing-category">
<?php
   foreach($currentCategory as $categoryDetails){
      $categoryId = $categoryDetails->getId();

      $categoryObj = $this->getCategoryData($categoryId);      
        $categoryImage = $categoryObj->getData('image');
        $categoryUrl = $categoryObj->getUrl();
        $categoryName = $categoryDetails->getName();

        $imageUrlPlaceHolder = $block->getViewFileUrl('images/no-img.jpg');

        if(!empty($categoryImage) && $categoryImage !== ''){
            $imageUrl = $this->_filesystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA)->getAbsolutePath('catalog/category/').$image;    
            }    
 ?>
    <li class="listing-item">
         <div class="product details product-item-details">
                <a href="<?php echo $categoryUrl; ?>">                                   
                    <img src="<?php echo $imageUrl; ?>"/>
                    <div class="listing-category-info">
                        <span class="category-name"><?php echo $categoryName; ?></span>
                    </div>
                </a>
            </div>
   </li> 
<?php } //endforeach ?>
</ul>
<?php } //main if end here ?>

Clear cache.

 

Now check your main category.

 

if issue solved, Click kudos/accept as solutions.

 

If Issue Solved, Click Kudos/Accept As solutions.

Re: getting sub category list with images 2.1

Totally new to this can you tell me where each file goes please thanks