1

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.

0

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

app/code/StackExchange/Postcode/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="StackExchange_Postcode" setup_version="0.1.0">
    </module>
</config>

app/code/StackExchange/Postcode/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'StackExchange_Postcode',
    __DIR__
);

2. Include javascript using checkout_index_index.xml

app/code/StackExchange/Postcode/view/frontend/layout/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">
    <body>
        <referenceContainer name="content">
            <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="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>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>

3. Create the javascript file with your code for fetching

app/code/StackExchange/Postcode/view/frontend/web/js/postcode-listener.js

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

        return Component.extend({
            initialize: function () {
                this._super();

                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!

| improve this answer | |
New contributor
Kristoffer is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • ** 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. – Ankush Deora Oct 18 at 5:37

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.