How can I bind a pop-up to a button using dynamic data?

How To
1

I’d like to have a select menu in ACF with two different pop-ups for a button.

Example:

  1. Book a demo
  2. Get a proposal

When 1 is selected in ACF, after clicking the button it should display the “Book a demo” pop-up, but when 2 is selected, clicking the button should trigger the pop-up template “Get a proposal”.

How could I achieve this?

2

Hey Dennis,

I’d just create two buttons with their own interaction and show / hide them conditionally. In the conditions you can just check for the ACF field’s value.

Best,

André

1 Like
3

Thank you for your reply, André, but unfortunately, I have more than 2 options for the popup. So adding 6 different buttons for every button doesn’t seem like a good option.

If it were possible to dynamically assign classes or something similar, it would be best.

4

Hey Dennis,

in this case you could just ignore interactions and do the following instead:

1. Prepare the options in the ACF select field in the following format:

POPUP ID : POPUP NAME

Example:

123 : A Popup
456 : Another Popup
...
...

2. Add a custom attribute to your button element with the custom ACF field as the value:

CleanShot 2023-07-12 at 08.49.14

3. Create a small JS snippet (as described in the academy) to open the popup:

document.querySelectorAll('[data-open-popup]').forEach( (el) => {
    el.addEventListener('click', () => {
		bricksOpenPopup(el.dataset.openPopup)
	})
})

Let me know if it helps.

Best,

André

2 Likes
5

That is precisely what I was looking for; thanks!