Working with Repeater Children

Ask the community
, ,
1

I am creating a product list page that shows the products in a specific collection (from a button click on the home page). I have the data and repeater set up (finally) and am now working on the hover effects for each container in the repeater (button show on hover).

I tried using the containers HOVER functionality, but whenever you drag a button onto the HOVER panel it disappears (leaving a very faint outline when you hover over it in the editor). Once on the hover panel, you cannot gain reference to it in the editor to set any of the styles. And the only way you can attach it to the data source is by going through the repeaters data source and finding it on the list. Not sure if this is by design or a bug, but if I cannot set any of the styles then the HOVER option is out.

So I decided to use the mouse over event on the container, then just set the visibility on the button (to show on mouse over, hide on mouse out). But I can’t seem to get a reference to the containers button using the event.target, and I’m just pulling my hair out… how a simple thing can be so difficult!

Any help would be appreciated!

2

I don’t think I understood the question.
But to make a onMouseIn event for repeater item, it is something like:

$w.onReady(() => {
$w('#repeaterContainer1').onMouseIn(event => {
const $item = $w.at(event.context); 
$item('#repeaterButton1').show();//for example
})
})

I don;t know if that can help or not.

3

That’s exactly what I was trying to do. I’ll give it a try

Thank you!