Button click counter in a repeater

Ask the community
,
1

I’ve got a repeater that displays multiple products. Each product item has a button that goes to another webpage.

I want to have a counter under each product item’s button that counts the number of times the button has been clicked, similar to your typical “likes” button on Facebook etc.

The pseudocode I’ve got is:

  1. Create a ‘Number’ type field in the repeater dataset e.g. called “count”

  2. Upon website initialisation, set each repeater product item click counter text to its “count” field using getItemReady()

However, I’m having trouble figuring out how to do the following things:

  1. Update a specific item’s counter when that item’s button is clicked (how do you access a specific item in a repeater, depending on which item button was clicked?)

  2. How do you save the total clicks from one session back to the dataset, such that if the user refreshes the webpage, the total clicks from the previous session is still there? The updated # of clicks should also be shown for other users.

2

The pseudocode I’ve got is:

Pseudocode?

This is more a pseude-description than a pseudocode.
Like it seems you have nothing done already by your own.

Normaly i would say now go and use the SEARCH-BAR which surely would help you out, but i don’t be that hard.

Everytime when you hear → REPEATER, the first thing you should thing about is ------------> $item and the difference to —> $w.

The standard pseudocode for a REPEATER is…

$w.onReady(()=>{
  $w('#forExampleRepeater1').onItemReady(($item, itemData, index)=>{
    $item('#myButtonIDinsideRepeater').onClick((event)=>{
      console.log(event.target.id+"-clicked!");

    });
  });
});

Place it on your page where your repeater is at.
Modify all the IDs of your used elements (‘#repeater1’, "#button333’, or what ever your elemnt’s IDs are.

Test the code and look onto CONSOLE for results, what do you see ?

It’s not the best solution, but for sure the fastest one.