0

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.

1 Answer 1

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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