Magento 2 – Add New Custom Option Text Field

magento2

I would like to add new custom option text field like 'New Text Field Title' in the magento 2.x 'Customizable Options' section could you please suggest me and guide me how to add please refer my screenshot.
enter image description here

Best Answer

Create a plugin for that. Try following way:

SR/StackExchange/etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions">
        <plugin name="sr_stackexchange_custom_option" type="SR\StackExchange\Plugin\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions" sortOrder="1"/>
    </type>
</config>

SR/StackExchange/Plugin/Catalog/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php

namespace SR\StackExchange\Plugin\Catalog\Ui\DataProvider\Product\Form\Modifier;


class CustomOptions
{

    public function afterModifyMeta(
        \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions $subject,
        $meta
    ) {
        $meta['custom_options']['children']['options']['children']['record']['children']['container_option']['children']['container_common']['children']['custom_text'] =
        $this->getTitleFieldConfig(
            200,
            [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'label' => __('Custom Text'),
                            'component' => 'Magento_Catalog/component/static-type-input',
                            'valueUpdate' => 'input',
                            'imports' => [
                                'optionId' => '${ $.provider }:${ $.parentScope }.option_id'
                            ]
                        ],
                    ],
                ],
            ]
        );
        return $meta;
    }

    /**
     * Get config for "Title" fields
     *
     * @param int $sortOrder
     * @param array $options
     * @return array
     */
    protected function getTitleFieldConfig($sortOrder, array $options = [])
    {
        return array_replace_recursive(
            [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'label' => __('Custom Text'),
                            'componentType' => \Magento\Ui\Component\Form\Field::NAME,
                            'formElement' => \Magento\Ui\Component\Form\Element\Input::NAME,
                            'dataScope' => 'custom_text',
                            'dataType' => \Magento\Ui\Component\Form\Element\DataType\Text::NAME,
                            'sortOrder' => $sortOrder,
                            'validation' => [
                                'required-entry' => false
                            ],
                        ],
                    ],
                ],
            ],
            $options
        );
    }
}

Clear Magento cache.

NB: This solution only for M2.1.x. and greater.

[Update]

How to save?

-> create a column 'catalog_product_option' table same as field name. e.g: custom_text

-> clear cache.

Related Topic