ResultsInfiniteScroll Documentation

To apply the Infinite Scrolling to the search Study page, we need to update the page_views template. We put everything that requires the infinite scroll into an attribute calls "template" inside the <studyinfinitescroll> variable.

In Hasura, public => page_views, we edit the row for template with site_id = '6', id = '47', title = 'cards', simply just copy the codes below:

<div class="grid-container"> <div class="grid4"> <div class="two"> <div class="mm-flex-row a1"> <span><a class=btn title='Show Search Refinement Options' href=/search?hash={{querystring hash}}&pv=presearch><i class="fa fa-chevron-right fa-2x">&nbsp;Refine Search</a></span><span class=btn><i class="fa fa-chevron-right fa-2x"></span><span><a class=btn href=/search?hash={{querystring hash}}&pv=cards><i class="fa fa-chevron-right fa-2x"> &nbsp;Viewing Search Results</a></span><span>&nbsp;<savesearch></savesearch>&nbsp;</span> </div> <div class="mm-flex-row a1"> <h3> Total Results : {{recordsTotal}}</h3> </div> <div class="mm-single-line-center"> <crumbsbar></crumbsbar> </div> <expander header="Refine Search" collapsed=true> <div class="mm-flex-row a1"> <agg id='42'></agg> <agg id='44'></agg> <agg id='45'></agg> <agg id='46'> </agg> <agg id='47'></agg> <agg id='48'></agg> <agg id='49'></agg> </div> </expander> </div> <div class="three loader-container subgrid"> <resultloader></resultloader> <div class="mm-flex-row a1"> <resultsort></resultsort> </div> <studyinfinitescroll template='<div class="cards-container" key={{querystring ALL}}> {{#each studies }} <div class="mm-card2"> <div class ="mail-merge" > <div style="text-align:center;display: grid;"> <span> <A title="View Study Details" HREF="study/{{nctId}}?hash={{querystring hash}}&pv=study">{{nctId}}</A> </span> <br /> <span> {{$FindAndReplace 'recruiting | available| enrolling by invitation| completed | suspended| terminated ' 'Recruiting &#9989 | Available &#9989| Enrolling by Invitation &#9989| Completed ❌| Suspended ❌ | Terminated ❌' overallStatus}} </span> <h4> {{briefTitle}} </h4> {{studyType}} Study Phase: {{phase}} {{enrollmentType}} Participants: {{enrollment}} Start: {{startDate}} ( Completion: {{completionDate}} ) (Last Updated: {{lastUpdatePostedDate}}) <span><A class="crumb-container" title="View Study Details" HREF="study/{{nctId}}?hash={{querystring hash}}&pv=study">&nbsp;&nbsp;Show More&nbsp;&nbsp;</A></span> </div> </div> </div> {{/each }} </div>'></studyinfinitescroll> </div> </div> </div>

The changes are coming from <studyinifitescroll> till the </studyinifitescroll>. Other than added a CSS line as "display: grid;" everything is the same.