How to call a configurable external JS URL in magento2

How to call a configurable external JS URL in magento2

Today I will explain in this article, that how you can create a configurable JS external URL and then map it with another js in magento 2. Suppose you stuck in a condition, i.e. you have to call only one JS with some conditions, like if mode is production then ABC.js should call and if mode is desug then XYZ.js should call , so this blog will be very helpful for you. So lets get started. At first you will need to call a template file on your page, i.e. test.phtml. In this file write the configurable JS url, for e.g. :

 

<?php if ($mode == "production") {
    $url = "https://abc.production/payment.js";
} else {
    $url = "https://abc.sandbox/payment.js";
} ?>
// $url is customized JS url
<script>
   require.config({
       map: {
           '*': {
               'customjs':  '<?php echo $url ?>'
           }
       }
   });
</script>

 

Whenever test.phtml is executed, above code will make an entry to requirejs-config.js  file. Now how do you call this in your other JS files. So lets have a look below in your other newcustomjs.js file.

 

/*browser:true*/
/*global define*/
define(
    [
        'ko',
        'jquery',
        'Magento_Checkout/js/view/payment/default',
        'Magento_Checkout/js/model/quote',
        'customjs' // here the js file is mapped
    ],
    function (
        ko,
        $,
        Component,
        quote,
        custom // you can refer this object to use customjs functions
    ) {
        'use strict';
        
        ...........
        // and you can call your customjs functions easily
        .........
});

 

Now when newcustomjs.js is called then only your customjs file invoked. Hope this blog will help you to build applications in your module in a better way. Try this and if you have any query then just comment below 🙂

 

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close