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!

1 Answer 1

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>
2
  • I will give that a try. I don't need to change anything in checkout_index_index.xml or my JS file?
    – stanhook
    Commented Mar 27, 2020 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
    Commented Mar 27, 2020 at 21:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.