1

I am running the Magento 2 on the localhost server. http://127.0.0.1/magento3 here I've built a custom module for payment gateway. In custom JS I want to use the mage/url.
I need to use ajax for the checkout process. Below is the code where I want to get use url.build.

But I get,

Uncaught ReferenceError: url is not defined in the console for console.log(url.build) ;

Also, I've got a function method where I want to use the ajax in Custom JS file at PATH app\code\vendor_name\module_name\view\frontend\web\js

       "IOST",
       "jquery",
       "mage/url"], function ($,url) {
       console.log(url);
   });
   function transfer () {
       console.log(url.build);
   }

Button at this path with which i used to call the transfer() method. app\code\vendor_name\module_name\view\frontend\web\template\payment CODE

                     <span data-bind="i18n: 'Pay By IostPay'"></span> 
</button> 

FILE:- requirejs-config.js CODE:-

    map: {
        '*': {
            lazyloadScript:'vendorname_modulename/js/custom_func'
        }
    }
};```


Does anyone know how to do it?

Thanks in advance.
  • Where you call transfer() function? – Dhaduk Mitesh Nov 14 at 4:57
  • On the same below the requirejs like i have mentioned in my code. I can use jQuery, IOST in the transfer function, but why can't use the ur.build in requirejs itself or the transfer function. – Garry Nov 14 at 5:01
  • you are using url out of the define scope. check my answer. – Rakesh Varma Nov 14 at 5:25
  • add 'IOST' at last where you have defined – Ketan Borada Nov 14 at 6:32
  • add whole code of custom_func js file – Rakesh Varma Nov 14 at 7:01
2

Please use below code in your JS file

require([
    "IOST",
    "jquery",
    "mage/url"
], function( iost, $, url ){

    console.log(url) ;
}); 
function transfer(){
    console.log(url.build) ;
}

OR you can use below code for your JS

require(
    ['uiComponent', 'jquery', 'mage/url', 'Iostpay_Iostpaymagento::js/iost.min'],
    function (uiComponent, $, url, iost) {
        "use strict";
        return uiComponent.extend({
            initialize: function () {
                this._super();
                console.log(url);
            },

            transfer: function(){
                console.log(url.build) ;
            }
        });
    }
);

After changing this you need to run below commands

php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush

You can follow this JS to understand how you can build URLs with the use of urlBuilder and how to use mage/url in your knockout JS.

vendor/magento/module-gift-message/view/frontend/web/js/action/gift-options.js

Hope this will work for you!

  • You need to pass 3 params here in this function function( iost, $, url ) otherwise you can change order of IOST. Let me know if it will works for you then. – Kishan Savaliya Nov 14 at 5:03
  • Please check my updated answer @Garry – Kishan Savaliya Nov 14 at 5:21
  • This is the custom js file where i need to use transfer() function. But after this above code. I get Error of mismatched define([ "jquery", "mage/url", "IOST" ],....... – Garry Nov 14 at 5:55
  • same error even after removing. require.js:166 Uncaught Error: Mismatched anonymous define() module: function( $, url ){ console.log(url) ; } – Garry Nov 14 at 6:26
  • Can you please update requirejs-config.js file's content in your question if possible ? – Kishan Savaliya Nov 14 at 6:30
0

Use below code because you are using url variable out of the scope of the define and one more thing if you have created custom payment method then you have to use uiComponent to extended the template you can check in this path.

vendor/magento/module-offline-payments/view/frontend/web/js/view/payment/method-renderer/checkmo-method.js

define([
    "IOST",
    "jquery",
    "mage/url"
], function(iost, $, url) {
    function transfer() {
        console.log(url.build);
    }

});

OR As I mention above using uiComponent you can use below code also.

define(
[
    'Magento_Checkout/js/view/payment/default',
    'jquery',
    'mage/url'
],
function(Component, $, url) {
    'use strict';
    return Component.extend({
        transfer: function() {
            console.log(url.build);
        },
    });
});

Hope it will help you.

  • This is my file at vendor/magento/module-offline-payments/view/frontend/web/js/view/payment/method-renderer/checkmo-method.js ` define( [ 'Magento_Checkout/js/view/payment/default', 'jquery', 'mage/url' ], function (Component) { 'use strict'; return Component.extend({ defaults: { template: 'Iostpay_Iostpaymagento/payment/iostpay' }, transfer: function() { console.log(url.build); }, }); } ); – Garry Nov 14 at 5:52
  • And when i trigger click on transfer. It says Uncaught ReferenceError: transfer is not defined – Garry Nov 14 at 5:53
  • update your question with html code. where you trigger click event – Rakesh Varma Nov 14 at 6:04
  • I got a button on placeOrder on checkout page. – Garry Nov 14 at 6:08
  • update question with your code – Rakesh Varma Nov 14 at 6:09

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.