0

I have created a shipping option and wanted text to show if that option was selected. Right now it displays when the shipping method is selected but below all of the shipping options. I want it to display with the method (not below all of them) if that method is selected.

enter image description here

frontend/layout/checkout_index_index.xml

<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">My_Module/js/view/customjs</item>
                        <item name="provider" xsi:type="string">checkoutProvider</item>
                        <item name="sortOrder" xsi:type="string">0</item>
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>

js/view/customjs

define([
    'uiComponent',
    'ko',
    'Magento_Checkout/js/model/quote'

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

    return Component.extend({
        defaults: {
            template: 'Matt6_PickUp/shipping-address/shipping-method-item'
        },

        initObservable: function () {
            var self = this._super();
            this.showFreeShippingInfo = ko.computed(function() {
                var method = quote.shippingMethod();

                if(method && method['carrier_code'] !== undefined) {
                    if(method['carrier_code'] === 'freeshipping') {
                        return true;
                    }
                }

                return false;

            }, this);

            this.showPickUpShippingInfo = ko.computed(function() {
                var method = quote.shippingMethod();

                if(method && method['carrier_code'] !== undefined) {
                    if(method['carrier_code'] === 'instorepickup') {
                        return true;
                    }
                }

                return false;

            }, this);

            return this;
        }
    });
});

web/template/customtemp.html

<div class="free-shipping-info" data-bind="visible: showFreeShippingInfo()" style="display: none;">
<div class="step-title" data-role="title" data-bind="i18n: 'Free Shipping Information'"></div>
<p class="desc" data-bind="i18n: 'Free shipping can take up to 2 weeks.'"></p>

How can I show the info with the option when it is selected?

Thanks!

0

check vendor/magento/module-checkout/view/frontend/web/template/shipping-address/shipping-method-item.html

<tr class="row row-error"
    if="method.error_message">
    <td class="col col-error" colspan="4">
        <div role="alert" class="message error">
            <div text="method.error_message"></div>
        </div>
        <span class="no-display">
            <input type="radio"
                   attr="'value' : method.method_code, 'id': 's_method_' + method.method_code" />
        </span>
    </td>
</tr>

change your message like you add your custom message as

    <tr class="row" if="method.shipping_info">
         <td class="col" colspan="4">
            <!--your message here -->
         </td>
    </tr>
  • I will give that a try. I don't need to change anything in checkout_index_index.xml or my JS file? – stanhook Mar 27 '20 at 18:39
  • That by itself did not work. It just breaks. There must be more to do with checkout_index_index.xml and the JS file. – stanhook Mar 27 '20 at 21:13

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.