In this post you will learn about how to add colour picker, date picker, Image upload, Select and multi-select attribute in category add/edit form in Magento2.
Let's start by creating a custom module.
Find the Complete module on Github at Magelearn_CategoryAttribute
Create folder in
app/code/Magelearn/CategoryAttributeAdd registration.php file in it:
<?php
/**
* Copyright © All rights reserved.
* See COPYING.txt for license details.
*/
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Magelearn_CategoryAttribute',
__DIR__
);Add composer.json file in it:{
"name": "magelearn/module-CategoryAttribute",
"description": "Magento2 add colorpicker and datepicker attribute in category add/edit admin form",
"type": "magento2-module",
"license": "OSL-3.0",
"authors": [
{
"email": "vijaymrami@gmail.com",
"name": "vijay rami"
}
],
"minimum-stability": "dev",
"require": {},
"autoload": {
"files": [
"registration.php"
],
"psr-4": {
"Magelearn\\CategoryAttribute\\": ""
}
}
}Add etc/module.xml file in it:
<?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="Magelearn_CategoryAttribute" setup_version="1.0.0">
</module>
</config>Now we will Create InstallData script to add category colour picker and date time picker attribute.
Create a file at Magelearn/CategoryAttribute/Setup/InstallData.php
<?php
namespace Magelearn\CategoryAttribute\Setup;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Eav\Model\Entity\Attribute\Backend\Datetime;
use Magento\Eav\Model\Entity\Attribute\Frontend\Datetime as DatetimeFrontend;
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;
/**
* @var ModuleDataSetupInterface
*/
private $moduleDataSetup;
/**
* @var CategorySetupFactory
*/
private $categorySetupFactory;
/**
* Init.
*
* @param EavSetupFactory $eavSetupFactory
* @param ModuleDataSetupInterface $moduleDataSetup
* @param CategorySetupFactory $categorySetupFactory
*/
public function __construct(
EavSetupFactory $eavSetupFactory,
ModuleDataSetupInterface $moduleDataSetup,
\Magento\Catalog\Setup\CategorySetupFactory $categorySetupFactory
) {
$this->_eavSetupFactory = $eavSetupFactory;
$this->moduleDataSetup = $moduleDataSetup;
$this->categorySetupFactory = $categorySetupFactory;
}
/**
* {@inheritdoc}visible
*
* @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,
'listing_product_box_flag_font_color', [
'type' => 'text',
'label' => 'Listing Product Box Flag Font Color',
'input' => 'text',
'is_user_defined' => true,
'visible' => true,
'required' => false,
'sort_order' => 9,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
'group' => 'Cateory Attribute Management'
]
);
$setup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY,
'listing_product_box_flag_date', [
'type' => 'datetime',
'backend' => Datetime::class,
'frontend' => DatetimeFrontend::class,
'label' => 'Listing Product Box Flag Date',
'input' => 'date',
'required' => false,
'global' => ScopedAttributeInterface::SCOPE_STORE,
'is_user_defined' => true,
'sort_order' => 10,
'visible' => true,
'group' => 'Cateory Attribute Management',
]
);
$setup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY,
'listing_menu_icon', [
'type' => 'varchar',
'label' => 'Listing Menu Icon',
'input' => 'image',
'backend' => 'Magento\Catalog\Model\Category\Attribute\Backend\Image',
'visible' => true,
'required' => false,
'sort_order' => 11,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
'group' => 'Cateory Attribute Management'
]
);
$setup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY,
'category_menu_custom_filter', [
'type' => 'text',
'label' => 'Category Filter/label',
'input' => 'multiselect',
'source' => 'Magelearn\CategoryAttribute\Model\Category\Attribute\Source\Filter',
'backend' => 'Magelearn\CategoryAttribute\Model\Category\Attribute\Backend\Filter',
'visible' => true,
'required' => false,
'sort_order' => 12,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
'group' => 'Cateory Attribute Management',
'is_used_in_grid' => true,
'is_visible_in_grid' => false,
'is_filterable_in_grid' => true,
'visible_on_front' => true,
'used_in_product_listing' => true
]
);
$setup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY,
'menu_top_block', [
'type' => 'text',
'label' => 'Top Block',
'input' => 'textarea',
'required' => false,
'sort_order' => 13,
'wysiwyg_enabled' => true,
'is_html_allowed_on_front' => true,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
'group' => 'Cateory Attribute Management'
]
);
$setup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY,
'category_menu_type', [
'type' => 'text',
'label' => 'Menu type',
'input' => 'select',
'source' => 'Magelearn\CategoryAttribute\Model\Category\Attribute\Source\Menu',
'visible' => true,
'required' => false,
'sort_order' => 14,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
'group' => 'Cateory Attribute Management',
'is_used_in_grid' => true,
'is_visible_in_grid' => false,
'is_filterable_in_grid' => true,
'visible_on_front' => true,
'used_in_product_listing' => true
]
);
}
}As per highlighted code above,
Add app/code/Magelearn/CategoryAttribute/Model/Category/Attribute/Source/Filter.php
<?php
namespace Magelearn\CategoryAttribute\Model\Category\Attribute\Source;
class Filter extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
{
/**
* {@inheritdoc}
*/
public function getAllOptions()
{
if ($this->_options === null) {
$this->_options = [
['label' => __('Label 1'), 'value' => 'Value 1'],
['label' => __('Label 2'), 'value' => 'Value 2'],
['label' => __('Label 3'), 'value' => 'Value 3'],
['label' => __('Label 4'), 'value' => 'Value 4'],
['label' => __('Label 5'), 'value' => 'Value 5'],
];
}
return $this->_options;
}
}Add app/code/Magelearn/CategoryAttribute/Model/Category/Attribute/Source/Menu.php
<?php
namespace Magelearn\CategoryAttribute\Model\Category\Attribute\Source;
class Menu extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
{
/**
* {@inheritdoc}
*/
public function getAllOptions()
{
if ($this->_options === null) {
$this->_options = [
['label' => __('Label 1 only'), 'value' => 'Value 1 only'],
['label' => __('Label 2 only'), 'value' => 'Value 2 only']
];
}
return $this->_options;
}
}Add app/code/Magelearn/CategoryAttribute/Model/Category/Attribute/Backend/Filter.php
<?php
namespace Magelearn\CategoryAttribute\Model\Category\Attribute\Backend;
class Filter extends \Magento\Eav\Model\Entity\Attribute\Backend\AbstractBackend
{
/**
* Core store config
*
* @var \Magento\Framework\App\Config\ScopeConfigInterface
*/
protected $_scopeConfig;
/**
* Construct
*
* @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
*/
public function __construct(\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig)
{
$this->_scopeConfig = $scopeConfig;
}
/**
* Validate process
*
* @param \Magento\Framework\DataObject $object
* @return bool
* @throws \Magento\Framework\Exception\LocalizedException
* @SuppressWarnings(PHPMD.CyclomaticComplexity)
* @SuppressWarnings(PHPMD.NPathComplexity)
*/
/**
* Before Attribute Save Process
*
* @param \Magento\Framework\DataObject $object
* @return $this
*/
public function beforeSave($object)
{
$attributeCode = $this->getAttribute()->getName();
if ($attributeCode == 'category_menu_custom_filter') {
$data = $object->getData($attributeCode);
if (!is_array($data)) {
$data = [];
}
$object->setData($attributeCode, implode(',', $data) ?: null);
}
if (!$object->hasData($attributeCode)) {
$object->setData($attributeCode, null);
}
return $this;
}
/**
* After Load Attribute Process
*
* @param \Magento\Framework\DataObject $object
* @return $this
*/
public function afterLoad($object)
{
$attributeCode = $this->getAttribute()->getName();
if ($attributeCode == 'category_menu_custom_filter') {
$data = $object->getData($attributeCode);
if ($data) {
if (!is_array($data)) {
$object->setData($attributeCode, explode(',', $data));
} else {
$object->setData($attributeCode, $data);
}
}
}
return $this;
}
}Now to display this colour picker and date time picker attribute in Category edit form,
Add file at Magelearn/CategoryAttribute/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="cateory_attribute_management_fieldset">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Cateory Attribute Management</item>
<item name="collapsible" xsi:type="boolean">true</item>
<item name="sortOrder" xsi:type="number">20</item>
</item>
</argument>
<field name="listing_product_box_flag_font_color" sortOrder="40"
formElement="colorPicker">
<settings>
<label translate="true">Listing Product Box Flag Font Color</label>
<componentType>colorPicker</componentType>
<dataScope>listing_product_box_flag_font_color</dataScope>
<dataType>text</dataType>
<notice>Default white</notice>
</settings>
<formElements>
<colorPicker>
<settings>
<colorPickerMode>full</colorPickerMode>
<colorFormat>hex</colorFormat>
</settings>
</colorPicker>
</formElements>
</field>
<field name="listing_product_box_flag_date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Listing Product
Box Flag Date From</item>
<item name="additionalClasses" xsi:type="string">admin__field-date
</item>
<item name="sortOrder" xsi:type="number">50</item>
<item name="dataType" xsi:type="string">string</item>
<item name="formElement" xsi:type="string">date</item>
<item name="options" xsi:type="array">
<item name="dateFormat" xsi:type="string">MM/dd/YYYY</item>
<item name="timeFormat" xsi:type="string">HH:mm:ss</item>
<item name="showsTime" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="listing_menu_icon" sortOrder="150" formElement="imageUploader">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">category</item>
</item>
</argument>
<settings>
<elementTmpl>ui/form/element/uploader/image</elementTmpl>
<dataType>string</dataType>
<label translate="true">Mega Menu Icon</label>
<visible>true</visible>
<required>false</required>
</settings>
<formElements>
<imageUploader>
<settings>
<required>false</required>
<uploaderConfig>
<param xsi:type="url" name="url" path="catalog/category_image/upload"/>
</uploaderConfig>
<previewTmpl>Magento_Catalog/image-preview</previewTmpl>
<openDialogTitle>Media Gallery</openDialogTitle>
<initialMediaGalleryOpenSubpath>catalog/category</initialMediaGalleryOpenSubpath>
<allowedExtensions>jpg jpeg gif png</allowedExtensions>
<maxFileSize>4194304</maxFileSize>
</settings>
</imageUploader>
</formElements>
</field>
<field name="category_menu_custom_filter">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Magelearn\CategoryAttribute\Model\Category\Attribute\Source\Filter</item>
<item name="config" xsi:type="array">
<item name="sortOrder" xsi:type="number">160</item>
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Category Filter/label</item>
<item name="formElement" xsi:type="string">multiselect</item>
<item name="source" xsi:type="string">category_menu_custom_filter</item>
<item name="dataScope" xsi:type="string">category_menu_custom_filter</item>
</item>
</argument>
</field>
<field name="menu_top_block" template="ui/form/field" sortOrder="170" formElement="wysiwyg">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="wysiwygConfigData" xsi:type="array">
<item name="height" xsi:type="string">100px</item>
<item name="add_variables" xsi:type="boolean">false</item>
<item name="add_widgets" xsi:type="boolean">false</item>
<item name="add_images" xsi:type="boolean">true</item>
<item name="add_directives" xsi:type="boolean">true</item>
</item>
<item name="source" xsi:type="string">category</item>
</item>
</argument>
<settings>
<label translate="true">Top Block</label>
<dataScope>menu_top_block</dataScope>
</settings>
<formElements>
<wysiwyg class="Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg">
<settings>
<rows>8</rows>
<wysiwyg>true</wysiwyg>
</settings>
</wysiwyg>
</formElements>
</field>
<field name="category_menu_type">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Magelearn\CategoryAttribute\Model\Category\Attribute\Source\Menu</item>
<item name="config" xsi:type="array">
<item name="sortOrder" xsi:type="number">180</item>
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Menu type</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">category_menu_type</item>
<item name="dataScope" xsi:type="string">category_menu_type</item>
</item>
</argument>
</field>
</fieldset>
</form>To display this date time picker attribute properly we will add file at Magelearn/CategoryAttribute/etc/adminhtml/di.xml
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Catalog\Controller\Adminhtml\Category\Save">
<arguments>
<argument name="dateFilter" xsi:type="object">Magento\Framework\Stdlib\DateTime\Filter\DateTime</argument>
</arguments>
</type>
<type name="Magento\Catalog\Controller\Adminhtml\Category">
<arguments>
<argument name="dateFilter" xsi:type="object">Magento\Framework\Stdlib\DateTime\Filter\DateTime</argument>
</arguments>
</type>
</config>Now those colour picker and date time picker attributes are now available in Category Add/edit form.
0 Comments On "Add colour picker date picker, Image upload, Select and multi-select attribute in category add/edit form Magento2"