Add Custom Field in Custom Option Value in Magento • Devhooks

Magento 2 Customizable Product Custom Options is a very easy way to gives many choices for detailed products, but in some cases, our client needs to add a few more fields in custom option values. So, In this article, we'll teach you how to add custom fields in custom option value.

Before we start I assume, you have already a created custom module. If you don't have it or don't know how to create it then check out our other article How To Create a Magento 2 Module.

Let's get started !!

To add custom field in custom option value for Magento 2 Please follow bellow simple steps.

1. Create registration.php file at Vendor/Module/registration.php and paste the below code.

saveCopyzoom_out_map<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

2. Create module.xml file at Vendor/Module/etc/module.xml and paste the below code.

saveCopyzoom_out_map<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="1.0.0">
		<sequence>
			<module name="Magento_Catalog"/>
		</sequence>
    </module>
</config>

Note: If you already have a module and implement this functionality in the existing module then don't forget to add Magento_Catalog in a sequence.

3. Create di.xml file at Vendor/Module/adminhtml/di.xml and paste the below code.

saveCopyzoom_out_map<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
	<virtualType name="Magento\CatalogStaging\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
		<arguments>
			<argument name="modifiers" xsi:type="array">
				<item name="new-modifier-all" xsi:type="array">
					<item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Product\Form\Modifier\All</item>
					<item name="sortOrder" xsi:type="number">71</item>
				</item>
			</argument>
		</arguments>
	</virtualType>
	<virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
		<arguments>
			<argument name="modifiers" xsi:type="array">
				<item name="new-modifier-all" xsi:type="array">
					<item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Product\Form\Modifier\All</item>
					<item name="sortOrder" xsi:type="number">71</item>
				</item>
			</argument>
		</arguments>
	</virtualType>
	<virtualType name="Vendor\Module\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
		<arguments>
			<argument name="modifiers" xsi:type="array">
			</argument>
		</arguments>
	</virtualType>
	<type name="Vendor\Module\Ui\DataProvider\Product\Form\Modifier\All">
		<arguments>
			<argument name="pool" xsi:type="object">Vendor\Module\Ui\DataProvider\Product\Form\Modifier\Pool</argument>
		</arguments>
	</type>
	<virtualType name="Vendor\Module\Ui\DataProvider\Product\Form\Modifier\Pool">
		<arguments>
			<argument name="modifiers" xsi:type="array">
				<item name="new-custom-option" xsi:type="array">
					<item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Product\Form\Modifier\CustomOptions</item>
					<item name="sortOrder" xsi:type="number">72</item>
				</item>
			</argument>
		</arguments>
	</virtualType>
</config>

4. Create All.php file at Vendor/Module/Ui/DataProvider/Product/Form/Modifier/All.php and paste the below code.

saveCopyzoom_out_map<?php

namespace Vendor\Module\Ui\DataProvider\Product\Form\Modifier;

use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Ui\DataProvider\Modifier\ModifierInterface;
use Magento\Ui\DataProvider\Modifier\PoolInterface;

class All extends AbstractModifier implements ModifierInterface
{
    protected $pool;
    protected $meta = [];

    public function __construct(
        PoolInterface $pool
    ) {
        $this->pool = $pool;
    }

    public function modifyData(array $data)
    {
        foreach ($this->pool->getModifiersInstances() as $modifier) {
            $data = $modifier->modifyData($data);
        }

        return $data;
    }

    public function modifyMeta(array $meta)
    {
        $this->meta = $meta;

        foreach ($this->pool->getModifiersInstances() as $modifier) {
            $this->meta = $modifier->modifyMeta($this->meta);
        }

        return $this->meta;
    }
}

5. Create CustomOptions.php file at Vendor/Module/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php and paste the below code.

saveCopyzoom_out_map<?php

namespace Vendor\Module\Ui\DataProvider\Product\Form\Modifier;

use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions as CustomOptionsModifier;
use Magento\Framework\UrlInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Form\Element\DataType\Text;
use Magento\Ui\Component\Form\Element\Select;
use Magento\Ui\Component\Form\Field;

class CustomOptions extends AbstractModifier
{
    protected $meta = [];

    public function __construct(
        UrlInterface $urlBuilder,
        LocatorInterface $locator,
        StoreManagerInterface $storeManager
    ) {
        $this->urlBuilder = $urlBuilder;
        $this->locator = $locator;
        $this->storeManager = $storeManager;
    }

    public function modifyData(array $data)
    {
        return $data;
    }

    public function modifyMeta(array $meta)
    {
        $this->meta = $meta;

        $this->addCustomOptionsFields();

        return $this->meta;
    }

    protected function addCustomOptionsFields()
    {
        $groupCustomOptionsName = CustomOptionsModifier::GROUP_CUSTOM_OPTIONS_NAME;
        $optionContainerName = CustomOptionsModifier::CONTAINER_OPTION;
        $commonOptionContainerName = CustomOptionsModifier::CONTAINER_COMMON_NAME;

        $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children']
        [$optionContainerName]['children']['values']['children']['record']['children'] = array_replace_recursive(
            $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children']
            [$optionContainerName]['children']['values']['children']['record']['children'],
            $this->getOptionsValueFields()
        );
    }

    protected function getOptionsValueFields()
    {
        $fields['new_value_field'] = $this->getSelectField(55);

        return $fields;
    }

    protected function getSelectField($sortOrder)
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'label' => __('New Value Field'),
                        'componentType' => Field::NAME,
                        'formElement' => Select::NAME,
                        'dataScope' => 'new_value_field',
                        'dataType' => Text::NAME,
                        'sortOrder' => $sortOrder,
                        'options' => [
                            ['value' => '0', 'label' => __('Option 1')],
                            ['value' => '1', 'label' => __('Option 2')],
                        ],
                    ],
                ],
            ],
        ];
    }
}

6. Create InstallSchema.php file at Vendor/Module/Setup/InstallSchema.php and paste the below code.

saveCopyzoom_out_map<?php

namespace Vendor\Module\Setup;

use Magento\Framework\DB\Ddl\Table;
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;

class InstallSchema implements InstallSchemaInterface
{
    public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
    {
        $installer = $setup;
        $installer->startSetup();
        $tableName = $setup->getTable('catalog_product_option_type_value');
        if ($setup->getConnection()->isTableExists($tableName) == true) {
            $columns = [
                'new_value_field' => [
                    'type' => Table::TYPE_TEXT,
                    'length' => 7,
                    'default' => '0',
                    'nullable' => false,
                    'comment' => 'New Value Field',
                ],
            ];
            $connection = $setup->getConnection();
            foreach ($columns as $name => $definition) {
                $connection->addColumn($tableName, $name, $definition);
            }
        }
        $installer->endSetup();
    }
}

If your magento is running in a production mode then change it to developer mode before install this module.

saveCopyzoom_out_mapphp bin/magento deploy:mode:set developer
php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:c

If you are a beginner and want to know more about Magento 2 Commands then check out our other article which is Useful Commands for Magento 2.

That’s it!

Now add new or edit any product from admin panel and check custom option value New Value Field is added in option value level.

If you are looking for a solution to Add Custom Field in Custom Option then please check our another article which is Magento 2 How to Add Custom Field in Custom Option

We also have a solution to Add Custom Input Type in Custom Option, please check How to Add Custom Input Type in Custom Option

I hope this Magento article helped you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other handy commands which are not included in the list.

P.S. Do share this note with your team.

Magento 2 - How to add Custom Fields in Custom Option Value