1

I add a checkbox input to the checkout page in magento 2. The way I add it is really simple, just add an item in checkout_index_index.xml.

When clicking on the checkbox, I want to call a PHP function. My plan is to create a controller. But I don't know what should be the URL of the controller. I can create a route but how to get that value in the js file?

If I set the URL to 'custom/index' then it automatically POST to shop_url/checkout/custom/index. How to do AJAX in checkout page?

define([
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/totals'
], function (Component, totals) {
    "use strict";

    return Component.extend({

           handleCheckbox: function() {

                $.ajax({
                    method: "POST",
                    url: 'WHAT SHOULD BE THE URL HERE',
                    data: {form_key: window.FORM_KEY},
                    dataType: "json",
                    showLoader: true,
                }).done(function( response ) {
                   console.log('GOT RESPNSE: ', response)
                });
            },

        /**
         * Order totals
         *
         * @return {Object}
         */
        totals: totals.totals(),

        /**
         * Is display reward points totals
         *
         * @return {boolean}
         */
        isDisplayed: function() {
            return this.getPureValue() !== 0;
        },

        /**
         * Get total value
         *
         * @return {number}
         */
        getPureValue: function() {
            var price = 0,
                fee;

            if (this.totals) {
                fee = totals.getSegment('fee');

                if (fee) {
                    price = fee.value;
                }
            }
            return price;
        },

        /**
         * Get total value
         *
         * @return {string}
         */
        getValue: function() {
            return this.getFormattedPrice(this.getPureValue());
        }
    });
});
1

You need to change this code as below

define([
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/totals',
    'mage/url'
], function (Component, totals, url) {
    "use strict";

    return Component.extend({

           handleCheckbox: function() {
                url.setBaseUrl(BASE_URL);
                var linkUrl = url.build('checkout/custom/index');
                $.ajax({
                    method: "POST",
                    url: linkUrl,
                    data: {form_key: window.FORM_KEY},
                    dataType: "json",
                    showLoader: true,
                }).done(function( response ) {
                   console.log('GOT RESPNSE: ', response)
                });
            },

        /**
         * Order totals
         *
         * @return {Object}
         */
        totals: totals.totals(),

        /**
         * Is display reward points totals
         *
         * @return {boolean}
         */
        isDisplayed: function() {
            return this.getPureValue() !== 0;
        },

        /**
         * Get total value
         *
         * @return {number}
         */
        getPureValue: function() {
            var price = 0,
                fee;

            if (this.totals) {
                fee = totals.getSegment('fee');

                if (fee) {
                    price = fee.value;
                }
            }
            return price;
        },

        /**
         * Get total value
         *
         * @return {string}
         */
        getValue: function() {
            return this.getFormattedPrice(this.getPureValue());
        }
    });
});
3
  • how can I add an checkout/custom/index route. What is this url.setBaseUrl(BASE_URL); for? –  coinhndp Aug 4 '20 at 8:56
  • url.setBaseUrl(BASE_URL); This is for set the url first as base url and then build custome url by the function url.build('checkout/custom/index'). – Ritesh Santra Aug 4 '20 at 9:06
  • Which custom controller action you have created for this ajax post. You have to use this for route the ajax post. – Ritesh Santra Aug 4 '20 at 9:13

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.