Hello Folks, I am new in Magento 2, I am adding some custum code for changes on checkout page to auto populate the city and state while entered the pincode.

Can you help me which js file should I change to override the data.


There are many different ways to do this, here is one approach:

  1. Create your own module with the skeleton files
  2. Include your own javascript by appending to checkout_index_index.xml
  3. Listen to changes on the postcode fields and fetch your information when it changes.

Detailed steps:

1. Skeleton files


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    <module name="StackExchange_Postcode" setup_version="0.1.0">



2. Include javascript using checkout_index_index.xml


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="content">
            <referenceBlock name="checkout.root">
                    <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="before-shipping-method-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="delivery-option-form" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="displayArea" xsi:type="string">zip-code-listener</item>
                                                                        <item name="children" xsi:type="array">
                                                                            <item name="delivery-option" xsi:type="array">
                                                                                <item name="component" xsi:type="string">StackExchange_Postcode/js/postcode-listener</item>

3. Create the javascript file with your code for fetching


    ) {
        'use strict';

        return Component.extend({
            initialize: function () {

                var self = this;
                $(document).on('change', "[name='postcode']", function () {
                    var postcode = this.value;

                    // your code here
                    alert("The postcode has been changed to: " + postcode);
                    $("[name='city']").val("Some City");
                    // fetch city and region and set using javascript


Good luck!

  • ** Hello @Kristoffer, ** thanks for the code, but I want to do this using knockout js. Like observe the value and hit the ajax from knockout. Oct 18 '20 at 5:37
  • from above I able to render data but how to bind the data, it gives error while trying to submit.(city and sstat field is required) Oct 23 '20 at 2:58

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.