Magento 𝟮

Magento2 | PWA | GraphQL

» » » » Add colour picker date picker, Image upload, Select and multi-select attribute in category add/edit form Magento2

Add colour picker date picker, Image upload, Select and multi-select attribute in category add/edit form Magento2

By

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/CategoryAttribute

Add registration.php file in it:
?
1
2
3
4
5
6
7
8
9
10
11
12
<?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:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    "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:
?
1
2
3
4
5
<?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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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.


Related Post:

0 Comments On "Add colour picker date picker, Image upload, Select and multi-select attribute in category add/edit form Magento2"

Back To Top