I'd like to display some multiple select custom product attributes, in a more advanced way, just like category_id field does. (Using checkboxes, displaying selected values like tags with X option on each one)
How can I do that?
I have worked on your problem and created a custom extension please use this code as per requirement and let me know if anything is not understood.
app/code/Rohit/ProductAttribute/registration.php
<?php use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Rohit_ProductAttribute', __DIR__); app/code/Rohit/ProductAttribute/etc/module.xml
<?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="Rohit_ProductAttribute"> <sequence> <module name="Magento_Catalog"/> </sequence> </module> </config> app/code/Rohit/ProductAttribute/Model/Product/Attribute/Source/CustomMultiSelect.php
<?php declare(strict_types=1); namespace Rohit\ProductAttribute\Model\Product\Attribute\Source; class CustomMultiSelect extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource { public function getAllOptions() { $this->_options = [ ['value' => 'one', 'label' => __('One')], ['value' => ' two', 'label' => __('Two')], ['value' => 'three', 'label' => __('Three')], ['value' => ' four', 'label' => __('Four')], ['value' => ' five', 'label' => __('Five')] ]; return $this->_options; } } app/code/Rohit/ProductAttribute/Setup/Patch/Data/AddCustomMultiSelectProductAttribute.php
<?php declare(strict_types=1); namespace Rohit\ProductAttribute\Setup\Patch\Data; use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface; use Magento\Eav\Setup\EavSetup; use Magento\Eav\Setup\EavSetupFactory; use Magento\Framework\Setup\ModuleDataSetupInterface; use Magento\Framework\Setup\Patch\DataPatchInterface; use Magento\Framework\Setup\Patch\PatchRevertableInterface; class AddCustomMultiSelectProductAttribute implements DataPatchInterface, PatchRevertableInterface { private $moduleDataSetup; private $eavSetupFactory; public function __construct( ModuleDataSetupInterface $moduleDataSetup, EavSetupFactory $eavSetupFactory ) { $this->moduleDataSetup = $moduleDataSetup; $this->eavSetupFactory = $eavSetupFactory; } public function apply() { $this->moduleDataSetup->getConnection()->startSetup(); $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]); $eavSetup->addAttribute( \Magento\Catalog\Model\Product::ENTITY, 'custom_multi_select', [ 'type' => 'varchar', 'label' => 'Multi Select', 'input' => 'multiselect', 'source' => \Rohit\ProductAttribute\Model\Product\Attribute\Source\CustomMultiSelect::class, 'frontend' => '', 'required' => false, 'backend' => '', 'sort_order' => '30', 'global' => ScopedAttributeInterface::SCOPE_GLOBAL, 'default' => null, 'visible' => false, 'user_defined' => true, 'searchable' => false, 'filterable' => false, 'comparable' => false, 'visible_on_front' => true, 'unique' => false, 'apply_to' => '', 'group' => 'General', 'used_in_product_listing' => false, 'is_used_in_grid' => true, 'is_visible_in_grid' => false, 'is_filterable_in_grid' => false ] ); $this->moduleDataSetup->getConnection()->endSetup(); } public function revert() { $this->moduleDataSetup->getConnection()->startSetup(); /** @var EavSetup $eavSetup */ $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]); $eavSetup->removeAttribute(\Magento\Catalog\Model\Product::ENTITY, 'custom_multi_select'); $this->moduleDataSetup->getConnection()->endSetup(); } public function getAliases() { return []; } public static function getDependencies() { return [ ]; } } app/code/Rohit/ProductAttribute/view/adminhtml/ui_component/product_form.xml
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="product-details"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string"/> <item name="collapsible" xsi:type="boolean">false</item> </item> </argument> <field name="custom_multi_select"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="object">Rohit\ProductAttribute\Model\Product\Attribute\Source\CustomMultiSelect</item> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Multi Select</item> <item name="componentType" xsi:type="string">field</item> <item name="formElement" xsi:type="string">select</item> <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item> <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item> <item name="dataScope" xsi:type="string">custom_multi_select</item> <item name="filterOptions" xsi:type="boolean">true</item> <item name="showCheckbox" xsi:type="boolean">true</item> <item name="chipsEnabled" xsi:type="boolean">true</item> <item name="disableLabel" xsi:type="boolean">true</item> <item name="multiple" xsi:type="boolean">true</item> <item name="sortOrder" xsi:type="number">30</item> <item name="listens" xsi:type="array"> <item name="newOption" xsi:type="string">toggleOptionSelected</item> </item> <item name="required" xsi:type="boolean">false</item> <item name="source" xsi:type="string">conditions</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">false</item> </item> </item> </argument> </field> </fieldset> Please check my code and let me know if you have any questions.
if my answer was useful to you so please accept my answer and give an upvote.