Adding Infinite scroll to sage

Hi People,

I’m trying to add Infinite scroll js to my sage theme but looks like ‘Infinite Scroll’ is not defined:

init — main.js:38TypeError: t("#bl-full-page").infiniteScroll is not a function. (In 't("#bl-full-page").infiniteScroll({path:".next",append:".portfolio"})', 't("#bl-full-page").infiniteScroll' is undefined)

I’ve installed infinite scroll using bower. Added the following to manifest.json

"infinite-scroll.js": {
  "bower": [
    "infinite-scroll"
  ]
},

And the following to setup.php

wp_enqueue_script('infiniteScroll', Assets\asset_path('scripts/infinite-scroll.js'), ['jquery'], null, true);

Also added infiniteScroll as a dependency for main.js where I’m initiating Infinite scroll under ‘common’ for now with:

$('#bl-full-page').infiniteScroll({
      // options
      path: '.next',
      append: '.portfolio',
    });

When I look at infinite-scroll.js in the dist folder it looks very sparse and empty so I get the feeling it’s not building properly but what am I doing wrong?

1 Like

Well I discovered that if I add the following to “overrides” in bower.json it works:

"infinite-scroll": {
  "main": [
    "dist/infinite-scroll.pkgd.js"
  ]
}

But if someone could explain why that would be great…

1 Like

Austin wrote a nice article on this:

Be sure to read the isotope example at the bottom, as it’s the exact same issue you ran into (and also by MetaFizzy).

1 Like

Thanks Foxaii, I’m new to bower and haven’t used it before except in the context of Sage. I understand now why the override is necessary but still very confused as to why infinite-scroll defines index.js as ‘main’ and not the package.

The ambiguity of the main property in the bower spec has lead to its use being interpreted differently over time. There’s more on the issue below: