Magento – Unable to process binding click: function()

knockoutjsmagento2magento2.2magento2.3

I'm trying to implement a click event in one of the button I added under the Magento_Checkout module specifically under payment.html view. Now I added the below code

File location: app/design/frontend/Vendor/Module/Magento_Checkout/web/template/payment.html

<form id="co-payment-form" class="form payments" novalidate="novalidate">
    <fieldset class="fieldset">              
        <button type="button" data-bind="click: goBackShipping">Back from template</button>
    </fieldset>
</form>

Now what I want is that the goBackShipping will be triggered using KnockoutJS functionality. But I'm getting this error

knockout.js:3391 Uncaught ReferenceError: Unable to process binding "click: function(){return goBackShipping }"

This goBackShipping function is added in the checkout-data.js under the folder

app/design/frontend/Vendor/Module/Magento_Checkout/web/js/checkout-data.js

and here is the code I added

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

 /**
  * Checkout adapter for customer data storage
  *
  * @api
  */
 define([
     'jquery',
     'Magento_Customer/js/customer-data',
     'jquery/jquery-storageapi'
 ], function ($, storage) {
     'use strict';

    var cacheKey = 'checkout-data',

    /**
     * @param {Object} data
     */
    saveData = function (data) {
        storage.set(cacheKey, data);
    },

   // This is the newly added function
    goBackShipping = function () {
        alert("Preparing to go back");
        window.history.back();
    },

    /**
     * @return {*}
     */
    initData = function () {

        return { ... };
    },
  };
});

Honestly I have no idea why it's giving an error like that. Am I doing something wrong? (obviously yes because it's giving an error).

I would only like to implement a button click action using knockoutjs and simple javascript alert. But I can't get pass this error.

Best Answer

Your method needs to add the following class:

vendor/magento/module-checkout/view/frontend/web/js/view/payment.js

So overwrite this and add your method here.

goBackShipping: function () {
    alert("Preparing to go back");
    window.history.back();
},
Related Topic