cancel
Showing results for 
Search instead for 
Did you mean: 

Magento2 Javascript widget phtml

Magento2 Javascript widget phtml

Hello looking for some help, I have created some Widget , and need to add in it java script for fetch INSTAGRAM photos, I have a library and a script, but this script doesn't work. I have added it in my simplewidget.phtml file , but don't know how to write it correct , maybe some one can help ? code below:

 

<script type="text/javascript">jQuery(function() {
    var userFeed = new Instafeed({
        get: 'user',
        userId: '5454117805',
        accessToken: '5454117805.1677ed0.a5cef727c5824160b3ee1238d053fadb',
        resolution: 'thumbnail',
        sortBy: 'most-recent',
        limit: 6,
        links: false
    });
    userFeed.run();
});
</script>

<h1>Instagram Feed</h1>
<div id="instafeed"></div>

 I'm trying to include instafeed.js , js library already include in my head tags, but script doesn't work

3 REPLIES 3

Re: Magento2 Javascript widget phtml

Hi @kris_undefined,

 

In Magento 2 you can use jquery by require() function

 

 

 require(['jquery', 'jquery/ui'], function($){ 
     //your js code here  
 });

So your final code looks like this

 

 

<script type="text/javascript">
require(['jquery', 'jquery/ui'], function($) {
	var userFeed = new Instafeed({
	    get: 'user',
	    userId: '5454117805',
	    accessToken: '5454117805.1677ed0.a5cef727c5824160b3ee1238d053fadb',
	    resolution: 'thumbnail',
	    sortBy: 'most-recent',
	    limit: 6,
	    links: false
	});
	userFeed.run();
});
</script>

 

 

Re: Magento2 Javascript widget phtml

 Strange because when I change code to yours, and in the function writes alert('ok'); , this alert works.

But my function doesn't... I have include instafeed.min.js library in my header page, head part. Its looks like: 

<script  type="text/javascript"  src="http://localhost/magento2/pub/static/version1529141182/frontend/Magento/luma/en_US/Toptal_CustomWidget/js/instafeed.min.js"></script>

Screenshot from 2018-06-17 07-30-01.png

 

and have inserted your code script in my .phtml file, and it doesn't work. whats wrong?

 

<script type="text/javascript">
require(['jquery', 'jquery/ui'], function($) {
alert('ok'); var userFeed = new Instafeed({ get: 'user', userId: '5454117805', accessToken: '5454117805.1677ed0.a5cef727c5824160b3ee1238d053fadb', resolution: 'thumbnail', sortBy: 'most-recent', limit: 6, links: false }); userFeed.run(); }); </script>

 

 

Re: Magento2 Javascript widget phtml

Can you please check the consol, does it show any script error there?
So you get idea what actual error there.

Was my answer helpful? You can Click Kudos/Accept As Solution.
200+ professional extensions for M1 & M2 with free lifetime updates!