how to change bgcolor of non selected box, in repeater

Ask the community
,
1

here is the code snippet for reference

function relatedItemReady($w, product, index) {
  
    let indexStr = index.toString(); 
    if (indexStr === "3") 
    {
        selectedRecord = $w("#box1");
        selectedRecord.style.backgroundColor = "#2DCEE0"; 
//highlight newly selected one ,2sept replaced it from ffffff
    }

    productSelectedId = product._id;
        $w("#productDesc").html = "<center>" + product.description + "</center>";

        $w('#container3').onClick((event) => { 
                $w("#txtProPrice").text = product.formattedPrice;
        if (product.description === "<p>monthly</p>") {         
            //added on 2 sept ,only selected record should be white, rest all blue
            selectedRecord = $w("#box1");
            selectedRecord.style.backgroundColor = "#2DCEE0"; //highlight newly selected one
            //added on 2 sept
            $w('#line35').show();
            $w('#line33').hide();
            $w('#line32').hide();
            $w('#line31').hide();
        }

        if (product.description === "<p>3 months</p>") {            

            //added on 2 sept ,only selected record should be white, rest all blue
            selectedRecord = $w("#box1");
            selectedRecord.style.backgroundColor = "#2DCEE0"; //highlight newly selected one
            //added on 2 sept
            $w('#line35').hide();
            $w('#line33').show();
            $w('#line32').hide();
            $w('#line31').hide();

        }

        if (product.description === "<p>6 months</p>") {
          
            //added on 2 sept ,only selected record should be white, rest all blue
            selectedRecord = $w("#box1");
            selectedRecord.style.backgroundColor = "#2DCEE0"; //highlight newly selected one
            //added on 2 sept
             $w('#line35').hide();
            $w('#line33').hide();
            $w('#line32').show();
            $w('#line31').hide();
        }

        if (product.description === "<p>12 months</p>") {
            
            //added on 2 sept ,only selected record should be white, rest all blue
            selectedRecord = $w("#box1");
            selectedRecord.style.backgroundColor = "#2DCEE0"; //highlight newly selected one
            //added on 2 sept   
            $w('#line35').hide();
            $w('#line33').hide();
            $w('#line32').hide();
            $w('#line31').show();

        }

        productLink = product.productPageUrl;

        
    });
}

813×361 15.8 KB

2

This should be your standard-code, when working with REPEATERS…

$w.onReady(()=>{
$w(REPEATER).onItemReady(($item, itemData, index)=>{
console.log($item);
console.log(itemData);
console.log(index);
});
});

Then you put simply an onClick event-handler into the onItemReady-part…

$w.onReady(()=>{

$w(REPEATER).onItemReady(($item, itemData, index)=>{
console.log($item);
console.log(itemData);
console.log(index);
$item(‘#buttonX’).onClick(()=>{
$item(‘#buttonX’).label=‘selected’
console.log(index);
});
});
});

When you have understood this one, you will be able to solve your issue.

And at least, here comes the trick…
If you now use —> $item, you will be able to modify just the current selected item.
But if you use → $w(), you will modify all items.

To be more precise…
You change all CONTAINER-BOXES to yellow, but especialy one CONTAINER you give a green-color…

$w(container).color–> yellow
$item(container)–> green

First all containers becones yellow, but only one changes emmidiately to green.

3

Thanx so much for details…I’ll give a try and will update

4

And if it does not work directly → you will have first to INSERT/ADD a box onto a container, fit the size of the box to the size of repeater-container and then change the color of the box. I can’t remember anymore, if the container has —> style.background -properties.

5

Its working on a test repeater however failing on my custom product store repeater…due to complex custom product logic…will work on it…

meanwhile, here is the code which is working .
pls: container doesnt have color change property.
I used box and its working smooth as silk :slight_smile:

$w.onReady(function () {
$w(‘#repeater1’).onItemReady(($item, itemData, index) => {
// console.log($item);
// console.log(itemData);
// console.log(index);

    $item('#box1').onClick(() => {

        $w('#box1').style.backgroundColor = '#CCCCCC';
        $item('#box1').style.backgroundColor = '#DCBDDC';
        console.log("selected index" + index);

    });

});

});

6

well! in my store implementation, moment I replace $w to $item, my repeater doesn’t read values from dataset like it was doing for $w

function relatedItemReady ( $w , product , index ) {
to
function relatedItemReady ( $item , product , index ) {

even color change doesnt work …u may try this:
enter Store>Choose your subscription>choose repeater color