Setting repeater images dynamically

Ask the community
, ,
1

I am creating a reviews repeater for my site and would like to render star ratings dynamically for each review. I have the following code, but it is not working properly:

$w.onReady(function () {
    let filledStar = "https://static.wixstatic.com/media/7c6ee8_6e35ae4a9b5241948a86c5813efd3fb9~mv2.png"
    let halfEmptyStar = "https://static.wixstatic.com/media/7c6ee8_e4fee076d1304f5b91de6f1d10981cbc~mv2.png"
    let emptyStar = "https://static.wixstatic.com/media/7c6ee8_89181c38f38f49698d78c6e1fe1363dd~mv2.png"
    $w("#dataset1").onReady(() => {
        $w("#repeater1").onItemReady(($item, itemData, index) => {
        let rating = itemData.rating
        console.log("rating", rating > 3)

        if(rating < 0.5) {
            $w("#image24").src = emptyStar
            $w("#image25").src = emptyStar
            $w("#image26").src = emptyStar
            $w("#image28").src = emptyStar
            $w("#image27").src = emptyStar
        } else if (rating < 1) {
            $w("#image24").src = halfEmptyStar
            $w("#image25").src = emptyStar
            $w("#image26").src = emptyStar
            $w("#image28").src = emptyStar
            $w("#image27").src = emptyStar
        } else if (rating < 1.5) {
            $w("#image24").src = filledStar
            $w("#image25").src = emptyStar
            $w("#image26").src = emptyStar
            $w("#image28").src = emptyStar
            $w("#image27").src = emptyStar
        } else if (rating < 2) {
            $w("#image24").src = filledStar
            $w("#image25").src = halfEmptyStar
            $w("#image26").src = emptyStar
            $w("#image28").src = emptyStar
            $w("#image27").src = emptyStar
        } else if (rating < 2.5) {
            $w("#image24").src = filledStar
            $w("#image25").src = filledStar
            $w("#image26").src = emptyStar
            $w("#image28").src = emptyStar
            $w("#image27").src = emptyStar
        } else if (rating < 3) {
            $w("#image24").src = filledStar
            $w("#image25").src = filledStar
            $w("#image26").src = halfEmptyStar
            $w("#image28").src = emptyStar
            $w("#image27").src = emptyStar
        } else if (rating < 3.5) {
            $w("#image24").src = filledStar
            $w("#image25").src = filledStar
            $w("#image26").src = filledStar
            $w("#image28").src = emptyStar
            $w("#image27").src = emptyStar
        } else if (rating < 4) {
            $w("#image24").src = filledStar
            $w("#image25").src = filledStar
            $w("#image26").src = filledStar
            $w("#image28").src = halfEmptyStar
            $w("#image27").src = emptyStar
        } else if (rating < 4.5) {
            $w("#image24").src = filledStar
            $w("#image25").src = filledStar
            $w("#image26").src = filledStar
            $w("#image28").src = filledStar
            $w("#image27").src = emptyStar
        } else if (rating < 5) {
            $w("#image24").src = filledStar
            $w("#image25").src = filledStar
            $w("#image26").src = filledStar
            $w("#image28").src = filledStar
            $w("#image27").src = halfEmptyStar
        } else if (rating >= 5) {
            $w("#image24").src = filledStar
            $w("#image25").src = filledStar
            $w("#image26").src = filledStar
            $w("#image28").src = filledStar
            $w("#image27").src = filledStar
        }
        ///////// This does not work for some reason ////////
        // $w("#image24").src = rating >= 1 ? filledStar : rating >= 0.5 ? halfEmptyStar : emptyStar  
        // $w("#image25").src = rating >= 2 ? filledStar : rating >= 1.5 ? halfEmptyStar : emptyStar
        // $w("#image26").src = rating >= 3 ? filledStar : rating >= 2.5 ? halfEmptyStar : emptyStar
        // $w("#image28").src = rating >= 4 ? filledStar : rating >= 3.5 ? halfEmptyStar : emptyStar
        // $w("#image27").src = rating >= 5 ? filledStar : rating >= 4.5 ? halfEmptyStar : emptyStar
    }) 
    })
    
});

Both the long if else statement and the turnary statements always just render 5 filled stars no matter what the rating is.

A few notes for clarification:

  1. the repeater is hooked up to the dataset but the 5 images in question are not hooked up to any data fields in the database. This is because I want to set them dynamically
  2. the rating is stored as a floating point number (i.e. 3.5)
  3. the default image for all 5 images is a filled star (exactly what is showing up)
  4. The console.log statement shows the correct information logged to the console (I.E. true if rating is greater than 3; false if it is less)
  5. if I manually set an image to a different value it is rendered correctly (I.E. $w(“#image24”).src = emptyStar)
2

Hi. Few comments:

  1. If you do it inside dataset.onReady, you should use reapter.forEachItem and not repeater.onItemReady.

  2. You should also specify the smaller than, not only greater than.

  3. You used $w instead of $item.

Something like:

///...
$w("#dataset1").onReady(() => {
        $w("#repeater1").forEachItem(($i, itemData) => {
        let {rating} = itemData;
   switch(true){
      case rating < 0.5:
            $i("#image24").src = emptyStar
            $i("#image25").src = emptyStar;
            $i("#image26").src = emptyStar;
            $i("#image28").src = emptyStar;
            $i("#image27").src = emptyStar;
            break;
      case rating >= 0.5 && rating < 1:
 	      $i("#image25").src = halfEmptyStar;
            $i("#image26").src = emptyStar;
            $i("#image28").src = emptyStar;
            $i("#image27").src = emptyStar;
            break;
      //continue
   }
})
3

P.S you can make it shorter if you used some looping (or forEach method). Or if you set some rules to assign the images by.

4

@jonatandor35 Thank you. That worked perfectly.