0

In a custom module, I am trying to implement a mixin for the Magento_Payment/transparent jQuery widget. My module is installed correctly (other parts are working fine), but the mixin isn't loading.

My_Module/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            my_custom_product: 'My_Module/js/my_custom_product'
        }
    },
    config: {
        mixins: {
            'Magento_Payment/transparent': {
                'My_Module/js/checkout/payment/transparent-mixin': true
            }
        }
    }
};

When I get to the frontend checkout payment screen, I see that Magento_Payment/transparent is loading; however, it's not loading with my mixin. I looked in pub/static/frontend/Package/theme/en_US/requirejs-config.js to verify that my configuration is in fact included, and it is:

pub/static/frontend/Package/theme/en_US/requirejs-config.js

(function() {
var config = {
    map: {
        '*': {
            my_custom_product: 'My_Module/js/my_custom_product'
        }
    },
    config: {
        mixins: {
            'Magento_Payment/transparent': {
                'My_Module/js/checkout/payment/transparent-mixin': true
            }
        }
    }
};
require.config(config);
})();

Now that I know the config should have my custom mixin included, I turned to debugging the mage/requirejs/mixins.js file. On line 126 I added a breakpoint and specifically waited for Magento_Payment/transparent to be the value of the path variable. When doing that Magento_Payment/transparent isn't listed in the configuration object, and thus my mixin doesn't get loaded.

Chrome Dev Tools Scope at Breakpoint

I know the way this is referenced is within the payment module's iframe template:

<form class="form" id="co-transparent-form" autocomplete="off" action="#" method="post" data-bind="mageInit: {
    'transparent':{
        'controller': getControllerName(),
        'gateway': getCode(),
        'orderSaveUrl':getPlaceOrderUrl(),
        'cgiUrl': getCgiUrl(),
        'dateDelim': getDateDelim(),
        'cardFieldsMap': getCardFieldsMap(),
        'nativeAction': getSaveOrderUrl(),
        'expireYearLength': getExpireYearLength()
    }, 'validation':[]}">
<!-- ko with: getCcFormView() -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</form>

Is extending Magento_Payment/transparent possible, or do I need to find another way to add my custom functionality?

0

Looks to have been a cache issue. After fiddling with looking at the compiled requirejs-config.js file, I noticed the one the browser was using wasn't the same as the compiled version I was looking at. Clearing the browser cache resolved this issue for me.

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.