5

I would like to add custom text whenever shipping country is Sweden, Ive created Magento_Checkout module in my custom theme and added a phtml file

 <div class="free-shipping-info" data-bind="visible: showShippingCountryInfo()" style="display: none;">
    <div class="step-title" data-role="title" data-bind="i18n: 'Your country is sweden'"></div>
    <p class="desc" data-bind="i18n: 'sweden is a good place to live'"></p>
</div>

checkout_index_index.xml

<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="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="shipping-info-wrapper" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/country-component.js</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                    <item name="sortOrder" xsi:type="string">0</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>

For js

;define([
    'uiComponent',
    'ko',

], function (Component, ko) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/shipping-info'
        },

        initObservable: function () {
            var self = this._super();
            this.showShippingCountryInfo = ko.computed(function() {
                var method = country_id();

                if(method !== undefined) {
                    if(method === 'country_id_goes here') {
                        return true;
                    }
                }

                return false;

            }, this);

I would like to know if the js is correct.

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.