Formatted text in repeater glitches when repeater "loads more"

Ask the community
,
1

Hi !

I’ve come across quite a puzzling issue. I have a repeater in which some data is present such as the title, the price, and the previous price. Everything works fine when the repeater is asked to load more, except for the previous price. I think it is due to it being formatted by a piece of code (I want it struck through).

I’ve only managed to get it to display correctly either when the “first batch” is displayed or when the second one is (by clicking on a button which asks the repeater to “load more”) but never managed to get both at once. It’s even managed to display one previous price correctly in the first batch, and all 3 in the second ! Makes no sense…

Here’s the link to it. The repeater is located in the petrol blue box, if you click the “+” button, it will load more. You will see that the previous price of the first batch will switch to its place holder “Prix Ant.”.

https://www.wehaveadeal.net/deals/Jeu-Devil-May-Cry-5-Special-Edition-sur-PS5/1607703677

I actually have a similar issue somewhere else in my website. It really looks like code-formatted text in a repeater and the load more function don’t work well together.

Here is my code :

$w("#repeater2").forEachItem(($w, itemData, index) => {

            $w("#repeater2").onItemReady(() => {

The following code is part of this above bit of code.

 //deals similar to the item
                $w("#dataset4").onReady( () => {

 //shows only items related to the current item and show the box when items have been loaded
                    wixData.query("deals");
 let filter = wixData.filter();
                            filter = filter
                                .hasAll("categorie", $w("#button31").label);
                                $w("#dataset4").setFilter(filter)
                                .then(() => {

 if (current) {
                                            $w("#box47").show();
                                        }
 else {
                                            $w("#box47").hide();
                                        }

                                $w("#repeater8").onItemReady(() => {
                                    $w("#repeater8").forEachItem( () => {

 //sets the price in green if the text is GRATUIT
 if ($w("#text129").text === "GRATUIT") {
                                             $w("#text129").html = `<span style="font-family:arial;font-weight: bold; color:#16B326; font-size:14px">${$w("#text129").text}</span>`;
                                        }

 //strikes through the previous price
                                        $w("#text138").html = `<span style="font-family:arial; color:#535353; text-decoration: line-through;font-size:13px">${$w("#text138").text}</span>`;
 
 //shows the 'updated logo' if the item has been updated (manually)
 let edition3 = $w("#dataset4").getCurrentItem().edite;

 if (edition3) {
                                            $w("#iconeMAJsimilaire").show();
                                        }
 
                                        });
                                    });
                                });

 
 
 
                            }); 

export function button65_click(event, $w) {
    $w("#button65").hide(); 

 
    $w("#repeater8").onItemReady((itemData, index) => {
            $w("#repeater8").forEachItem( () => {
 

 //strikes through the previous price
$w("#text138").html = `<span style="font-family:arial; color:#535353; text-decoration: line-through;font-size:13px">${$w("#text138").text}</span>`;

 //sets the price in green if the text is GRATUIT
 if ($w("#text129").text === "GRATUIT") $w("#text129").html = `<span style="font-family:arial;font-weight: bold; color:#16B326; font-size:14px">${$w("#text129").text}</span>`;

 //shows the 'updated logo' if the item has been updated (manually)
 let edition3 = $w("#dataset4").getCurrentItem().edite;

 if (edition3) {
         $w("#iconeMAJsimilaire").show();
               }           
 
            });
    }); 
}

Any idea? Thanks!

2

up

3

Why are you using forEachItem() with $w? See here how to use forEachItem:
https://www.wix.com/corvid/reference/$w/repeater/foreachitem
and why are you using .forEachItem inside onItemReady ? It doesn’t make sense.

4

@jonatandor35 What do you mean ? Should I remove the first forEachItem ?

5

Ok so I deleted each and every ForEachItem to only leave OnItemReady, tried it and no change.

BUT, I then added $w, itemData, index to the OnItemReady below, and even though the editor says it has already been declared and shows a warning sign, it seems like this is what needed! Weird… but now it works. Thanks!

 $w("#repeater8").onItemReady(($w, itemData, index) => {
 //$w("#repeater8").forEachItem( () => {

 //sets the price in green if the text is GRATUIT
 if ($w("#text129").text === "GRATUIT") {
                                             $w("#text129").html = `<span style="font-family:arial;font-weight: bold; color:#16B326; font-size:14px">${$w("#text129").text}</span>`;
                                        }

 //strikes through the previous price
                                        $w("#text138").html = `<span style="font-family:arial; color:#535353; text-decoration: line-through;font-size:13px">${$w("#text138").text}</span>`;
 
 //shows the 'updated logo' if the item has been updated (manually)
 let edition3 = $w("#dataset4").getCurrentItem().edite;

 if (edition3) {
                                            $w("#iconeMAJsimilaire").show();
                                        }
 
 //});
                                    });
6

It’s a better practice to use something else (not the $w. Let’s say $i);

$w("#repeater8").onItemReady(($i, itemData, index) => {
if ($i("#text129").text === "GRATUIT")

//and the same for all the other items in the repeater.
7

@jonatandor35 why? what’s the difference?