2

I have created a custom input field attribute which will show up once a specific custom Shipping method is selected.
I have it working already. And now I want the data from the custom input field to be passed on the Summary Order in the sidebar together(below) with the selected custom Shipping Method.

I have a look into these Reference 1 and Reference but what I want is to pass the custom input field data just below the selected custom Shipping Method.

Note: Data of the custom input field has been saved to the database already.

1
+50

app/code/SR/MagentoStackExchange/view/frontend/requirejs-config.js


var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/shipping': {
                'SR_MagentoStackExchange/js/mixin/shipping-mixin': true
            },
            'Magento_Checkout/js/view/shipping-information': {
                'SR_MagentoStackExchange/js/mixin/shipping-information-mixin': true
            }
        }
    }
};

app/code/SR/MagentoStackExchange/view/frontend/web/js/mixin/shipping-mixin.js

Here you need to add your custom message to shipping method object. So change shippingMethod.custom_text = 'Custom Message'; your way.


define([
    'jquery',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/select-shipping-method'
], function ($, quote, selectShippingMethodAction) {
    'use strict';

    return function (target) {
        return target.extend({

            /**
             * Set shipping information handler
             */
            setShippingInformation: function () {
                var shippingMethod = quote.shippingMethod();
                // add your custom message here
                shippingMethod.custom_text = 'Custom Message';
                selectShippingMethodAction(shippingMethod);
                this._super();
            }
        });
    }
});

app/code/SR/MagentoStackExchange/view/frontend/web/js/mixin/shipping-information-mixin.js


define([
    'Magento_Checkout/js/model/quote'
], function (quote) {
    'use strict';

    return function (target) {
        return target.extend({
            defaults: {
                template: 'SR_MagentoStackExchange/shipping-information'
            },
            getCustomText: function () {
                var shippingMethod = quote.shippingMethod();
                return shippingMethod ? shippingMethod['custom_text'] : '';
            }
        });
    }
});

app/code/SR/MagentoStackExchange/view/frontend/web/template/shipping-information.html


<!-- ko if: (isVisible()) -->
<div class="shipping-information">
    <div class="ship-to">
        <div class="shipping-information-title">
            <span data-bind="i18n: 'Ship To:'"></span>
            <button class="action action-edit" data-bind="click: back">
                <span data-bind="i18n: 'edit'"></span>
            </button>
        </div>
        <div class="shipping-information-content">
            <!-- ko foreach: getRegion('ship-to') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
    </div>
    <div class="ship-via">
        <div class="shipping-information-title">
            <span data-bind="i18n: 'Shipping Method:'"></span>
            <button class="action action-edit" data-bind="click: backToShippingMethod">
                <span data-bind="i18n: 'edit'"></span>
            </button>
        </div>
        <div class="shipping-information-content">
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </div>
        <div class="shipping-information-content">
            <span class="value" data-bind="text: getCustomText()"></span>
        </div>
    </div>
</div>
<!--/ko-->
  • shippingMethod.custom_text = 'Custom Message'; I want this to be dynamic, How will I do it? – fmsthird Jan 23 at 12:14
  • What is your input field name? – Sohel Rana Jan 23 at 13:19
  • Use $('[name="custom_field_name"]').val() – Sohel Rana Jan 23 at 13:22
  • got to check this one. – fmsthird Jan 24 at 3:34
  • I tested using 2.3. Can you upload your module somewhere for simple adjustment? – Sohel Rana Jan 24 at 3:37
0

You can use the extension attribute feature and store it to the quote table and can get the value of the attribute in the sidebar.

To know more about extension attribute use the below link

How to use extension_attributes in Magento2

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.