Instantsearch.js: Infinite scroll widget example / connectors

Created on 31 Jul 2017 · 14Comments · Source: algolia/instantsearch.js

Explain how to customize the infinite hits widget in order to load more hits at the bottom of the screen.

Guide

Source

bobylito

Most helpful comment

an connect Infinite Scroll + Masonry should also be a good example, plus someone asked about it on Stack Overflow

Haroenv on 31 Jul 2017

👍2 ❤1

All 14 comments

an connect Infinite Scroll + Masonry should also be a good example, plus someone asked about it on Stack Overflow

Haroenv on 31 Jul 2017

👍2 ❤1

I made a jsFiddle with masonry + jquery + infinite hits https://jsfiddle.net/vw53u259/

It does not work well inside jsFiddle because of the iframe end scroll detection but it works on the normal page.

Need to work a little bit more on it to have correct experience 👍

iam4x on 25 Aug 2017

❤1

Hi @iam4x !

We have exactly the same issue but when i type your solution it's written :

 app.js:49 Uncaught TypeError: Cannot read property 'connectInfiniteHits' of undefined
    at app.js:49

Do you have any ideas or solutions for us ?

Thank you very much!

Victoria.

victoriasr on 29 Aug 2017

@victoriasr which version of instantsearch.js are you using? Connectors are only available starting from v2.

bobylito on 29 Aug 2017

Thank you for responding so quickly !
I don't know, how can I find it ?

victoriasr on 29 Aug 2017

You can know it by checking the URL you are using to load the library in your webpage. If it looks like that: https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js then it's v1.

bobylito on 29 Aug 2017

Yeah it was v1 : I changed into : https://cdn.jsdelivr.net/instantsearch.js/2/instantsearch.min.js and now I have this error :

Uncaught ReferenceError: $ is not defined
    at app.js:54

referencing to :

search.addWidget( masonryInfiniteScrollHits({ containerNode: $("#hits") }) );

Do you have an idea ?

victoriasr on 29 Aug 2017

JsDelivr has changed the way the URL are formatted, to import directly the v2 in your page you need to use the links here.

If you have an already working instantsearch.js implementation, you probably need to change some elements in your code. You can follow this guide to migrate.

bobylito on 30 Aug 2017

Also you seem to use jQuery, therefore you need to import it as well.

bobylito on 30 Aug 2017

Sorry but I don't understand what I have to import? I changed in my main.blade.php page and it's like that :

<!doctype html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css">
  <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>

<div id="hits"></div>
</body>
</script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>

  <script src="/js/app.js"></script>
</body>

and in my app.js ?

victoriasr on 30 Aug 2017

@victoriasr you should add jquery, masonry and imageloaded libraries in order to reproduce the same behaviour as in the jsFiddle. Also you're missing the base CSS style for instantsearch.

<!doctype html>
 <head>
   <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css">
   <link rel="stylesheet" type="text/css" href="/css/style.css">
 </head>
 <body>

 <div id="hits"></div>
 </body>
 </script>
+  <script src="https://cdn.jsdelivr.net/g/[email protected],[email protected],[email protected](imagesloaded.js)">
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>
   <script src="/js/appa.js"></script>
</body>

bobylito on 30 Aug 2017

👍1

Yeah ! It worked perfectly i wrote this :

<!doctype html>
 <head>
   <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css">
   <link rel="stylesheet" type="text/css" href="/css/style.css">
 </head>
 <body>

 <div id="hits"></div>
 </body>
 </script>
+  <script src="https://cdn.jsdelivr.net/g/[email protected],[email protected],[email protected](imagesloaded.js)"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>
   <script src="/js/appa.js"></script>
</body>

I juste move 'jquery' before masonry ! Now I'm going to try in my real projet ;)

Thanks a lot !

victoriasr on 30 Aug 2017

Is it possible to set an offset value to trigger showing more results before hitting the bottom of the page?

Altering this part of the code seems to break the expected operation.

$(window).scroll(function() {
     if ($(window).scrollTop() + $(window).height() == $(document).height()) {
         widgetParams.loadMore();
         widgetParams.loadMore = () => {}; // no-op loadMore() until we have new results
    }
});

chrisjohnstone on 4 Jun 2018

$(window).scroll(function() {
     if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
         widgetParams.loadMore();
         widgetParams.loadMore = () => {}; // no-op loadMore() until we have new results
    }
});

That works: https://jsfiddle.net/vw53u259/3/

Please open a new issue if you have any other questions 👍

Haroenv on 4 Jun 2018

👍1

Was this page helpful?

0 / 5 - 0 ratings