Gravatar for simon.byrne@ifsworld.com

Question by simonbyrne, Nov 4, 2015 10:41 AM

Coveo for Sitecore: call external javascript function after each load of Infinite Scrolling

Hi,

We're using Coveo for Sitecore and have Infinite Scroll set up on the page control. Fundamentally, it is working exactly as expected. However, the page interface uses another javascript library called Gridder to lay out a 4-wide grid layout and make each of these boxes expandable/collapsable.

Is there a way to call an external javascript function with each page scroll on the Coveo Infinite load? This would allow me to reinitialise the Gridder interface. I can't see any way of doing this in the control properties, but perhaps it's possible with advanced parameters?

Best wishes, Simon

1 Reply
Gravatar for jflheureux@coveo.com

Answer by Jean-François L'Heureux, Nov 5, 2015 2:49 PM

Hi Simon,

In your Sitecore instance /Website/Coveo/js folder, you have the JavaScript source code of the Coveo JavaScript Search Framework in the CoveoJsSearch.js file. after having a look at it and searched for "infinite", I found the code handling the infinite scrolling. The 2 main methods are handleScrollOfResultList and displayMoreResults. The displayMoreResults method triggers a Coveo.Events.ResultListEvents.newResultsDisplayed event after displaying the new results in the results list. You could attach an event handler to this event to execute your custom code like this:

Coveo.$('#search').on(Coveo.Events.ResultListEvents.newResultsDisplayed, function (e, data) {
    // Your custom code here
});

However, this event is triggered also for non-infiniteScrolling queries so your event handler will be called for new queries, facet clicks, sorting changes and many other user actions that triggers a query.

If you attach this event handler before calling the 'init' method that initializes the search interface, it will be called for the initial query search results. If you attach it after the call to the 'init' method, it will be called only for subsequent queries.

A better event to attach would probably be the Coveo.Events.QueryEvents.duringFetchMoreQuery. This one seems to be triggered before or during the network request to fetch the new results of an infinite scroll action and before the results are displayed though.

Hope this helps in your solution,

Jeff

Gravatar for slangevin@coveo.com

Comment by Simon, Dec 15, 2016 9:52 AM

Tested in V4 and here is the updated code:

Coveo.$('#<%= Model.Id %>').on(Coveo.ResultListEvents.newResultsDisplayed, function (e, data) {
           // code
  });
Ask a question