0

I need to show/hide a magento input field (so NOT a custom field) based on the selected country in the shipping address form. Shipping address form is in two places: the customer account address book and the checkout > new shipping address popup page. So. for instance, the company field needs to be hidden for all countries except US, while for US country not only the company field must be visible but it needs to be required as well.

On the customer account form, my code works. I created a mixin for the customer-address-validation and added my code there:

requirejs-config.js

var config = {
    config: {
        mixins: {
            addressValidation: {
                'Vendor_Module/js/view/customer-address-validation-mixin': true
            },
            'Magento_Customer/js/addressValidation': {
                'Vendor_Module/js/view/customer-address-validation-mixin': true
            }
        }
    }
};

customer-address-validation-mixin.js

[...]

if(countryId == countryCode) {
  this.companyInput.addClass('required-entry').attr('aria-required', true);
  this.companyContainer.addClass('required').show();
} else {
  this.companyInput.removeClass('required-entry').removeAttr('aria-required');
  this.companyContainer.removeClass('required').hide();
}

[...]

How can I apply the same code to the checkout shipping address form?

Improve this question

2 Answers 2

Reset to default
2

Call a new JS on Checkout shipping address form

File Path : Vendor/Module/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="my-custom-component" xsi:type="array">                                          
                            <item name="component" xsi:type="string">Vendor_Module/js/manageaddress</item>

                                </item>                                                          
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

JS File Path : Vendor/Module/view/frontend/web/js/manageaddress.js

define([
    'jquery',
    'mage/url'
], function ($,url) {
    'use strict';
    var waitForE1 = function(selector, callback) {
        if ($(selector).length) {
           callback();
       } else {
          setTimeout(function() {
            waitForE1(selector, callback);
          }, 1000);
       }
    };
    $(document).on('change',"[name='country_id']",function(){
        
        var id = $("select[name='country_id']").val();
        if(id == 'usa'){
            $("input[name='company']").prop('disabled', true);
        }
    });
});
Improve this answer
2
  • I tried your solution but it doesn't work. On the console I get an error "cannot load the component"
    – Lou Nik
    Commented Apr 8, 2022 at 9:51
  • My bad, I had a typo
    – Lou Nik
    Commented Apr 8, 2022 at 13:15
0

Thanks to Naeem that pointed me to the right direction I was able to find a solution. I'm posting it here in case someone needs it.

  • checkout_index_index.xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="my-custom-field" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Module/js/my-component</item>
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="required-entry" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
  • my-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'
            },
            modules: {
                myfield: '${ $.parentName }.my-custom-field'
            }
        },

        initialize: function () {
            this._super();
            return this;
        },
        update: function (value) {
            if(value == "US") this.myfield().enable().show();
            else this.myfield().disable().hide();
        }
        
    });
});
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.