0

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?

enter image description here

enter image description here

1 Answer 1

1

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>

enter image description here

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.

1
  • Thank you for your answer. Your solution works for a new attribute, but what about existing attributes? I'd like to edit an existing attribute, not to add a new one
    – zekia
    Apr 3 at 8:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.