1

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.

2

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();
},
  • Initially this is what I did but I'm still getting the error. That is why I ended up using the checkout-data.js. But the problem is neither of the two work. – MadzQuestioning May 16 at 4:23
  • @MadzQuestioning sohel's solution is perfect and it's working perfectly in mycode Please try again pasting this code and check agian – Rutvee Sojitra May 16 at 4:56
  • @MadzQuestioning you definitely made a mistake. Did you clear pub/static? IF you working on developer mode then no need to clear pub/static. Should clear browser js cache. – Sohel Rana May 16 at 5:17

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.