Gravatar for shivae@techaspect.com

Question by Shiva, Oct 12, 2018 4:07 PM

Can lazy loading be modified to load the results based on the height of results displaying container/div ?

The existing Coveo Lazy loading for displaying search results is depending on the parent scrollable element. How can it be modified to load the results based on the height of results displaying container/div.

Scenario: If we have huge number of facets and defaults number of results is set to 10, even if the user scroll down to 10th result, lazy loading is not kicking in. When the user scrolls down to bottom of the page(bottom of facets at left), lazy loading is kicked in. Is there any way to make lazy loading to trigger when user reaches the end of results rather than bottom of the page?

Configuration:

Current Coveo for Sitecore version: 4.1.414.9

Current Sitecore version: 8.2.160729

1 Reply
Gravatar for flguillemette@coveo.com

Answer by François Lachance-Guillemette, Oct 12, 2018 5:50 PM

Have you tried the data-infinite-scroll-container attribute on the ResultList?

The doc there mentions that the heuristic is not perfect, thus might require this attribute to be set to a specific container. Maybe you are falling into this use case.

The option is not fronted in the Coveo for Sitecore Hive implementation, so I would suggest to duplicate the Result List component and renderings, and reuse your custom duplicate in your Search Interface instead.

Gravatar for shivae@techaspect.com

Comment by Shiva, Oct 15, 2018 1:21 PM

@François Lachance-Guillemette Thank you for your response.
As you suggested, I duplicated Coveo Results List component and renderings() and added 'coveo-result-list-container' and 'coveo-list-layout-container' to data-infinite-scroll-container-selector. But still I am facing the same issue. Is there anything else I need to change?
cshtml:
<div @foreach(var property in @Model.RawProperties) { @:data-@(property.Key)='@(property.Value)' } data-infinite-scroll-container-selector='coveo-results-column'> @Html.Sitecore().CoveoDynamicPlaceholder("coveo-ui-result-templates") </div>

HTML:
<div data-enable-infinite-scroll="true" data-wait-animation="fade" data-auto-select-fields-to-include="false" data-infinite-scroll-container-selector="coveo-results-column">

Ask a question