0

On checkout page on country selection i want to change postal zip code from text box to select list with options dynamically ( like region_id ).

For example, if zip code are available for certain country it should show select list with all zip codes, if certain country does not have zip code it should be replaced with text box.

I am trying to achieve this using code below :

requirejs-config.js

var config = {
config: {
    mixins: {
        'Magento_Checkout/js/view/shipping-address/list': {
            'Vendor_Module/js/action/postcode-mixin': true
        }
    }
}
};

postcode-mixin.js

define([
'jquery',
], function ($) {
'use strict';

return function (ListShipping) {
    return ListShipping.extend({
        defaults: {
            template: 'Magento_Checkout/shipping-address/list',
            rendererTemplates: [],
            isExtend: true,
            testVariable: 1
        },

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

                $(document).on('change',"[name='country_id']",function(){
                   var elField = $("[name='postcode']");

                    var countryPostCodes= '{"US":["123456","67890","11221"], "CA":["A01 B0","A11 T1"]}';
                    var codeList= JSON.parse(countryPostCodes);

                    var selectedCountry = $(this).val();
                    var zipcodes= codeList[$(this).val()];

                    if(codeList.hasOwnProperty(selectedCountry)) {
                        elField.replaceWith($('<select>').attr({
                            id: elField.attr('id'),
                            name: elField.attr('name'),
                            class: elField.attr('class')
                            }));
                        $(elField).empty();
                        if(zipcodes!= 'undefined' && zipcodes.length > 0 ) {
                            for(i=0; i < zipcodes.length; i++ ) {
                                $(elField).append("<option value="+zipcodes[i]+">"+zipcodes[i]+"</option>");
                            }
                        }


                });

        }
    });
}
});

Above code replaces the input field with select field but on submit it gives error validation error and form is not being submit.

I don't know if that needs to be done using knockout js and creating html template for drop down. ( if so please guide me how to do that )

Help will be highly appreciated.

  • You need to update the validations applied to zip code as in an EAV table you can find the list of validations applied. – Salma Saiyad Dec 18 '17 at 10:10
  • @Salma, This is not about validation solely, issue is changing field type on runtime ( like changing region_id field on country selection bases ) – Naveed Asim Dec 18 '17 at 10:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.