3

When customizing checkout page, I want to add new custom js to check when a specific Payment is checked. Can I use Knockout Js or re-use exist js functions of payment? And, what's the best practice for this?

enter image description here

4

There is a way to do this. We're going to override the core js.

If we inspect the element of payment checkbox, as we can see, Magento uses a function - selectPaymentMethod - to check select action. We will override this core function.

enter image description here

In your custom module, create requirejs-config.js which declares our override function.

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/action/select-payment-method':
                'Boolfly_PaymentFee/js/action/payment/select-payment-method'
        }
    }
};

For example, our override function:

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/model/quote',
        'Boolfly_PaymentFee/js/action/checkout/cart/totals',
        'jquery/jquery-storageapi',
    ],
    function($, ko ,quote, totals) {
        'use strict';

        return function (paymentMethod) {
            //Our custom code should be here.
            if(paymentMethod.method == 'paymentfee')
            {
                alert('Payment Fee');
                quote.paymentMethod(paymentMethod);

            } else {
                quote.paymentMethod(paymentMethod);
            }

        }
    }
);

I'm not sure about the best way to tackle my problem. However, this way can resolve it.

1

Why not add an by extending checkout_index_index.xml which you should add to

/app/design/frontend/<vendor>/<themename>/Magento_Checkout/layout/ 

adding the follwing:

 <head>
   <link src="<url of your js file>"/>
 </head>
  • You didn't fully understand my question: Can I use Knockout Js? And, what's the best practice for this?. – Khoa TruongDinh May 22 '16 at 6:57
  • Sorry about that but in fact, now you can add a new knockout file to your checkout right ;-) – Kay Int Veen May 22 '16 at 7:47
  • Can i re-use exist js functions of payment? When I don't want to use checkout_index_index.xml to add new custom js. – Khoa TruongDinh May 22 '16 at 7:58

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.