Skip to content

Show Mutiple Images at the Mege Menu

Right now I am using this, and this is showing the one Image in the category mega menu I want to show multiple. I also tried some in the XML file, but multiple images are not uploading.

This is working fine with the one image I want multiple of Images.
I can also set the static multiple images for the categories at the mega menu.

This is my current code:

<?php
namespace VendorCustomMenuBlockHtml;

use MagentoFrameworkDataTreeNode;
use MagentoFrameworkDataObject;
use MagentoFrameworkViewElementTemplate;
use MagentoFrameworkDataTreeNodeFactory;
use MagentoFrameworkDataTreeFactory;

class Topmenu extends MagentoThemeBlockHtmlTopmenu
{
    protected $_categoryFactory;
    protected $_storeManager;

    public function __construct(
        TemplateContext $context,
        NodeFactory $nodeFactory,
        TreeFactory $treeFactory,
        MagentoCatalogModelResourceModelCategoryCollectionFactory $collecionFactory,
        MagentoStoreModelStoreManagerInterface $storeManager,
        array $data = []
    ) {
        parent::__construct($context, $nodeFactory, $treeFactory, $data);
        $this->_categoryFactory = $collecionFactory;
        $this->_storeManager = $storeManager;
    }

    protected function _getHtml(
        MagentoFrameworkDataTreeNode $menuTree,
                                          $childrenWrapClass,
                                          $limit,
        array $colBrakes = []
    ) {
        $html = '';

        $children = $menuTree->getChildren();
        $parentLevel = $menuTree->getLevel();
        $childLevel = $parentLevel === null ? 0 : $parentLevel + 1;

        $counter = 1;
        $itemPosition = 1;
        $childrenCount = $children->count();

        $parentPositionClass = $menuTree->getPositionClass();
        $itemPositionClassPrefix = $parentPositionClass ? $parentPositionClass . '-' : 'nav-';

        /** @var MagentoFrameworkDataTreeNode $child */
        foreach ($children as $child) {
            if ($childLevel === 0 && $child->getData('is_parent_active') === false) {
                continue;
            }
            $child->setLevel($childLevel);
            $child->setIsFirst($counter == 1);
            $child->setIsLast($counter == $childrenCount);
            $child->setPositionClass($itemPositionClassPrefix . $counter);

            $outermostClassCode = '';
            $outermostClass = $menuTree->getOutermostClass();

            if ($childLevel == 0 && $outermostClass) {
                $outermostClassCode = ' class="' . $outermostClass . '" ';
                $currentClass = $child->getClass();

                if (empty($currentClass)) {
                    $child->setClass($outermostClass);
                } else {
                    $child->setClass($currentClass . ' ' . $outermostClass);
                }
            }

            if (is_array($colBrakes) && count($colBrakes) && $colBrakes[$counter]['colbrake']) {
                $html .= '</ul></li><li class="column"><ul>';
            }

            $html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
            $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '>';
            $html .= '<span>' . $this->escapeHtml($child->getName()) . '</span>';
            $html .= $this->getCustomThumbnail($child); // Add thumbnail span inside the <a> tag
            $html .= '</a>';
            $html .= $this->_addSubMenu($child, $childLevel, $childrenWrapClass, $limit);
            $html .= '</li>';

//            $html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
//            $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '>';
//            $html .= '<span>' . $this->escapeHtml($child->getName()) . '</span>';
//            $html .= '</a>';
//            $html .= $this->getCustomThumbnail($child); // Move the thumbnail span outside of the text span
//            $html .= $this->_addSubMenu($child, $childLevel, $childrenWrapClass, $limit);
//            $html .= '</li>';

//            $html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
//            $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>' . $this->escapeHtml(
//                    $child->getName()
//                ) . $this->getCustomThumbnail($child) . '</span></a>' . $this->_addSubMenu(
//                    $child,
//                    $childLevel,
//                    $childrenWrapClass,
//                    $limit
//                ) . '</li>';
            $itemPosition++;
            $counter++;
        }

        if (is_array($colBrakes) && count($colBrakes) && $limit) {
            $html = '<li class="column"><ul>' . $html . '</ul></li>';
        }

        return $html;
    }

    public function getCustomThumbnail($childObj)
    {
        if (!($childObj->getIsCategory() && $childObj->getLevel() == 1)) {
            return false;
        }

        $store = $this->_storeManager->getStore();
        $mediaBaseUrl = $store->getBaseUrl(
            MagentoFrameworkUrlInterface::URL_TYPE_MEDIA
        );

        $catNodeArr = explode('-', $childObj->getId());
        $catId = end($catNodeArr);

        $collection = $this->_categoryFactory
            ->create()
            ->addAttributeToSelect('cat_thumbnail')
            ->addAttributeToFilter('entity_id',['eq'=>$catId])
            ->setPageSize(1);

        if ($collection->getSize() && $collection->getFirstItem()->getCatThumbnail()) {
            $catThumbnailUrl = $mediaBaseUrl
                . ltrim(MagentoCatalogModelCategoryFileInfo::ENTITY_MEDIA_PATH, '/')
                . '/'
                . $collection->getFirstItem()->getCatThumbnail();

            return '<span class="cat-thumbnail"><img src="'.$catThumbnailUrl.'"></span>';
        }
    }
}

Attribute

<

?php
namespace VendorCustomMenuSetup;

use MagentoFrameworkSetupInstallDataInterface;
use MagentoFrameworkSetupModuleContextInterface;
use MagentoFrameworkSetupModuleDataSetupInterface;
use MagentoEavSetupEavSetup;
use MagentoEavSetupEavSetupFactory;

class InstallData implements InstallDataInterface
{

    private $eavSetupFactory;

    /**
     * Constructor
     *
     * @param MagentoEavSetupEavSetupFactory $eavSetupFactory
     */
    public function __construct(EavSetupFactory $eavSetupFactory)
    {
        $this->eavSetupFactory = $eavSetupFactory;
    }

    /**
     * {@inheritdoc}
     */
    public function install(
        ModuleDataSetupInterface $setup,
        ModuleContextInterface $context
    ) {
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

        $eavSetup->addAttribute(
            MagentoCatalogModelCategory::ENTITY,
            'cat_thumbnail',
            [
                'type' => 'varchar',
                'label' => 'Thumbnail',
                'input' => 'image',
                'sort_order' => 333,
                'source' => '',
                'global' => 1,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => null,
                'group' => 'General Information',
                'backend' => 'MagentoCatalogModelCategoryAttributeBackendImage'
            ]
        );
    }
}

category_form.xml

<?xml version="1.0" ?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="cat_thumbnail">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                    <item name="sortOrder" xsi:type="number">333</item>
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="formElement" xsi:type="string">fileUploader</item>
                    <item name="label" translate="true" xsi:type="string">Thumbnail</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" path="catalog/category_image/upload" xsi:type="url"/>
                    </item>
                    <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                    <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>