Magento 2 javascript plugin after method is executed in wrong time

Question

Following this post answer I have used mixins of shipping.js file to change the result of validateShippingInformation method. My requirers-config.js file is:

var config = {
 config: {
 mixins: {
 'Magento_Checkout/js/view/shipping': {
 'Vendor_checkoutShipping/js/shipping-method-mixin': true
 }
 }
 }};

and shipping-method-mixin.js file:

define([
'jquery',
'mage/utils/wrapper',], function (,ドル wrapper) {
'use strict';
return function (shipping) {
 var newMethod = wrapper.wrap(shipping.validateShippingInformation, function (originalFunction) {
 var result = originalFunction();
 return after(result);
 });
 console.log(newMethod);
 shipping.validateShippingInformation = newMethod; 
 return shipping;
};});

Problem I have: The file is read by browser when page is loaded (identified by breakpoints) and right then executed. But the method in original file that i tray to extend by using after method is executed by button click in front-end (why is the file not running after the original method is executed). I do not need the script I added to run when the page is loading(reloaded) and I do not want to override the original javaScript file.

I need to change validateShippingInformation value before the method setShippingInformation if sentence is being executed. The if sentence in shipping.js file is:

if (this.validateShippingInformation()) {.(I need to allow or disallow this code to run based on my additional logic. How can i do it?).}

Answer 1

If you look at target file Magento/Checkout/view/frontend/web/js/view/shipping.js,you'll see that this is requirejs module which returns UiComponent (child of Magento_Ui/js/form/form).

In your example you have been used mage/utils/wrapper but this util applicable only for functions (like Magento/Checkout/view/frontend/web/js/action/create-billing-address.js).

For extending UiComponent you need to use base method extend:

var config = {
 config: {
 mixins: {
 'Magento_Checkout/js/view/shipping': {
 'Vendor_checkoutShipping/js/shipping-method-mixin': true
 }
 }
 }};

shipping-method-mixin.js

define([], function () {
 'use strict';
 return function (Component) {
 return Component.extend({
 validateShippingInformation: function () {
 var result = this._super();
 result = this._modifyResult(result);
 return result;
 }
 });
 }
});

• user3748173: Your answer was very helpful, but I thing that the answer would be more helpful to others and more complete if you replace this row return alert('validate') && this._super(); with a way to change the original method (after). I have had doubts to accept your answer because @David Verholen showed in his answer showed how can I do that
• Max: sure, i did it!

Answer 2

I'm not 100% sure, but I think mixins on ui components do not work as you are expecting it, since ui components return an ui component object which work slightly differtent, like further described here.

what you can do, is overriding the ui component (by creating the file in your theme like: app/design/Vendor/theme/Magento_Checkout/web/js/view/shipping.js) in your theme and extend it from the original ui component:

/*global define*/
define(['Magento_Checkout/js/view/shipping'], function (Component) {
 'use strict';
 return Component.extend({
 validateShippingInformation: function () {
 var originalResult = this._super();
 var newResult = this.doYourStuff(originalResult);
 return newResult;
 }
 });
 }
);

while you can of course add any object you need to the define function array

• Max: nope, mixins are applied for any requirejs modules, which return any value (component, function, object, text).
• David Verholen: I agree while basically you are doing exactly the same using another overriding mechanism