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?