Dynamically hide component upon selecting a country in checkout

magento.stackexchange https://magento.stackexchange.com/questions/329750

Question

When selecting a specific country (let's assume The Netherlands) in the Magento 2 checkout as a shipping country, I want to hide a custom component. I've added this component by creating a LayoutProcessorPlugin. So I'd like to add some JavaScript to handle the visibility of this custom field when The Netherlands are selected in the Country dropdown provided by the Shipping Address component.

How would one achieve this?

P.S.: I haven't added any templates or mixins for this custom field.

LayoutProcessorPlugin.php:

class LayoutProcessorPlugin {

    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $subject, array  $jsLayout) {

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/input',
                'options' => [],
                'id' => 'my-custom-field',
                'tooltip' => [
                    'description' => __('My Custom Tooltip'),
                ],
            ],
            'dataScope' => 'shippingAddress.custom_field',
            'label' => 'Lorem ipsum dolor sit amet',
            'placeholder' => 'Lorem ipsum dolor sit amet',
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 120,
            'id' => 'custom_field'
        ];

        return $jsLayout;
    }
}

TLDR; When selecting The Netherlands as my shipping country the custom field should automatically disappear.

Edit 1

I've tried the suggested implementation of Aaron Allen by doing the following:

checkout_index_index.xml 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="country_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">1</item>
                                                                    <item name="component" xsi:type="string">Company_MyModule/js/country-component</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

web/js/country-component.js

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

    return Component.extend({
        defaults: {
            imports: {
                update: 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.country_id:value'
            }
        },

        update: function (value) {
            // this.visible(value !== 'NL');
            alert(value);
        }
    });
});

Which results in the following errors upon loading the checkout (it doesn't load after the errors have been displayed).Error after adding suggested fix

Was it helpful?

Solution

Create a custom component by extending Magento_Ui/js/form/element/abstract. Vendor_Module/view/frontend/web/js/custom-component.js:

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

    return Component.extend({
        defaults: {
            imports: {
                update: 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.country_id:value'
            }
        },

        update: function (value) {
            this.visible(value !== 'NL');
        }
    });
});

This will result in the update function executing every time the value of the selected country changes. The new value is passed as a parameter.

Now use this component in your js layout instead of abstract:

'component' => 'Vendor_Module/js/custom-component'

OTHER TIPS

Create js component

define([
    'Magento_Ui/js/form/element/select',
    'mage/translate'
], function (AbstractField, $t) {
    'use strict';

    return AbstractField.extend({
        defaults: {
            imports: {
                update: 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.country_id:value'
            },
            modules: {
                vat_id: '${ $.parentName }.vat_id'
            }
        },

        /**
         * Initializes UISelect component.
         *
         * @returns {UISelect} Chainable.
         */
        initialize: function () {
            this._super();
            this.vat_id().visible(false);
            return this;
        },
        update: function (value) {
            if(value == 'GB'){
                this.vat_id().visible(true);
            }else{
                this.vat_id().visible(false);

            }
        }
        
        
            
         
      
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top