Jribbble jquery plugin help

sage
1

Hi there, first off I’m very new when it comes to javascript and Sage. So some plugins are hit and miss for me. This plugin looked pretty straightforward to add to my site so I followed the instructions.

Using the Jribbble jQuery plugin (just outputs Dribbble shots): http://lab.tylergaw.com/jribbble/

  1. bower install --save jribbble
  2. I tried to copy the example seen here with my own API key applied: http://codepen.io/tylergaw/pen/RPRVew/?editors=101

I don’t see a place to add my own scripts into the body tags for a Sage project, so I tried to place the suggested code into my main.js file (replaced the API key with my own):

$.jribbble.setToken('f688ac519289f19ce5cebc1383c15ad5c02bd58205cd83c86cbb0ce09170c1b4');

$.jribbble.shots('debuts', {
  'per_page': 36,
  'timeframe': 'month',
  'sort': 'views'
}).then(function(res) {
  var html = [];
  res.forEach(function(shot) {
    html.push('<li class="shots--shot">');
    html.push('<a href="' + shot.html_url + '" target="_blank">');
    html.push('<img src="' + shot.images.normal + '">');
    html.push('</a></li>');
  });
  
  $('.shots').html(html.join(''));
});

Then I added this to the frontend as suggested:
<ul class="shots"></ul>

Nothing outputs on the frontend, and my inspector gives me this error: Uncaught TypeError: Cannot read property 'jribbble' of undefined

Any help would be appreciated. Will provide more details as needed. Thanks

2

Two questions:

  1. Did you run gulp or gulp watch again after saving the package?
  2. Where did you add that code in main.js?
3

Thanks for your reply.

  1. I have ran gulp watch, not gulp. Will try running gulp and see if that does anything.
  2. I put that code at the bottom of my main.js file.
4

Yes, actually gulp watch will not run the build process, so after you install something with Bower, or make any updates to your Bower overrides, or update assets/manifest.json, you should run gulp then gulp watch

5

You’ll probably want to put that code in here: https://github.com/roots/sage/blob/1b9c0a3398b2cfc99b107aea8470cc8bb98f4254/assets/scripts/main.js#L20-L22

6

That did it. Guess I should have read the file’s comments, eh? Much appreciated! Now I’ll double check to see what else needs to be sorted into here.