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

Ask the community
,
12

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