How to override or extend proceed-to-checkout.js

Question

I need to override or extend Magento's proceed-to-checkout.js file in my module. app/code/Magento/Checkout/view/frontend/web/js/proceed-to-checkout.js

In my modules requirejs-config.js I have tried using a mixin and also replacing the mapping with both...

var config = {
 'config': {
 'mixins': {
 'Magento_Checkout/js/proceed-to-checkout': {
 'Mynamespace_Checkout/js/view/proceed-to-checkout-mixin': true
 }
 }
 }
};

AND

var config = {
 map: {
 '*': {
 proceedToCheckout: 'Mynamespace_Checkout/js/proceed-to-checkout'
 }
 }
};

Neither work and I'm unsure how I should write the mixin as Magento's original proceed-to-checkout.js file simply returns an anonymous function with a jQuery click event listener.

Any idea how I can get this to work in a module?

Answer 1

Try following way:

app/code/SR/MagentoCommunity/view/frontend/requirejs-config.js

var config = {
 map: {
 '*': {
 "Magento_Checkout/js/proceed-to-checkout": 'SR_MagentoCommunity/js/proceed-to-checkout'
 }
 }
};

app/code/SR/MagentoCommunity/view/frontend/web/js/proceed-to-checkout.js

define([
 'jquery',
 'Magento_Customer/js/model/authentication-popup',
 'Magento_Customer/js/customer-data'
], function (,ドル authenticationPopup, customerData) {
 'use strict';
 return function (config, element) {
 console.log('new');
 $(element).click(function (event) {
 var cart = customerData.get('cart'),
 customer = customerData.get('customer');
 event.preventDefault();
 if (!customer().firstname && cart().isGuestCheckoutAllowed === false) {
 authenticationPopup.showModal();
 return false;
 }
 $(element).attr('disabled', true);
 location.href = config.checkoutUrl;
 });
 };
});

Clear static content if you are not in developer mode.

Answer 2

I know this is an old question, but I found a solution with a mixin and without having to override the original code in case you want to add something to the element onclick:

define([
'jquery',
'Magento_Customer/js/model/authentication-popup',
'Magento_Customer/js/customer-data'
], function (,ドル authenticationPopup, customerData) {
 return function (target) {
 return function (config, element) {
 var result = target(config, element);
 $(element).on('click', function (event) {
 //Your code here
 });
 return result;
 };
};
});

Hope this might help