0

Resolved: Seems the error has been caused by the requirejs and my lobster hands :) I rewrite a default Component and trying to extend it inside own component which rewrites a default component: recursion.

Note: I know about this answer and it is good, but my question is about JS error when overwriting a renderer using my way.

I've created a map for standard Magento offline payment method renderer:

app/code/MageWorx/Checkout/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method':
                'MageWorx_Checkout/js/view/payment/method-renderer/purchaseorder-method'
        }
    }
};

and here the my component in where I want to change a regular (default) template of this payment method:

define([
    'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method',
    'jquery',
    'mage/validation'
], function (Component, $) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'MageWorx_Checkout/payment-method/renderer/purchaseorder-form'
        }
    });
});

Seems good, but... It does not work, because of error:

"TypeError: Cannot read property 'extend' of undefined at http://1001101010.com/pub/static/frontend/Magento/blank/en_US/MageWorx_Checkout/js/view/payment/method-renderer/purchaseorder-method.js:12:22 at Object.execCb (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:1650:33) at Object.context.execCb (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/mage/requirejs/resolver.js:145:31) at Module.check (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:861:55) at http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:616:33 at each (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:57:31) at breakCycle (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:605:17) at http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:618:29 at each (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:57:31) at breakCycle (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:605:17)"

But if I change my component next way (total copy with changed template) it start working without any error:

define([
    'Magento_Checkout/js/view/payment/default', //'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method',
    'jquery',
    'mage/validation' ], function (Component, $) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'MageWorx_Checkout/payment-method/renderer/purchaseorder-form',
            purchaseOrderNumber: ''
        },

        /** @inheritdoc */
        initObservable: function () {
            this._super()
                .observe('purchaseOrderNumber');

            return this;
        },

        /**
         * @return {Object}
         */
        getData: function () {
            return {
                method: this.item.method,
                'po_number': this.purchaseOrderNumber(),
                'additional_data': null
            };
        },

        /**
         * @return {jQuery}
         */
        validate: function () {
            var form = 'form[data-role=purchaseorder-form]';

            return $(form).validation() && $(form).validation('isValid');
        }
    });
});

Where is error?

  • Without digging in to the code I can't say for sure but my guess is purchaseorder-method.js does not return a component, it looks like it doesn't return anything which is why Component is undefined. If that is the case your second attempt works because purchaseorder-form.js does return a component. – Ben Crook Jan 17 at 13:29
  • @BenCrook Thank you for response, but as I see in the code, default module-offline-payments/view/frontend/web/js/view/payment/method-renderer/purchaseorder-method.js returns Component. Here is that file on github: github.com/magento/magento2/blob/2.3.3/app/code/Magento/… – Siarhey Uchukhlebau Jan 17 at 13:35
  • Seems the error has been caused by the requirejs and my lobster hands :) I rewrite default Component and trying to extend it inside a rewritten class: recursion. – Siarhey Uchukhlebau Jan 17 at 13:53
  • In that case my theory is definitely wrong. Haha now I'm picturing a lobster trying to type, I'm glad you sorted it! – Ben Crook Jan 17 at 13:54
0

Working code:

Create a mixin for the default payment method view:

app/code/MageWorx/Checkout/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method': {
                'MageWorx_Checkout/js/view/payment/method-renderer/purchaseorder-method-mixin': true
            }
        }
    }
};

app/code/MageWorx/Checkout/view/frontend/web/js/view/payment/method-renderer/purchaseorder-method-mixin.js

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

    return function (origComponent) {
        return origComponent.extend({
            defaults: {
                template: 'MageWorx_Checkout/payment-method/renderer/purchaseorder-form'
            }
        });
    };
});

And create a template with own content, based on the original template:

app/code/MageWorx/Checkout/view/frontend/web/template/payment-method/renderer/purchaseorder-form.html

| improve this answer | |

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.