Skip to content

Need to add new bundle option type and a text field

I want to add a new option named Group Bundle Radio in the Input type of the bundle product options and a new text field named Radio Title.

I have created both of the above mentioned in the admin panel. Now I want to display the Radio Title field only on the selection of the Group Bundle Radio option from the Input Type.

I have copied the same functionality from the core Magento file vendor/magento/module-bundle/view/adminhtml/web/js/components/bundle-user-defined-checkbox.js file.

I have to installations of Magento on my local machine. One is on Magento 2.3.5 and the second one is on Magento 2.4.5-p1.

The code is working fine on the 2.3.5 version but not on the 2.4.5.

Below are the screenshots and the code I have used to achieve this functionality.

Can you please check the code and let me know, why this is not working in the Magento 2.4.5-p1 version?

VENDOR/MODULE/view/adminhtml/web/js/components/bundle-radio-id-text.js

define([
'Magento_Ui/js/form/element/abstract'], function (Input) {
'use strict';

return Input.extend({
    defaults: {
        listens: {
            inputType: 'onInputTypeChange'
        },
    },

    /**
     * Handler for "inputType" property
     * @param {String} data
     */
    onInputTypeChange: function (data) {
        data === 'groupbundleradio' || data === 'groupbundledropdown' ?
            this.visible(true) :
            this.visible(false);
    },
});});

and code used to add the new field. VENDOR/MODULE/Ui/DataProvider/Product/Form/Modifier/BundlePanel.php

 $meta['bundle-items']['children']['bundle_options']['children']['record']['children']['product_bundle_container']['children']['option_info']['children']['radioid']['arguments']['data']['config'] = [
            'dataType' => FormElementDataTypeText::NAME,
            'formElement' => FormElementInput::NAME,
            'componentType' => FormField::NAME,
            'component' => 'VENDOR_MODULE/js/components/bundle-radio-id-text',
            'dataScope' => 'radioid',
            'label' =>  __('Radio Title'),
            'sortOrder' => 30,
            'visible' => true,
            'validation' => ['required-entry' => true],
            'imports' => [
                'inputType' => '${$.parentName}:inputType',
            ],
        ];

enter image description here