Magento 2 add new custom option text field

Magento 2 add new custom option text field

To create custom field in custom options , you need to complete the following steps:

Step 1: Create the etc/adminhtml/di.xml file

Step 2: Create Tridhyatech/CustomOptions/Plugin/Catalog/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php file

Step 3: Create InstallSchema file

Step 4: Enable the module

1.) create di.xml file in Tridhyatech/CustomOptions/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="tridhyatech_custom_option" type="Tridhyatech\CustomOption\Plugin\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions" sortOrder="1"/>
   <‍/type>
<‍/config>

2.) create plugin Tridhyatech/CustomOption/Plugin/Catalog/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php

namespace Tridhyatech\CustomOption\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
        );
    }
}

3.) Create InstallSchema.php File

namespace Tridhyatech\CustomOption\Setup;

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

class InstallSchema implements InstallSchemaInterface
{
   public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
   {
       $setup->startSetup();

       $setup->getConnection()->addColumn(
           $setup->getTable('catalog_product_option'),
           'custom_text',
           [
               'type'     => Table::TYPE_TEXT,
               'nullable' => true,
               'default'  => null,
               'comment'  => 'CustomText',
           ]
       );
        $setup->endSetup();
    }
}

4.) Run below command :

php bin/magento s:up

php bin/magento s:s:d -f

php bin/magento c:f



Copyright © 2024 Tridhya Tech Limited, Inc. All rights reserved.