Dynamically hide component upon selecting a country in checkout

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

문제

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

도움이 되었습니까?

해결책

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'

다른 팁

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);

            }
        }
        
        
            
         
      
    });
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 magento.stackexchange
scroll top