Premium add-on for Bricks Builder

Sync AJAX Action with the Bricks Native Popup Builder

Preview of Popup

Bricks Builder integrated the lightbox effect with the Popup builder feature. But it has not AJAX option. If your site has a long listing page and you added the lightbox option via native popup builder, your page size is growing big and increasing the DOM size. We can avoid it with AJAX. Because AJAX is fetching the dynamic data from your server without any page refresh. Therefore, your page will load quickly.

BricksUltimate, a 3rd party add-on of the bricks builder added this feature and you can easily setup the settings from the builder editor.

Note: Here I am just giving the example with the products post type. But you can use it for any post type and display the ACF/Metabox data also.

AJAX Popup Addon


Non-BricksUltimate add-on users can also get this functionality by clicking on the Buy Now button. After purchasing the plugin, you will download the zip file from this site. Next, you will login to your dashboard, go to plugins->add new ->upload the plugins page, and upload the zip file. Activate the plugin and follow the bottom instructions.

Step 1: At first you will create the popup builder template from your dashboard.

  • Login to your dashboard
  • Click on the Bricks -> Templates link
  • Create a popup builder template

If you will display the static content or data of the same page on the popup, then you do not need the Query loop builder. If you will display the dynamic data, you will add the query loop builder and make a demo structure for your live popup content.

Popup Template

If you look at the above image, you can see that I created a popup template for the quick view content. Here I added the container and enabled the Query loop builder. I am just fetching the one post, so I set the “Posts per page” option = 1. Next, I added the nested elements inside the loop builder and created the quick view layout for my product listing page.

Later you will adjust the Popup Condition settings. Here I want it for a page, so I select “Individual” and chose my page name from the list. Therefore, this popup layout will load on that page only, not the entire website.

Step 2: After completing the popup template, we should open the page on the builder editor(where you are adding the popup template). You will create the layout as per your site design. Here I created the products listing and added a quick view button. I shall sync this button action with the quick view popup builder template.

  • Select the button element
  • Click on the interaction icon
  • Make an interaction like the bottom image
Interaction Settings
Interaction Settings

Step 3: After this, we shall enable the AJAX Popup action. Select the element where you added the interaction option with your popup template. In this demo, it is the Quick View button element. selected it and clicked on the Style tab. There would be the new section “AJAX Popup”. Select it and enable the AJAX option.

  • Select that element ( here Quick View button element)
  • Click on the Style tab
  • You will find the AJAX Popup” section
  • Select it and Enable the AJAX action option.
  • Set the fetching post ID. If you make a list with the query loop builder, you will add the dynamic post id tag. If you will fetch the data from a specific post, you will manually enter that post ID here.
AJAX Popup Controls

All settings are done. Now open the page on the browser and test it.

AJAX Popup Addon


Non-BricksUltimate add-on users can also get this functionality by clicking on the Buy Now button. After purchasing the plugin, you will download the zip file from this site. Next, you will login to your dashboard, go to plugins->add new ->upload the plugins page, and upload the zip file. Activate the plugin and follow the bottom instructions.

Fills In: 

Leave the first comment

Search Tutorials

Request TutorialsFeatures Request