Bricks 1.9.4 added AJAX support for Popups via its Popup Builder.
popupContextId can be now set in bricksOpenPopup() which means a popup can be set to show dynamic data from any post with the specified ID.
This Pro tutorial provides the steps for setting up a dynamic Popup that opens on page load and shows data like Post Title and Post Excerpt pertaining to the post whose ID is passed in the id URL parameter.
Ex.: example.com/?id=103 will show a popup having featured image, post title, excerpt and a button linking to the permalink of the post whose ID is 103.
example.com/?id=106 will show a popup having featured image, post title, excerpt and a button linking to the permalink of the post whose ID is 106 and so on.
Step 1
Go to Bricks → Templates and import the following “Post Popup” template.
Observe the structure and make any desired changes.
The close SVG button should have this interaction on it:
Click on Settings (gear icon) → TEMPLATE SETTINGS → POPUP.
Ensure that “Fetch content via AJAX” is on.
Set your desired AJAX LOADER Animation. In our demo, we set it to “Spinner”. This appears before the content finishes loading.
Under CONDITIONS set where the popup should appear. It could be Entire website or a specific Page or a view like all single posts of a specific post type.
If you want this to work on your site’s homepage, select Individual and then the Page set as your site’s front page at Settings → Reading.
Go to Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE.
Under Custom CSS, add
.brx-popup-content {
position: relative;
}Step 2
Edit the Page/template (with Bricks) where you’d like the Post Popup to well, pop up.
Go to Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE.
Under Body (footer) scripts, paste:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Obtain the 'id' parameter value from the URL
const urlParams = new URLSearchParams(window.location.search);
const popupContextId = urlParams.get('id');
// Check if 'id' parameter is present before running the function
if (popupContextId) {
// To open the popup with ID 492 (set to fetch content via AJAX) with a context of the post ID from URL parameter 'id'
bricksOpenPopup(
492,
0,
{
popupContextId: popupContextId,
popupContextType: 'post'
}
);
}
});
</script>Replace 492 with the ID of your Popup from the previous step.