1

Hello looking for some help

I have created some Widget , and need to add in it JavaScript for fetch instagram photos I have a library and a script, but this script doesnt work.

I have added it in my simplewidget.phtml

but dont know how to write it correct in Magento2, 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>
1

The best way to add JS is with requirejs.

Assuming that your js file is: instagram.js

app/design/{Vendor}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            myscript: 'js/instagram'
        }
    }
};

app/design/{Vendor}/{theme}/web/js/instagram.js

define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert('Instagram ok'); //just for test
           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();
           });
       }
});

app/design/{Vendor}/{theme}/Magento_Theme/templates/simplewidget.phtml

<script type="text/javascript">
    require(['jquery', 'myscript'], function($, myscript) {
        myscript();
    });
</script>

Info: don't forget to :

  • clean the cache

  • clean var/view_preprocessed content

  • clean pub/static content

  • deploy the static content = php bin/magento setup:static-content:deploy -f

| improve this answer | |
  • Strange that, when I do this:<script type="text/javascript"> jQuery(function() { alert('ok'); }); </script> - it works, but when I write my code which one is on the top , it doesn't work. instagram.js there is a full function which should be called, when I write my above script with var elements. This is the full script library which is included in my header script not working: matthewelsom.com/assets/js/libs/instafeed.min.js – Kristijanas Kiseliovas Jun 16 '18 at 11:23
0

Try the below code:

<script>
    (function  () {
        require(["jquery","custom"],function($) {
            $(document).ready(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>
| improve this answer | |
  • Strange that, when I do this:<script type="text/javascript"> jQuery(function() { alert('ok'); }); </script> - it works, but when I write my code which one is on the top , it doesn't work. instagram.js there is a full function which should be called, when I write my above script with var elements. This is the full script library which is included in my header script not working: matthewelsom.com/assets/js/libs/instafeed.min.js – Kristijanas Kiseliovas Jun 16 '18 at 11:28

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.