Magento2 – Show Category with Images on Homepage

categorycustomhome-pagemagento2

I want to display all category list on home page.

Show categories details like categories name with categories page link, categories image and categories description.

Thanks.

Best Answer

Block :

<?php

      namespace <name_space>\<module_name>\Block;

      class Homepagecategories 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 isHomepage()
{

    if ($this->_request->getFullActionName() == 'cms_index_index') {
        return true;
    }
    return false;
}

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;

}

}

Controller : 

<?php

    namespace <name_space>\<module_name>\Controller\Index;

     class View extends \Magento\Framework\App\Action\Action
    {

/**
 * @var \Magento\Framework\View\Result\PageFactory
 */
protected $resultPageFactory;

/**
 * Request instance
 *
 * @var \Magento\Framework\Registry
 */
protected $_coreRegistry;

/**
 * @param \Magento\Framework\App\Action\Context $context
 * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
 */
public function __construct(
    \Magento\Framework\App\Action\Context $context,
    \Magento\Framework\Registry $coreRegistry,
    \Magento\Framework\View\Result\PageFactory $resultPageFactory
)
{

    $this->resultPageFactory = $resultPageFactory;

    $this->_coreRegistry = $coreRegistry;
    parent::__construct($context);
}

/**
 * Loads page content
 *
 * @return \Magento\Framework\View\Result\Page
 */
public function execute()
{
    $catId = (int)$this->getRequest()->getParam('id', false);
    $this->_coreRegistry->register('catid', $catId);

    $resultPage = $this->resultPageFactory->create();
    $resultPage->getConfig()->getTitle()->set(__('All Categories'));

    return $resultPage;
}

}

Frontend Layout : 

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="<name_space>\<module_name>\Block\Homepagecategories" name="categories_display" template="namespace_module_name::homepagecategories.phtml" />
    </referenceContainer>
</body>
   </page>

Template : (Here you have collection of all categories)

<?php  $isHome = $block->isHomepage(); ?>
<?php if ($isHome): ?>
<?php
       $catTitle = $block->getContent();
       $mainCats = $block->getMainCategories();
       $subcats = $block->getMainCategories();

And the main thing is, To override cms_index_index (add sequence in etc/module.xml):

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="module_name" setup_version="1.0.0">
    <sequence>
        <module name="Magento_Cms"/>
    </sequence> 
</module> 
</config>
Related Topic