Adding Infinite scroll to sage

sage
1

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
2

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
3

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
4

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.

5

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:

https://github.com/metafizzy/isotope/issues/879