0

We want to add a radio select option in our Magento 2.3 store, that hides the company name and fax field.

We would like to add a radio option to select: personal or company purchase.

If the option company purchase is select, it should display the field company name and fax.

We have this option in our Magento 1.9.4 store, but that's quite easy to add in the .phtml file.

Because Magento 2.3 uses the .html file for the shipping address, we can not add this option. We also would like to add this option for the billing address.

How can we achieve this? Is there any template file to overwrite?

1

I came up with a start of a solution and from there you should see easily how you can complete your task. Please rate the answer if it helps you, if not do leave comments so that as a community we can learn.

I put my solution on a public repository. https://bitbucket.org/magstaging/company-field

The main components in this repo are: a frontend plugin:

<?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="layout_checkout_process" type="Mbs\CompanyField\Plugin\CheckoutLayoutProcess" />
    </type>
</config>

use Magento\Checkout\Block\Checkout\LayoutProcessor;

class CheckoutLayoutProcess
{
    public function afterProcess(LayoutProcessor $subject, $jsLayout) {
        $customAttributeCode = 'purchase_type';
        $customField = [
            'component' => 'Mbs_CompanyField/js/form/element/purchaseType',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/select',
                'id' => 'drop-down',
            ],
            'dataScope' => 'shippingAddress.custom_attributes.purchase_type',
            'label' => 'Purchase Type',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => ['required-entry' => true],
            'sortOrder' => 50,
            'id' => 'drop-down',
            'options' => [
                [
                    'value' => 'personal',
                    'label' => 'Personal',
                ],
                [
                    'value' => 'business',
                    'label' => 'Business',
                ]
            ]
        ];

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$customAttributeCode] = $customField;

        return $jsLayout;
    }
}

and this will ensure the field is added to the checkout. In my repo, I did add the field only for shipping and you will need your implementation to replicate this snippet for billing.

and then below is the code for the js model that likely will be what helps you most:

    define([
    'Magento_Ui/js/form/element/select',
    'uiRegistry'
], function (Select, registry) {
    'use strict';

    return Select.extend({
        defaults: {
            skipValidation: false
        },

        initialize: function () {
            this._super();

            this.toggleCompanyField()
        },

        onUpdate: function () {
            this._super();

            this.toggleCompanyField()
        },

        toggleCompanyField: function () {
            registry.get('checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.company', function(field){
                if (field.visible()) {
                    field.hide()
                } else {
                    field.show()
                }
            });
        }
    })
});

also Magento builds a whole set of html around the select in the event you need to customise the select rendering.. see screenshot:enter image description here

  • Many thanks! Works perfect. I only have one questions left. How can we change it from a dropdown in to radio buttons? – Henk Z Feb 28 at 19:18
  • great to see it helped, I'd asked a separate question to the community to know how to transform a select ui component into a radio. If you mention my name, I'd love to take a look but I am quite tight with time at this moment.. – Herve Tribouilloy Mar 1 at 12:52
  • Thanks! I will create a new question for this. Do you have a easy and fast change to place the hidden company field in a own custom div. So that we can customize the div that is been hidden? – Henk Z Mar 3 at 16:24
  • yes, you can add jquery as a dependency and then modify the DOM at will – Herve Tribouilloy Mar 3 at 16:41
  • Thanks! I am not quite getting it. Can you maybe edit your code, to add this div? – Henk Z Mar 3 at 16:45

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.