Popup builder: using dynamic data from query loop

How To
1

I know we just get the Popup builder, but… I have the following scenario: query loop with data for stores. I would like to open the popup with the map for each store. Is there a way to “send” the address to the popup? Thanks.

1 Like
2

Hi @tole011,

Are you stores coming from a CPT of your own or from an ecommerce plugin? If a plugin, specify which one?

Have a great day,
Thomas

3

JetEngine Custom Post Type.

4

if it helps, BricksExtras has this built in. It’s different to Bricks’ Popup, as the modal element can be placed inside of a query loop and the content be populated with dynamic data, for exactly this purpose.

2 Likes
5

Thanks for the info. I’ll try to find a solution without addons and plugins.

1 Like
6

Hey @tole011 did you ever find a solution?

7

Yes. You can find more info here: Popup Builder – Bricks Academy (bricksbuilder.io)

8

Didn’t really get how to do that from this link, can you point me more clearly on how to achieve this?

Thanks!

9

In case someone else will wonder this. You need to add the template and select that template to be a popup that you have created.

This is the part you need - Popup Builder – Bricks Academy.

10

image

11

Any news about that? anyway to populate dynamic data in query loop popup?

12

Solution:

  • Using JetEngine create a listing grid for the Post Type (say “Events”)
  • Create a Popup using Bricks Page Builder and add the listing Grid widget
  • choose the listing gird you created before with 1 Column, Posts Number 1
  • Adjust the Popup setting
  • That is all.

I am not sure it is the right way but it is working with me.

Regards
Mohamed

13

I’m amazed how easy this was! I love Bricks so much :sob:
Just putting down steps here for anyone not as jargon-savvy (like me)

  1. Make a new Bricks template, set the template type to “Popup”.
  2. Make sure your popup fetches data via Ajax as per Gabrielle’s screenshot above.
  3. Insert whatever elements/data you want into your popup, including the dynamic data you want pulled from the query loop item that will be triggering this popup (ie: {post_title})
  4. In your query loop item, insert a “Template” element. Set that template element’s source as your Popup. Once you select your popup template as the source, it will disappear from the front-end whilst still showing in your structure panel. Make sure it’s on the same structure level as the item that will trigger your popup.
  5. Set an interaction on the element inside your query loop item that will trigger the popup, to “show” the pop-up on click.
2 Likes