Bricks Builder integrated the lightbox effect with the Popup Builder feature. But it does 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 set up the settings from the builder editor.
Note: Here I am just giving the example with the product post type. But you can use it for any post type and display the ACF/Metabox data also.
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 display the static content or data of the same page on the popup, then you do not need the Query loop builder. If you display the dynamic data, you will add the query loop builder and make a demo structure for your live popup content.
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 choose 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 product 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
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 fetch the data from a specific post, you will manually enter that post ID here.
All settings are done. Now open the page on the browser and test it.