In this article, I am going to explaining how we can add custom image icons in the breadcrumb section on the list page and product detail page. Through this module, you can add custom category attributes for Breadcrumb Image upload and can save those images.
Create Module For Category Breadcrumb Image Upload
In order to get the brand icon on the list page and product details page breadcrumb section, you have to create a module that can create custom category attributes and upload the images or brand icon images in the breadcrumb section for the list page and detail page.
app/code/Wishusucess/CategoryBreadcrumbImage/registration.php
app/code/Wishusucess/CategoryBreadcrumbImage/etc/module.xml
app/code/Wishusucess/CategoryBreadcrumbImage/etc/di.xml
app/code/Wishusucess/CategoryBreadcrumbImage/etc/adminhtml/routes.xml
app/code/Wishusucess/CategoryBreadcrumbImage/Setup/InstallData.php
app/code/Wishusucess/CategoryBreadcrumbImage/Model/Category/DataProvider.php
app/code/Wishusucess/CategoryBreadcrumbImage/Controller/Adminhtml/Category/BreadcrumbImage/Upload.php
app/code/Wishusucess/CategoryBreadcrumbImage/view/adminhtml/ui_component/category_form.xml
Register Breadcrumb image Module
app/code/Wishusucess/CategoryBreadcrumbImage/registration.php
<?php /* * @Author Hemant Singh * @Developer Hemant Singh * @Module Wishusucess_CategoryBreadcrumbImage * @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/) */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Wishusucess_CategoryBreadcrumbImage', __DIR__ );
Give Basic information About Module
app/code/Wishusucess/CategoryBreadcrumbImage/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Wishusucess_CategoryBreadcrumbImage" setup_version="1.0.0"> </module> </config>
Create Dependency Injection File
This di.xml basically we use for ( rewrite ) preference of a particular class. So through this file, we can inform the Magento core class to replace with a new class or existing class arguments.
app/code/Wishusucess/CategoryBreadcrumbImage/etc/di.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Wishusucess\CategoryBreadcrumbImage\Controller\Adminhtml\Category\BreadcrumbImage\Upload"> <arguments> <argument name="imageUploader" xsi:type="object">CategoryImageUpload</argument> </arguments> </type> <virtualType name="CategoryImageUpload" type="Magento\Catalog\Model\ImageUploader"> <arguments> <argument name="baseTmpPath" xsi:type="string">catalog/category/tmp</argument> <argument name="basePath" xsi:type="string">catalog/category</argument> <argument name="allowedExtensions" xsi:type="array"> <item name="jpg" xsi:type="string">jpg</item> <item name="jpeg" xsi:type="string">jpeg</item> <item name="gif" xsi:type="string">gif</item> <item name="png" xsi:type="string">png</item> </argument> </arguments> </virtualType> <preference for="Magento\Catalog\Model\Category\DataProvider" type="Wishusucess\CategoryBreadcrumbImage\Model\Category\DataProvider" /> </config>
Define Routes ID
In Magento 2 Shopping applications routing basically we use to provide the data from a URL request to the appropriate class for processing. Magento 2 has some format to define the route ID like the below syntax.
<store-url>/<store-code>/<front-name>/<controller-name>/<action-name>
app/code/Wishusucess/CategoryBreadcrumbImage/etc/adminhtml/routes.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"> <router id="admin"> <route id="breadcrumbimage" frontName="breadcrumbimage"> <module name="Wishusucess_CategoryBreadcrumbImage" before="Magento_Backend" /> </route> </router> </config>
Create Custom Category Image Upload Attribute
Using this InstallSchame.php file we can create a custom category attribute to upload the brand image on the list page breadcrumb section and as well as product detail page breadcrumb section.
$setup->addAttribute( \Magento\Catalog\Model\Category::ENTITY, 'breadcrumb_image');
In the above code, we have decided on a custom category which is "breadcrumb_image" and we will use this identifier view/adminhtml/ui_component/category_form.xml to get the data from Magento admin.
app/code/Wishusucess/CategoryBreadcrumbImage/Setup/InstallData.php
<?php
/*
* @Author Hemant Singh
* @Developer Hemant Singh
* @Module Wishusucess_CategoryBreadcrumbImage
* @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/)
*/
namespace Wishusucess\CategoryBreadcrumbImage\Setup;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;
/**
* @codeCoverageIgnore
*/
class InstallData implements InstallDataInterface
{
/**
* EAV setup factory.
*
* @var EavSetupFactory
*/
private $_eavSetupFactory;
protected $categorySetupFactory;
/**
* Init.
*
* @param EavSetupFactory $eavSetupFactory
*/
public function __construct(EavSetupFactory $eavSetupFactory, \Magento\Catalog\Setup\CategorySetupFactory $categorySetupFactory)
{
$this->_eavSetupFactory = $eavSetupFactory;
$this->categorySetupFactory = $categorySetupFactory;
}
/**
* {@inheritdoc}
*
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
*/
public function install(
ModuleDataSetupInterface $setup,
ModuleContextInterface $context
) {
/** @var EavSetup $eavSetup */
$eavSetup = $this->_eavSetupFactory->create(['setup' => $setup]);
$setup = $this->categorySetupFactory->create(['setup' => $setup]);
$setup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY, 'breadcrumb_image', [
'type' => 'varchar',
'label' => 'Breadcrumb Image',
'input' => 'image',
'backend' => 'Magento\Catalog\Model\Category\Attribute\Backend\Image',
'required' => false,
'sort_order' => 9,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
'group' => 'General Information',
]
);
}
}
Create Model Class for Custom Upload Image Attribute in Magento 2
Here Model class we will use to process over the breadcrumb_image attribute and do data operations like create, read, update and delete, on a database.
app/code/Wishusucess/CategoryBreadcrumbImage/Model/Category/DataProvider.php
$fields = parent::getFieldsMap(); $fields['content'][] = 'breadcrumb_image'; // breadcrumb image field
In the above code we have mapped the breadcrumb_image attribute field.
<?php
/*
* @Author Hemant Singh
* @Developer Hemant Singh
* @Module Wishusucess_CategoryBreadcrumbImage
* @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/)
*/
namespace Wishusucess\CategoryBreadcrumbImage\Model\Category;
class DataProvider extends \Magento\Catalog\Model\Category\DataProvider
{
protected function getFieldsMap()
{
$fields = parent::getFieldsMap();
$fields['content'][] = 'breadcrumb_image'; // breadcrumb image field
return $fields;
}
}
Breadcrumb Image Upload Class in Magento 2
This controller class basically follow the actual operation on breadcrumb_image. This class has execute() method which contain action to do.
app/code/Wishusucess/CategoryBreadcrumbImage/Controller/Adminhtml/Category/BreadcrumbImage/Upload.php
<?php
/*
* @Author Hemant Singh
* @Developer Hemant Singh
* @Module Wishusucess_CategoryBreadcrumbImage
* @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/)
*/
namespace Wishusucess\CategoryBreadcrumbImage\Controller\Adminhtml\Category\BreadcrumbImage;
use Magento\Framework\Controller\ResultFactory;
/**
* Class Upload
*/
class Upload extends \Magento\Backend\App\Action
{
/**
* Image uploader
*
* @var \Magento\Catalog\Model\ImageUploader
*/
protected $imageUploader;
/**
* Uploader factory
*
* @var \Magento\MediaStorage\Model\File\UploaderFactory
*/
private $uploaderFactory;
/**
* Media directory object (writable).
*
* @var \Magento\Framework\Filesystem\Directory\WriteInterface
*/
protected $mediaDirectory;
/**
* Store manager
*
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;
/**
* Core file storage database
*
* @var \Magento\MediaStorage\Helper\File\Storage\Database
*/
protected $coreFileStorageDatabase;
/**
* @var \Psr\Log\LoggerInterface
*/
protected $logger;
/**
* Upload constructor.
*
* @param \Magento\Backend\App\Action\Context $context
* @param \Magento\Catalog\Model\ImageUploader $imageUploader
*/
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Magento\Catalog\Model\ImageUploader $imageUploader,
\Magento\MediaStorage\Model\File\UploaderFactory $uploaderFactory,
\Magento\Framework\Filesystem $filesystem,
\Magento\Store\Model\StoreManagerInterface $storeManager,
\Magento\MediaStorage\Helper\File\Storage\Database $coreFileStorageDatabase,
\Psr\Log\LoggerInterface $logger
) {
parent::__construct($context);
$this->imageUploader = $imageUploader;
$this->uploaderFactory = $uploaderFactory;
$this->mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);
$this->storeManager = $storeManager;
$this->coreFileStorageDatabase = $coreFileStorageDatabase;
$this->logger = $logger;
}
/**
* Check admin permissions for this controller
*
* @return boolean
*/
protected function _isAllowed()
{
return $this->_authorization->isAllowed('Wishusucess_CategoryBreadcrumbImag::category');
}
/**
* Upload file controller action
*
* @return \Magento\Framework\Controller\ResultInterface
*/
public function execute()
{
try {
$result = $this->imageUploader->saveFileToTmpDir('breadcrumb_image');
$result['cookie'] = [
'name' => $this->_getSession()->getName(),
'value' => $this->_getSession()->getSessionId(),
'lifetime' => $this->_getSession()->getCookieLifetime(),
'path' => $this->_getSession()->getCookiePath(),
'domain' => $this->_getSession()->getCookieDomain(),
];
} catch (\Exception $e) {
$result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
}
return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData([[$result]]);
}
}
Add field ID in Category Form For Breadcrumb Image
app/code/Wishusucess/CategoryBreadcrumbImage/view/adminhtml/ui_component/category_form.xml
<?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="cat-breadcrumb-image"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Breadcrumb Image</item> <item name="collapsible" xsi:type="boolean">true</item> <item name="sortOrder" xsi:type="number">100</item> </item> </argument> <field name="breadcrumb_image"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">string</item> <item name="source" xsi:type="string">category</item> <item name="label" xsi:type="string" translate="true">Breadcrumb Image</item> <item name="visible" xsi:type="boolean">true</item> <item name="formElement" xsi:type="string">fileUploader</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 name="required" xsi:type="boolean">false</item> <item name="sortOrder" xsi:type="number">40</item> <item name="uploaderConfig" xsi:type="array"> <item name="url" xsi:type="url" path="catalog/category_image/upload"/> </item> </item> </argument> </field> </fieldset> </form>
Now, Run Following Command:
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deplpy -f php bin/magento cache:clean
Download Link:
Category Breadcrumb Image Extension in Magento 2
Hire Magento 2 Expert Developer to Develop Your Store
Related Post:
Custom Shipping Text Filed: Show Custom Text Magento 2
Search AutoComplete: Magento 2 Module Add All Category for Search
Share Product on WhatsApp: With Products Image And URL in Magento 2
Recommended Post:
Magento 2.4 Installation Guide: How to Install Magento 2.4.2
Magento Store: Best 36 Magento Websites Example in The World
SEO Packages: How Much Do SEO Packages Cost in India, SEO Pricing