cancel
Showing results for 
Search instead for 
Did you mean: 

Load remote javascript in template

Load remote javascript in template

Hi everyone,

 

I need to load a remote javascript url into a knockout template and execute the functions.

The remote javascript file is as follow:

Url: http://www.mysite.com/remote.js

Content of remote.js:

function myRemoteTest() {

alert('success');

}

 

How can I load http://www.mysite.com/remote.js in a knowckout template and execute the myRemoteTest() function?

 

It seems to be very hard to find an answer to this on the web.

The only resource I found is this one and it doesn't work:

https://webkul.com/blog/call-configurable-external-js-url-magento2

 

Thanks a lot for your answers.

12 REPLIES 12

Re: Load remote javascript in template

@jlinker

 

 

https://webkul.com/blog/call-configurable-external-js-url-magento2/ 

 

it is right

 

Make sure the external js right place and it is calling.

 

some time htaccess restrict external js code

 

 

 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Load remote javascript in template

@Sunil Patel, thank you for your reply.

Unless I am missing something, I have followed the instructions on the blog and it's giving me the following error:

 

Refused to execute script from 'http://mylocalmagento.com/pub/static/version1533562728/frontend/Magento/luma/en_US/customjs.js

 

So basically my magento install is looking for my customjs file in the local file system instead of the remote url. As if the require.config in the phtml was completely ignored.

 

 

Re: Load remote javascript in template

Hello,

 

you need to configure into

 

var config = {
    paths: {
        paypalInContextExpressCheckout: 'https://www.paypalobjects.com/api/checkout'
    }
};

you can find more info into

https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/Paypal/view/frontend/requirejs...

 

hope it will help you.

 

If works then mark as solution.


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Load remote javascript in template

Thanks for the hint. The thing is that I need to provide the url of the remote javascript dynamically as it can change depending on some conditions.

 

So hardcoding it in a js file is not an option. The blog I pointed seemed interesting because it was suggesting a solution for the case of dynamic urls, but   it doesn't work as expected.

 

Re: Load remote javascript in template

Hello,

 

test.phtml have you removed require-config.js file from pub/static from your theme

 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Load remote javascript in template

Sorry I am not sure I understand your question.

I never touch the files in pub/static as they are generated during static content deployment.

I do have a require-config.js in view/frontend. Are you suggesting I remove it or I've misunderstood?

 

Re: Load remote javascript in template

@Sunil Patel, I confirm your suggestion using require-config.js works.

As described in the blog, I thought require.config({}) declarations in a template file would just extend the declarations in require-config.js. Isnt't it how it should work?

Re: Load remote javascript in template

I also tried this in the template file:

<script type="text/x-magento-init" data-bind="src: getTheDynamicUrlToJavascriptFile()"></script>
 
This allows me to generate the url dynamically. 
However when I try to call functions from the loaded javascript file in the template, i get errors saying the function is not defined.

Re: Load remote javascript in template

Hello @jlinker

 

i don't know why you are adding js that way for external js.

 

Add js code like google analytics

 

<script src="ex.com/js" defer/>

 

hope it will help you/

 

 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer