Hi Yisrael,
Sorry for the late reply,
I did some changes and now I’m using only one collection. However the duplication still happens on the repeaters. Let me try to give you more information about it.
This is how the website looks like:
I have repeater1 where the top 5 appears, and repeater 2 where the rest of favorites appear (6,7,8…) and where you can see the buttons that move a product to favorite number 5 → moving it to top 5.
Both repeaters use the same collection
This is the collection where the favorites are stored:
When you click on the button that reads “subir al nº 5” of one of the products in repeater2, it changes the product’s favoriteNumber to 5 and increases by 1 all the products in between the one clicked and number 5.
I leave you the code below with the functions where the 2 repeaters are loaded with all the data, and the function to transfer the favorite to number 5.
async function loadFavoritesList () {
let favoritesList = await wixData.query("Productosfavoritos")
.eq("userId", user.id)
.include('favorito1')
.le("favoriteNumber", 5)
.ascending("favoriteNumber")
.find()
console.log(favoritesList.length);
if(favoritesList.length < 5){
$w('#repeater1').collapse();
$w('#box3').show();
$w('#box3').expand();
$w('#groupReservas').collapse();
}else{
$w('#repeater1').show();
$w('#repeater1').expand();
$w('#repeater1').data = favoritesList.items;
$w('#repeater1').onItemReady(myItemReady);
$w('#repeater1').forEachItem(($item, itemData, index) => {
$item('#loading').collapse();
$item('#delete').onClick(removeItem(itemData._id, itemData.favoriteNumber));
});
}
}
async function loadReserveList () {
let reserveList = await wixData.query("Productosfavoritos")
.eq("userId", user.id)
.include('favorito1')
.gt("favoriteNumber", 5)
.ascending("favoriteNumber")
.find()
$w('#text43').show();
if(reserveList.length > 0){
$w('#repeater2').show();
$w('#repeater2').expand();
//$w('#box1').collapse();
$w('#repeater2').data = reserveList.items;
//$w('#repeater2').onItemReady(myReserveItemReady);
$w("#repeater2").forEachItem( ($item, itemData, index) => {
$item('#loadingReserve').collapse();
$item('#image2').src = itemData.favorito1.mainMedia;
$item('#text42').text = itemData.favorito1.name;
$item('#image2').link = itemData.favorito1.productPageUrl;
$item('#image2').target = "_blank";
$item('#removeItem').onClick(removeItem(itemData._id, itemData.favoriteNumber));
$item('#moverAFavoritos').onClick(transferToTopFive(itemData.favoriteNumber, 5));
});
}
else{
$w('#repeater2').collapse();
$w('#box1').show();
$w('#box1').expand();
}
}
function myReserveItemReady($w, reserveListItem){
let product = reserveListItem.favorito1;
$w('#image2').src = product.mainMedia;
$w('#text42').text = product.name;
$w('#image2').link = product.productPageUrl;
$w('#image2').target = "_blank";
}
function myItemReady($w, favoritesListItem){
let product = favoritesListItem.favorito1;
let favoriteNumber = favoritesListItem.favoriteNumber;
$w('#image1').src = product.mainMedia;
$w('#productName').text = product.name;
$w('#dropdown1').value = favoriteNumber;
$w('#image1').link = product.productPageUrl;
$w('#image1').target = "_blank";
$w('#text85').hide();
//$w('#delete').onClick(removeItem(favoritesListItem._id, favoritesListItem.favoriteNumber));
}
function transferToTopFive (oldValue, newValue){
return async function(){
console.log("in"); //this is how I see the call is being repeated
$w('#repeater1').forEachItem(($item, itemData, index) => {
$item('#loading').expand();
});
$w('#repeater2').forEachItem(($item, itemData, index) => {
$item('#loadingReserve').expand();
});
let favoritesToChange = await wixData.query("Productosfavoritos")
.eq("userId", user.id)
.between("favoriteNumber", newValue, oldValue + 1)
.ascending("favoriteNumber")
.find();
favoritesToChange.items[favoritesToChange.items.length-1].favoriteNumber = newValue;
await wixData.update("Productosfavoritos", favoritesToChange.items[favoritesToChange.items.length-1]);
for (var j = 0; j < favoritesToChange.length - 1; j++) {
favoritesToChange.items[j].favoriteNumber += 1;
await wixData.update("Productosfavoritos", favoritesToChange.items[j])
.then((results) =>{
let item = results;
})
.catch((err) => {
console.log(err);
});
}
loadFavoritesList();
loadReserveList();
}
}
So the main problem is that after the data of the repeaters is reloaded, when clicking on the button of one of the products, the function TransferToTop5 is executed several times. I use the console to show you this:
If I reload the page, it works well again. So it is as if everytime that a repeater is reloaded, when clicking on a button inside one of its components it repeats the action several times. As if there were several buttons one of top of the other
Hope this serves and you can help me with it.
Thanks in advance
