how to get main categories at home page?
-
05-05-2021 - |
Question
I want to display main categories on home page like below image,
for that I tried below code in phtml file, but it shows only category name, not display category image,
<?php
$categoryHelper = $this->helper('Magento\Catalog\Helper\Category');
$outputhelper = $this->helper('Magento\Catalog\Helper\Output');
foreach($categoryHelper->getStoreCategories() as $category):
?>
<li>
<?php
$_imgHtml = '';
if ($_imgUrl = $category->getImageUrl()) {
$_imgHtml = '<img src="' . $_imgUrl . '" />';
$_imgHtml = $outputhelper->categoryAttribute($category, $_imgHtml, 'image');
}
?>
<a href="<?php echo $categoryHelper->getCategoryUrl($category) ?>">
<?php echo $_imgHtml; ?><?php echo $category->getName() ?>
</a>
</li>
<?php endforeach; ?>
i have created one phtml file in
Magento_Catalog/templates/product/display_by_cat.phtml
folder
here is my new updated Code..but has also not shown the category image.
<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$categoryHelper = $this->helper('Magento\Catalog\Helper\Category');
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$cat = $categoryHelper->getStoreCategories()
?>
<ul class="sub-cat-ul">
<?php
foreach ($cat as $cats) {
$_category = $objectManager->create('Magento\Catalog\Model\Category')->load($cats->getId());
$_outputhelper = $this->helper('Magento\Catalog\Helper\Output');
$caturl = $cats->getUrl();
$_imgHtml = '';
if ($_imgUrl = $_category->getImageUrl()) {
$_imgHtml = '<img src="' . $_imgUrl . '" />';
$_imgHtml = $_outputhelper->categoryAttribute($_category, $_imgHtml, 'image');
}
?>
<li>
<?php
if ($_category->getImageUrl()) { ?>
<?php echo '<a class="info no-bg" href="'.$caturl.'" title="'.$cats->getName().'">' .$_imgHtml. '</a>' ?>
<?php } else { ?>
<?php echo '<a class="info" href="'.$caturl.'" title="'.$cats->getName().'">' .$_imgHtml. '</a>' ?>
<?php } ?>
<h4><a href="<?php echo $caturl ?>"><?php echo $cats->getName(); ?></a></h4>
</li>
<?php } ?>
</ul>
It is the Output.. and call this phtml file in cms block. please help me on this.
Solution
Please append the base media URL or base URL only to your code in $_imgUrl.
$_objectManager = \Magento\Framework\App\ObjectManager::getInstance(); //instance of\Magento\Framework\App\ObjectManager $storeManager = $_objectManager->get('Magento\Store\Model\StoreManagerInterface'); $currentStore = $storeManager->getStore();
$mediaUrl = $currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
Please see below link: Get Media Link
Your URL should be:
<img src="www.xyz.com/media/catalog/category/mh03-green_main_1.jpg"
OTHER TIPS
If you var_dump $category->getData()
you will see that the collection returned by the Magento\Catalog\Helper\Category
does not include the image data.
Use your own custom block for this template and create a category collection that includes all category attributes :
<?php
namespace Vendor\Module\Block;
use Magento\Framework\View\Element\Template\Context;
use Magento\Catalog\Model\CategoryFactory;
use Magento\Store\Model\StoreManagerInterface;
class Category extends \Magento\Framework\View\Element\Template
{
protected $_categoryFactory;
protected $_storeManager;
public function __construct(
Context $context,
StoreManagerInterface $storeManager,
CategoryFactory $categoryFactory,
array $data = []
)
{
$this->_categoryFactory = $categoryFactory;
$this->_storeManager = $storeManager;
parent::__construct($context, $data);
}
/**
* Get categories
* @param $categoryId Parent category id
* @param $getChildren get category children
* @return Magento\Catalog\Model\ResourceModel\Category\Collection
*/
public function getCategories($parentCategoryId=false,$getChildren=true)
{
if (!$parentCategoryId){$parentCategoryId = $this->_storeManager->getStore()->getRootCategoryId();}
$category = $this->_categoryFactory->create()->load($parentCategoryId);
$collection = $category->getCollection()
->addIsActiveFilter()
->addAttributeToSelect('*')
->addOrderField('name')
->addIdFilter($category->getChildren($getChildren));
return $collection;
}
}
?>
Now you can call the collection and get your image url data
<?php
$categories=$block->getCategories();
foreach($categories as $category):
?>
<ul>
<li>
<?php
$imgHtml = '';
if ($imgUrl = $category->getImageUrl()) {
$imgHtml = '<img src="' . $imgUrl . '" />';
}
?>
<a href="<?php echo $category->getUrl() ?>">
<?php echo $imgHtml; ?><?php echo $category->getName()?>
</a>
</li>
</ul>
<?php endforeach; ?>
finally, I get my answer to customize some code.
<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$storeManager = $objectManager->get('Magento\Store\Model\StoreManagerInterface');
$currentStore = $storeManager->getStore();
$baseUrl = $currentStore->getBaseUrl();
$categoryHelper = $this->helper('Magento\Catalog\Helper\Category');
$cat = $categoryHelper->getStoreCategories();
?>
<ul class="cat-ul">
<?php
foreach ($cat as $cats) {
$_category = $objectManager->create('Magento\Catalog\Model\Category')->load($cats->getId());
$_outputhelper = $this->helper('Magento\Catalog\Helper\Output');
$_imgHtml = '';
if ($_imgUrl = $_category->getImageUrl()) {
$_imgHtml = '<img src="' . $baseUrl . $_imgUrl . '" />';
$_imgHtml = $_outputhelper->categoryAttribute($_category, $_imgHtml, 'image');
}
?>
<li>
<?php
if ($_category->getImageUrl()) { ?>
<?php echo '<a class="info no-bg" href="'.$_category->getUrl().'" title="'.$cats->getName().'">' .$_imgHtml. '</a>' ?>
<?php } else { ?>
<?php echo '<a class="info" href="'.$_category->getUrl().'" title="'.$cats->getName().'">' .$_imgHtml. '</a>' ?>
<?php } ?>
<h4><a href="<?php echo $_category->getUrl() ?>"><?php echo $cats->getName(); ?></a></h4>
</li>
<?php } ?>
</ul>