Magento 2 Product Customizable Options to add New Option Type

Question

I have requirement in Magento 2.2 to add custom option type, but facing errors on frontend and cart page..

Followed below links. Magento2 : How to add a new product custom option type? how to add a new customizable product option

Any suggestion to implemented this would be helpful.

Answer 1

Create 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">
    <preference for="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions" type="vendor\module\Ui\DataProvider\Product\Form\Modifier\CustomOptions" />
</config>

Overwrite etc/product_options.xml and add option type in this file, I added now <inputType name="custom_custom_option_type" label="Custom Type" />,

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/product_options.xsd">
    <option name="text" label="Text" renderer="Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\Options\Type\Text">
        <inputType name="field" label="Field" />
        <inputType name="area"  label="Area" />
    </option>
    <option name="file" label="File" renderer="Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\Options\Type\File">
        <inputType name="file" label="File" />
    </option>
    <option name="select" label="Select" renderer="Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\Options\Type\Select">
        <inputType name="drop_down" label="Drop-down" />
        <inputType name="radio"     label="Radio Buttons" />
        <inputType name="checkbox"  label="Checkbox" />
        <inputType name="multiple"  label="Multiple Select" />
        <inputType name="custom_custom_option_type"  label="Custom Type" />
    </option>
    <option name="date" label="Date" renderer="Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\Options\Type\Date">
        <inputType name="date"      label="Date" />
        <inputType name="date_time" label="Date &amp; Time" />
        <inputType name="time"      label="Time" />
    </option>
</config>

Please overwrite /vendor/magento/module-catalog/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php in your module. Update this function,

protected function getTypeFieldConfig($sortOrder)
{
    return [
        'arguments' => [
            'data' => [
                'config' => [
                    'label' => __('Option Type'),
                    'componentType' => Field::NAME,
                    'formElement' => Select::NAME,
                    'component' => 'Magento_Catalog/js/custom-options-type',
                    'elementTmpl' => 'ui/grid/filters/elements/ui-select',
                    'selectType' => 'optgroup',
                    'dataScope' => static::FIELD_TYPE_NAME,
                    'dataType' => Text::NAME,
                    'sortOrder' => $sortOrder,
                    'options' => $this->getProductOptionTypes(),
                    'disableLabel' => true,
                    'multiple' => false,
                    'selectedPlaceholders' => [
                        'defaultPlaceholder' => __('-- Please select --'),
                    ],
                    'validation' => [
                        'required-entry' => true,
                    ],
                    'groupsConfig' => [
                        'text' => [
                            'values' => ['field', 'area'],
                            'indexes' => [
                                static::CONTAINER_TYPE_STATIC_NAME,
                                static::FIELD_PRICE_NAME,
                                static::FIELD_PRICE_TYPE_NAME,
                                static::FIELD_SKU_NAME,
                                static::FIELD_MAX_CHARACTERS_NAME,
                            ],
                        ],
                        'file' => [
                            'values' => ['file'],
                            'indexes' => [
                                static::CONTAINER_TYPE_STATIC_NAME,
                                static::FIELD_PRICE_NAME,
                                static::FIELD_PRICE_TYPE_NAME,
                                static::FIELD_SKU_NAME,
                                static::FIELD_FILE_EXTENSION_NAME,
                                static::FIELD_IMAGE_SIZE_X_NAME,
                                static::FIELD_IMAGE_SIZE_Y_NAME,
                            ],
                        ],
                        'select' => [
                            'values' => ['drop_down', 'radio', 'checkbox', 'multiple', 'custom_custom_option_type'],
                            'indexes' => [
                                static::GRID_TYPE_SELECT_NAME,
                            ],
                        ],
                        'data' => [
                            'values' => ['date', 'date_time', 'time'],
                            'indexes' => [
                                static::CONTAINER_TYPE_STATIC_NAME,
                                static::FIELD_PRICE_NAME,
                                static::FIELD_PRICE_TYPE_NAME,
                                static::FIELD_SKU_NAME,
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ];
}

After complete this please execute php bin/magento cache:clean and now check your admin custom option type drop down.

I hope this will help you.