Load more repeater items on viewpoint enter

Ask the community
,
1

I have the below code and I’m having trouble getting the repeater to show more items using the onviewpointenter function. I think the code is right but it just isn’t in the right place. Would love some help figuring out the correct placement of the code. I highlighted the current onviewpoint enter code in orange

import wixData from 'wix-data';

const ProductCollection = "Meals";

$w.onReady(() => {
    updateRepeater();
    initialiseFilterHandlers();
});

 // Updates repeater based on changes to filters
function initialiseFilterHandlers() {
    $w('#organicbox').onChange(updateRepeater);
    $w('#servicedropdown').onChange(updateRepeater);
}

function updateRepeater() {
    // Get the new filtered data set based on new checkbox settings
    return filter()
    .then((filterResult) => {
    // Update the repeater using the newly filtered Product list
        $w('#repeater1').data = filterResult.items;

    // Load More on viewpoint enter function
    $w("#loadMoreStrip").onViewportEnter((event) => {
        filterResult = filterResult.next();

        let data = $w('#repeater1').data;
            $w('#repeater1').data = data.concat(filterResult.items);
        if(!filterResult.hasNext()){
                $w('#button3').hide();
            }
        });

        console.log(filterResult.items);
 
        $w('#repeater1').forEachItem(($item, itemData) => {
            // Load each repeater item
            $item('#text68').text = itemData.name;
    });
}

// filter: The main filter function which builds the filter and 
// applies it returning a wixData query result.
function filter() {
    let mainQuery = wixData.query(ProductCollection);
    let dietfilter = dietFilter();
    let servicefilter = serviceFilter();

 // Execute the filter
    return mainQuery
    .and(dietfilter)
    .and(servicefilter) 
    .ascending("rank")
    .limit(5)
    .find();
}

function dietFilter() {
     let mealFilter = wixData.query(ProductCollection);
     if ($w('#organicbox').checked) {
         mealFilter = mealFilter.and(wixData.query(ProductCollection).eq('organic',    true));
     }
    return mealFilter
}

function serviceFilter  () {
     let mealFilter = wixData.query(ProductCollection);
     let filtermeal = $w('#servicedropdown').value;
     mealFilter = wixData.query(ProductCollection).contains('service',filtermeal);

     return mealFilter
}
2

You have incorrectly defined the onViewportEnter() event handler in the UpdateRepeater() function. You need to move it (your code in orange) to the page’s onReady() function.

See the onViewportEnter() API for details and code examples.

3

Thanks @yisrael-wix . The issue I had when moving it to the onReady function was that the filterResult variable is only defined in the UpdateRepeater function. Is there a way to store the value of filterResult to carry over to the onReady function?

4

It seems to me that the onViewportEnter() function should be defined in the onReady(), and that the UpdateRepeater() function should be called from the onViewportEnter() function.

5

@yisrael-wix I moved the onViewportEnter function into the onReady function but am receiving this error: undefined is not an object (evaluating ‘e._id’). Is it an issue with having the return filter().then((filterResult) function now in both the onViewportEnter() and updateRepeater() function.

$w.onReady(() => {
    updateRepeater();
    initialiseFilterHandlers();

    $w("#loadMoreStrip").onViewportEnter((event) => {
       return filter()
       .then((filterResult) => {
          filterResult = filterResult.next();

          let data = $w('#repeater1').data;
          $w('#repeater1').data = data.concat(
          filterResult.items);
          
          if(!filterResult.hasNext()){
              $w('#button3').hide();
          }
          updateRepeater();
          });
    });
});
6

I ran into a similar issue. Posted my workaround on another thread. Hope it helps.

TL;DR: Make your own hasNextPage () and use that instead.

 /** monkeypatch for wix_data.hasNextPage() */
const hasNext = () => dataset.getCurrentPageIndex() < dataset.getTotalPageCount();