Hi,
is it possible to use the repeater block for modal popups?
I’ve made a team gallery with a repeater block. Now I would like to have popups for each single team member and therfore I’ve put the modal block inside the repeater block. The problem is that no matter who am I clicking at, in the popup it always shows the information of the first teamember (first ACF repeater entry). I guess it has something todo with the circumstance that it uses because of the repeater always the same modal ID.
Is there any workaround to use a modal popup inside a repeater because of the advantage of just one ACF repeater source.
Thanks a lot for your help!
I think there is a workaround which fits your current setup.
You can take advantage of interactions and dynamic attributes to trigger and display associated team members content from individual team member repeater items inside a single modal outside the repeater.
It’s not that hard, but you need to know how to do it.
It might be possible to load content dynamically at some point. Currently, there are some workarounds which do the job - like the one I mentioned.
Thank you very much for your very helpful hint :)) I’m realy new to cwicly and therefore have to ask a bit more specifically: The workaround is to use just one modal outside the repeater but all repeated team members are linked to that modal. Do I need inside the modal every item duplicated for each team member with a specific visbiliy condition (opend from an object with the specific ACF repeater item)? And if so, how do I call an ACF repeater item outside of a repeater?
Sorry for all the questions, pls. just answer if you realy like to Thanks a lot again!
Greetings
Marc
I think the best way would be to explain it based on an example.
So, I could setup a quick tutorial and demo if you are interested.
More people might actually be interested in this, because it can be used as a blueprint for basically everything related (until dynamic content loading has become available).
In case you have specific requirements for your use case, please let me know.
That would be fantastic! I’ve made a short screen capture of the module and uploaded it with the acf json file as well as the cc txt file here: Nextcloud. Thanks a lot!
Thanks for the additional info and the files @msteinlein, that helps a lot.
I’ll prepare something and update here in the coming days.
Maybe you want to dig a bit deeper by yourself with the following info.
The reason why only the first team member shows up is that the modal is called by the ID, which can’t be set dynamically.
So, no matter which team card you click, it always will target the first modal - that’s why we need to work with a single modal.
The modal is a static block, only the content is dynamic. That’s why for each team member an additional (separate) modal gets added, when placing a the modal inside the repeater.
Placing the modal outside of the repeater and setting up an additional repeater inside of it is the way to go here.
Then, you want to add matching attributes (which you can setup dynamically) to both repeaters(or any other block inside of it, e.g. a button), for instance:
data-team="member-1" member-1 is the value which you want to add via ACF, it’s a unique identifier for each team member
Now, you are able to target the repeater items and display only the one inside of the modal which matches the attribute of the other repeater item you are interacting with.
This requires some additional interaction rules though.
Thank you again for your fantastic help! I’ve done everything as described but struggle now with the last step. How do I target with interaction rules the display settings? I’m realy a cc noob and tried to find it out with the documentation with google and by trying withs out - well I havent fund the answer yet and would be therefore again realy thankful for a hint
Thanks for your encouraging words and glad to see you made some progress as well @msteinlein.
Alright, let’s hop straight into it.
One important thing. Make sure to wrap your modal content inside an extra div and assign the attribute to it, not directly to the repeater block.
The block which is triggering the modal needs to be setup as follows.
Don’t get confused about the 3rd field, I just saved it as a global interaction, that’s way.
Make sure to choose the block class as a selector, not the “current” option.
Here is a live demo I quickly spun up.
You might be interested in this tip as well.
In case something is unclear or does not work out for you, just let me know.
Thanks to @Araminta here as well who helped me out with the interaction logic.
Thank you so much for your incredible help - it works now absolutly fine and I’ve learnd a lot - just wow! As if that wasn’t enough you solved with you additional tip one of the biggest issues of my todo list. Thanks, thanks, thanks!!
Because you are alredy familiar with my setup: I’m not sure if that is a bug or just normal behvior: I’m not able to save the site containing the team module as long as I’ve set a show/hide condition inside a module of the modal repeater. More precisely: I just want to show the contact buttons (inside the modal) if the ACF repeater (e.g. instagram) field is not empty. Pressing the save changes button leads to an infitly loading site. Isn’t it possible to add show/hide conditions for elements inside a repeater?
Happy to hear you were able to replicate the steps and made it work for you.
Thanks again for the sweet words, I really do appreciate
Regarding your issue with the visibility conditions, I can confirm this happens to me as well.
In addition, on front-end, the page shows me a critical error.
I think this definitely shouldn’t happen, so I suggest to contact support or create a bug report here in the forum as a separate thread.
Thanks a lot again!
As if that wasn’t enough you solved with you additional tip one of the biggest issues of my todo list. Thanks, thanks, thanks!! 
