Updating repeater items not always working

I’ve got a page on my site that as a long list of cars on it, pulled from a database (“Scraper”). Each car in the repeater has a like button that saves it to a wishlist on the individual’s profile when pressed.

I’m trying to write code so that when the like button is pressed and a user navigates away then comes back to the page it shows that the car has already been liked with a highlighted like button.

The repeater loads the first 3 cars. Then lazy loading kicks in and another batch of cars loads below.

For the first 3 cars using the code below, the likes register and show when returning to the page.

$w.onReady(function () {
     $w("#Scraper").onReady(() => {
         $w("#allOfThem").forEachItem(($item, itemData, index) => {
             var product_name = $item("#text168").text
             let emptyHeart = $item("#addtowishlist")
             let fullHeart = $item("#savedtowishlist")
             console.log("churning through items")
             user = wixUsers.currentUser;
             userID = user.id;
             let isLoggedIn = user.loggedIn;
             if (isLoggedIn === true) {

                 user.getPricingPlans()
                     .then((pricingPlans) => {

                         if (pricingPlans.length === 0) {
                             wixLocation.to("/plans-pricing")
                         }
                         var i;
                         for (i = 0; i < pricingPlans.length; i++) {
                             if ((pricingPlans[i].name === 'The Complete Package') || (pricingPlans[i].name === 'The Essentials')) {
                                 wixData.query("Wishlist")
                                     .eq("productId", product_name)
                                     .eq("userId", userId)
                                     .find()
                                     .then((results) => {
                                         let count = results.totalCount;
                                         if (count === 0) {
                                             emptyHeart.show()
                                             fullHeart.hide()
                                         } else {
                                             emptyHeart.hide()
                                             fullHeart.show()
                                         }
                                     });
                             }
                         }
                     });

             } else {
                 wixLocation.to("/plans-pricing");
             }
         });
     });
 })

After the lazy loading shows the next batch of cars the likes don’t register or show but I can see from the console.log(“is in wishlist from lazy”) that the code is triggered below

export function loadingStrip_viewportEnter(event) {
     $w("#loadingGif").show();
     $w("#Scraper").setPageSize(21);
     $w("#Scraper").loadMore()
         .then(() => {
             $w("#loadingGif").hide();
         }).then()
         $w("#Scraper").onReady(() => {
         $w("#allOfThem").forEachItem(($item, itemData, index) => {
             var product_name = $item("#text168").text
             console.log(product_name)
             let emptyHeart = $item("#addtowishlist")
             let fullHeart = $item("#savedtowishlist")
             console.log("churning through items")
             user = wixUsers.currentUser;
             userID = user.id;
             let isLoggedIn = user.loggedIn;
             if (isLoggedIn === true) {
                 console.log("Logged In")

                 user.getPricingPlans()
                     .then((pricingPlans) => {

                         if (pricingPlans.length === 0) {
                             wixLocation.to("/plans-pricing")
                             console.log("Giles doesn't have pricing plans")
                         }
                         var i;
                         for (i = 0; i < pricingPlans.length; i++) {
                             if ((pricingPlans[i].name === 'The Complete Package') || (pricingPlans[i].name === 'The Essentials')) {
                                 wixData.query("Wishlist")
                                     .eq("productId", product_name)
                                     .eq("userId", userId)
                                     .find()
                                     .then((results) => {
                                         let count = results.totalCount;
                                         if (count === 0) {
                                             emptyHeart.show()
                                             fullHeart.hide()
                                             console.log("not in wish list from lazy")
                                         } else {
                                             emptyHeart.hide()
                                             fullHeart.show()
                                             console.log("is in wishlist from lazy")
                                         }
                                     });
                             }
                         }
                     });

             } else {
                 wixLocation.to("/plans-pricing");
                 console.log("Not Logged In")
             }
         });
     });
 }

Question: What am I doing wrong so that it’s not working properly post lazy loading?

Question 2: Is there a more efficient way to do this?

1 Like