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.
La 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"
Autres conseils
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>