1

I want to change the default prefix select box to a radio select box. Therefore I added the following module, but it is not changing the select to radio.

What am I missing here?

/app/code/VendorName/ModuleName/etc/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\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="sr_ModuleName_checkout_layout_processor" type="VendorName\ModuleName\Plugin\Block\LayoutProcessor" sortOrder="1"/>
    </type>
</config>

/app/code/VendorName/ModuleName/Plugin/Block/LayoutProcessor.php

<?php namespace VendorName\ModuleName\Plugin\Block;

class LayoutProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        if(isset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
            ['shippingAddress']['children']['shipping-address-fieldset'])) {

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['prefix']['component'] = "Magento_Ui/js/form/element/checkbox-set";

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['prefix']['config']['elementTmpl'] = "ui/form/element/checkbox-set";

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['prefix']['config']['multiple'] = false;
        }

        if(isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list'])) {
            $paymentsList = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list']['children'];

            foreach ($paymentsList as $paymentCode => $payment) {
                if(strpos($paymentCode, '-form') === false) {
                    continue;
                }
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentCode]['children']['form-fields']['children']['prefix']['component'] = "Magento_Ui/js/form/element/checkbox-set";
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentCode]['children']['form-fields']['children']['prefix']['config']['elementTmpl'] = "ui/form/element/checkbox-set";
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentCode]['children']['form-fields']['children']['prefix']['config']['multiple'] = false;
            }
        }
        if(isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form'])) {
            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['prefix']['component'] = "Magento_Ui/js/form/element/checkbox-set";

            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['prefix']['config']['elementTmpl'] = "ui/form/element/checkbox-set";

            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['prefix']['config']['multiple'] = false;
        }

        return $jsLayout;
    }
}
?>
1

Options are missing. Try the following code:

<?php
namespace SR\MagentoCommunity\Plugin\Block;

class LayoutProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        if(isset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
            ['shippingAddress']['children']['shipping-address-fieldset'])) {

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['prefix']['component'] = "Magento_Ui/js/form/element/checkbox-set";
            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['prefix']['options'] = $this->getOptions();

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['prefix']['config']['elementTmpl'] = "ui/form/element/checkbox-set";

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
            ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['prefix']['config']['multiple'] = false;
        }

        if(isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list'])) {
            $paymentsList = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['payments-list']['children'];

            foreach ($paymentsList as $paymentCode => $payment) {
                if(strpos($paymentCode, '-form') === false) {
                    continue;
                }
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentCode]['children']['form-fields']['children']['prefix']['component'] = "Magento_Ui/js/form/element/checkbox-set";
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentCode]['children']['form-fields']['children']['prefix']['options'] = $this->getOptions();
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentCode]['children']['form-fields']['children']['prefix']['config']['elementTmpl'] = "ui/form/element/checkbox-set";
                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentCode]['children']['form-fields']['children']['prefix']['config']['multiple'] = false;
            }
        }
        if(isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form'])) {
            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['prefix']['component'] = "Magento_Ui/js/form/element/checkbox-set";

            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['prefix']['options'] = $this->getOptions();

            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['prefix']['config']['elementTmpl'] = "ui/form/element/checkbox-set";

            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
            ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['prefix']['config']['multiple'] = false;
        }

        return $jsLayout;
    }

    private function getOptions()
    {
        return [
            [
                'value' => 'Mr.',
                'label' => 'Mr.'
            ],
            [
                'value' => 'Mrs.',
                'label' => 'Mrs.'
            ]
        ];
    }
}
  • Thanks! But still the same, the prefix is still displayed as a select box instead of the radio buttons. – Henk Z Mar 3 at 17:32
  • I have checked fresh installed m2.3. Working fine. Not sure your case. Check carefully if another plugin overwrite this or not. Here you assign radio button component so something wrong in your end – Sohel Rana Mar 3 at 17:38
  • That's quite strange. I also tried it on a fresh install of 2.3, but it still shows the prefix as a select box instead of radiobuttons. Am I missing something? – Henk Z Mar 3 at 18:39
  • Did you create new module for this? If not then create new module and add answer with your module – Sohel Rana Mar 3 at 18:39
  • Also debug, plugin called or not, for this add some debug log – Sohel Rana Mar 3 at 18:42

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.