3

I need to change some logic formAddressDataToQuoteAddress() from vendor\magento\module-checkout\view\frontend\web\js\model\address-converter.js

I have referred the Magento docs and written this code and i am getting this error

TypeError: target.extend is not a function

app\code\Module\Checkout\view\frontend\requirejs-config.js

   var config = {
          config: {
              mixins: {
                  'Magento_Checkout/js/model/address-converter': {
                      'Perficient_Checkout/js/model/address-converter': true
                  }
              }
         } };

app\code\Module\Checkout\view\frontend\web\js\model\address-converter.js

define(function () {
    'use strict';

    var mixin = {
        formAddressDataToQuoteAddress: function (addressData) {
            return addressData;
        }
    };
    return function (target) {
        return target.extend(mixin);
    };
});

Can any one share some suggestion.

Thanks in advance.

2 Answers 2

14

You should use a wrapper for extending this plugin.

Documentation: https://developer.adobe.com/commerce/frontend-core/javascript/mixins#extend-js-object

Related question: https://magento.stackexchange.com/a/158072/53205

Magento example: https://github.com/magento/magento2/blob/821bcacdae33068457359f37d600af9cb654f763/app/code/Magento/SalesRule/view/frontend/web/js/model/shipping-save-processor-mixin.js#L13

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

    return function (stepNavigator) {
        stepNavigator.setHash = wrapper.wrapSuper(stepNavigator.setHash, function (hash) {
            this._super(hash);
            // add extended functionality here or modify method logic altogether
        });

        return stepNavigator;
    };
});

Older Magento 2 versions

Alan Storm has a good guide: http://alanstorm.com/the-curious-case-of-magento-2-mixins/ Magento example: https://github.com/magento/magento2/blob/2.1/app/code/Magento/CheckoutAgreements/view/frontend/web/js/model/place-order-mixin.js

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

    return function (target) {
 
        var formAddressDataToQuoteAddress = wrapper.wrap(target.formAddressDataToQuoteAddress, function(super, formData){
            return super(formData);
        });

        target.formAddressDataToQuoteAddress = formAddressDataToQuoteAddress;

        return target;
    };
});
6
  • This solution works nicely! Good job Aug 8, 2018 at 13:47
  • Have you an idea about how to override _calcProductPrice function in custom scripts.js file (using mixins)? Nov 1, 2018 at 7:22
  • Just create a mixin as described above. Instead of returning anything, overwrite the _calcProductPrice from the AdminOrder object. I guess that should do the trick. Do you have a stackoverflow item about this?
    – Quisse
    Nov 1, 2018 at 14:00
  • @Quisse I'm getting this error "superclass constructor invocation should be in constructor body", near "super" keyword in my Phpstorm editor. And getting this error in console: "Uncaught SyntaxError: Unexpected token super". Can you please help me what should I do? Jul 3, 2019 at 11:06
  • @Quisse As I read Alan Storm's article, I resolved my issue by replacing "super" keyword with my original function name, which I want to override. Thanks for the answer and guideline. Jul 3, 2019 at 11:36
5

Just for the reference for some other people: Quisse is right. Problem with using extend with model/address-converter.js is that this file return an object. If it would return an UI component than code from the question would work because UI components have possibility to use extend method.

Your Answer

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

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