Magento 2 : add custom message on checkout page on shipping address change

Question

I want to show custom message under shipping method section.

when address changes message also change/remove.

for example: When custom select Columbia addess I want to show custom notice/message

again when select india address message will be removed.

Can Any one please guide me which js and html I Need to work.

Note:: You can guide on vendor files changes I will manage override.

Answer 1

The template you are looking for:

vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

The file with JS you are looking for:

vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js

Take a look at getCountryName(address().countryId) in the template. I guess you can use this to determine which country is set for selected address by customer.

Hope this helps!

Answer 2

You can initialize component from checkout_index_index.xml or script from calling in the phtml

<script type="text/x-magento-init">
        {
            "*": {
                "VL_Checkout/js/customComponent": {
                    "ajaxUrl" : "<?= $block->getAjaxUrl(); ?>"
                }
            }
        }
</script>

you can now create a customComponent.js as below

define(
    [
        'jquery',
        'ko',
        'uiComponent',
        'Magento_Checkout/js/checkout-data',
        'Magento_Checkout/js/model/quote',
        'Magento_Ui/js/model/messageList'
    ],
    function($, ko, Component, checkoutData ,quote , messageList) {
        'use strict';

        return Component.extend({
            initialize: function() {
                this._super();
                self = this;
                quote.shippingAddress.subscribe(function (value) {
                    // add you logic and compair the address.
                    if(value.postcode){
                        if(value.postcode){
                            messageList.addErrorMessage({ message: "you custom Message" });
                        }
                    }
                },this);
            },
        });
    }
);

Now you can subscribe to the address changes and add your own code there for providing user message you can use the messageList and provide your message.