[SOLVED]How to perform a function on just one repeater item?

I’m trying to use forEachItem. however unsuccessful!


MY CODE

In the wix developer console and the viewer worked perfectly! As in the image below.

[help] But in the browser it doesn’t work!

Thank you so much! SAVE THIS BEGINNER!

Read this one → could be useful!
https://www.wix.com/velo/forum/coding-with-velo/onclick-triggering-twice

And please provide your code in a well formated CODE-BLOCK, instead of a pic.
I am to lazy to rewrite/retype all your code :grinning:

Thanks Velo-Ninja !

Don’t let me post on CODE-BLOCK :unamused:

I’ll take a look at the link!! Thank you very much!!

@marianarangelandrade

Try to complete this one… (pay attention onto all the CONSOLE-LOGS) !

$w.onReady(()=> {
    $w('#repeater1').data = SOME_DATA_HERE;

    $w('#repeater1').onItemReady(($item, itemData, index)=>{
        console.log(itemData); console.log(index);    
        
        $item('#btnMore').onClick((event)=>{
            let selected=event.target.label; console.log(selected);           
            
            $item('#box1').show('fade');
            $item('#txtBox').text = (Number($item('#textbox1').text)+1).toString();                 
        });      
    });
});

And do not forget to read the provided link one more time!

1 Like

Hi there,

You should not use the $w.at() inside a repeater scoop, you should only use it with the global selector ($w), so you should either do this:

$w('#clickBtn').onClick(event => {
    const $item = $w.at(event.context);
    if ($item('#container').hidden) {
        $item('#container').show();
    } else {
        $item('#container').hide();
    }
})

Or this:

$w('#repeater').onItemReady(($item, data) => {
    if ($item('#container').hidden) {
        $item('#container').show();
    } else {
        $item('#container').hide();
    }
})

Bot not both methods.
Give it a shot and let me know if it works for you.

1 Like

Hello @Ahmad,

Thanks, both worked in part!

It’s just a problem when I click the button again to add the sum 1 to the value, the button disappears and that’s not cool.

If there is another solution, I’m very grateful.

Thanks @russian-dima ,

I have been reading the documents and the link since this morning.

However, running the line of code you sent me. it worked perfectly in “Wix Viewer”. When I publish the site, it doesn’t work in the browser.

Just like the first problem I had ;(

Thank you very much and if you find something and can help me. Strong hug

It would be good to see your current working (not working) code, so we can look at it to improve it. But i forgot → you surely still won’t be able to post it, if so make a screenshot.

Did you check your DB-Permissions? For testing purposes → set the permissions to the lowest level. Try one more time.

Describe what you are doing and whats happening, or not happening as expected?

1 Like

The logic of the function >>>>>>>>

If the quantity value of the item clicked (buttonSume) is greater than 0
box with (buttonMinus) show() with quantity value (1).

If clicked again, it adds +1 to the amount of the item clicked.

If the quantity value of the item clicked (buttonSume) is less than 1
box with (buttonMinus) hide().

@russian-dima CHECKED THE PERMISSIONS! IT’S ALL RIGHT!

LINK from my WEBSITE partially functioning!

estudiopbp
dot com
dot br
slash testrepeater

I WILL POST SCREENSHOT OF THE CODE HERE. I LEFT A FILE WITH THE CODE ON THE PAGE ABOVE

@russian-dima
I need when quantity >0.
continue displaying the box(boxQty) with the (-) button!

On my WEBSITE LINK you can see it working with the console by push() correctly on the variable.

The only detail now is to leave the boxQty open when the quantity is greater than 0.

estudiopbp
dot com
dot br
slash testrepeater

Just to reinforce. I left the file with the code on the page.

Thank you very much!! Help me!!

I think I understand what you’re trying to do, you want when clicking the (+) sign for the first time, a box with the amount and the (+) and the (-) signs are shown, and when the (-) is clicked and the current amount is 1, hide that box, for that kind of behavior, this code will work, but you need to store the amounts in a separate array as the repeater’s data is read-only.

const amounts = []; // To store the amount of each item.

$w('#cartItems').onItemReady(($item, data) => {
    const $soloPlus = $item('#soloPlus'); // The first plus sign.
    const $gPlus = $item('#groupPlus');
    const $gBox = $item('#groupBox');
    const $gMinus = $item('#gMinus');
    const $amount = $item('#gAmount');
    
    // Code the events handlers
    $soloPlus.onClick(() => {
        updateAmount(data._id); // By adding (1) to the amount in the array
        $amount.value = String(getAmount(data._id)); // Update the visual amount
        $gBox.show(); // Show the box
        $soloPlus.hide(); // Hide the plus sign
    });
    
    $gPlus.onClick(() => {
        updateAmount(data._id); // By adding (1) to the amount in the array
        $amount.value = String(getAmount(data._id)); // Update the visual amount
    });
    
    $gMinus.onClick(() => {
        updateAmount(data._id, 'subtract'); // By subtracting (1);
        const newAmount = getAmount(data._id);
        $amount.value = String(newAmount); // Update the visual amount        
        
        if (newAmount === 0) {
            // If the new amount is 0, do the following
            $soloPlus.show();
            $gBox.hide();
        }        
    })
})

// Helpers functions
function getAmount(id) {
    const index = getIndex(id);
    return index > -1 ? amounts[index]?.amount : 0;
}

function getIndex(id) {
    return amounts.map(items => items.id).indexOf(id);
}

function updateAmount(id, operation) {
    const index = getIndex(id);
    if (index > -1) {
        operation === 'subtract' ? amounts[index].amount-- : amounts[index].amount++
    } else {
        amounts.push({id, amount: operation === 'subtract' ? 0 : 1});
    }
}

Very simple and clean :wink:
Ahmad

1 Like

Ok, i think Ahmad gave you already a good answer.

1 Like

Hi @ahmadnasriya , thanks.

Can you tell me why i can’t get the id?

Can you tell me why i can’t get the id:

Thanks for helping me!

Thanks for helping me! I’ll try Ahmad tip.

const newAmount = getAmount(data._id); console.log("New-Amount: ", newAmount);

@marianarangelandrade sorry it’s a typo, replace it with:

data._id
1 Like

@ahmadnasriya WORKED PERFECTLY

Thank you very much! Guys, you are amazing :wink:
Learning to program with WIX and I’m having so much fun!

@russian-dima Thank you very much! I learned a lot!

1 Like

@marianarangelandrade You’re very welcome :wink: Happy to help you with your learning journey.