1

This is the original js file vendor/magento/module-checkout/view/frontend/web/js/model/resource-url-manager.js, which I want to extend:

define([
    'Magento_Customer/js/model/customer',
    'Magento_Checkout/js/model/url-builder',
    'mageUtils'
], function (customer, urlBuilder, utils) {
        'use strict';

        return {
            /**
             * @param {Object} quote
             * @return {*}
             */
            getUrlForTotalsEstimationForNewAddress: function (quote) {
                var params = this.getCheckoutMethod() == 'guest' ? //eslint-disable-line eqeqeq
                        {
                            cartId: quote.getQuoteId()
                        } : {},
                    urls = {
                        'guest': '/guest-carts/:cartId/totals-information',
                        'customer': '/carts/mine/totals-information'
                    };

                return this.getUrl(urls, params);
            },
.....

This is the requirejs-config.js:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/model/resource-url-manager': {
                'Vendor_Module/js/model/resource-url-manager-mixin': true
            }
        }
    }
};

and this is the mixin file: resource-url-manager-mixin :

define([
    'jquery',
    'Component'
], function ($, Component) {
    'use strict';

    return Component.extend({
        getUrlForTotalsEstimationForNewAddress: function() {
             this._super();
        },
    });
});

But I am getting this js error: Uncaught Error: Script error for: Component.

I've also tried like this:

define([
    'jquery'
], function ($) {
    'use strict';

    var mixin = {
        getUrlForTotalsEstimationForNewAddress: function (quote) {
            this._super();
        }
    };
    return function (target) {
        return target.extend(mixin);
    };
});

But still getting a js error from target.

My goal is to rewrite this method: getUrlForTotalsEstimationForNewAddress. Any clue what am I doing wrong ?

Thanks

2 Answers 2

1

Not all mixins are created/used exactly the same, the differences coming from whether the original thing is a Component, Vanilla JS Function/Object, jQuery widget, etc:

Magento StackOverflow - How to create a mixin JS in Magento?

Magento DevDocs - Javascript Mixins > Extend JS Object

Extend Javascript Object Method

The key part here is to require the mage/utils/wrapper library. It contains a wrap function (and other similar functions) that lets you effectively create an around plugin on the original function.

Wrapper.wrap()

Wraps target function with a specified wrapper, which will receive reference to the original function as a first argument.

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
    'use strict';
    
    let mixin = function (originalFn, quote) {
        return originalFn(quote);
    };

    return function (target) {
        target.getUrlForTotalsEstimationForNewAddress = wrapper.wrap(target.getUrlForTotalsEstimationForNewAddress, mixin);

        return target;
    };
});

Wrapper.wrapSuper()

Wraps the incoming function to implement support of the '_super' method.

Note: I haven't used this but saw it in the mage/utils/wrapper source code and it's used in the Magento DevDocs example.

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
    'use strict';

    let mixin = function (quote) {
        return this._super(quote);
    };

    return function (target) {
        target.getUrlForTotalsEstimationForNewAddress = wrapper.wrapSuper(target.getUrlForTotalsEstimationForNewAddress, mixin);

        return target;
    };
});

Wrapper.extend()

Extends target object with provided extenders. If property in target and extender objects is a function, then it will be wrapped using 'wrap' method.

Note: I haven't used this but saw it in the mage/utils/wrapper source code.

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
    'use strict';

    let mixin = {
        getUrlForTotalsEstimationForNewAddress: function (originalFn, quote) {
            return originalFn(quote);
        }
    };

    return function (target) {
        return wrapper.extend(target, mixin);
    };
});
0

That's because 'Component' is not a correct alias, maybe you mean to use 'uiComponent'?

2
  • Thanks for your input. Well, I don't get any js errors, but neither my rewritten method is not triggered. I 've changed Component with uiComponent. Thanks Commented Jan 31, 2022 at 15:47
  • If you add a console log/breakpoint in resource-url-manager-mixin underneath 'use strict' is it called? If so it's probably because resource-url-manager.js only returns an object and not a UI Component
    – Ben Crook
    Commented Jan 31, 2022 at 16:11

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.