Did you know that Bricks has AJAX loading on-click for query loop posts out of the box?
This article shows how AJAX Load more functionality can be configured in Bricks.
Step 1
Edit your Page/template with Bricks.
Copy and paste the fully built Section of the above demo using this JSON.
Note: A few ACSS utility classes and variables are used.
A click Interaction has been set on the Button like this:
Select your query loop-enabled element’s label or ID in the Query control.
This is how the loading animation is made to appear inside the AJAX Loader div (below the button):
Step 2 (only if using ACSS)
Add this global CSS:
a[class*="btn--"].brx-load-more-hidden {
display: none;
}If you have Advanced Themer, you could do it right from within the builder.
That’s it. Save and check on the front end.
Reference
https://community.automaticcss.com/c/bricks/acss-overriding-brx-load-more-hidden-s-css
6 comments
Benjamin Ogg
Absolutely brilliant! Thank you so much for this!
eins walter
Acss btn-- thing is great!!
Does load-more work only with Bricks builder loop? Or Jetengine query in Bricks Builder too?
Sridhar Katakam
Yes.
I do not know if AJAX Loader works though. I've just sent a support email to Bricks about it.
But having a button to load more posts and adding an interaction like I wrote in this tutorial works just fine.
Benjamin Ogg
Dear Sridhar, This function is truly awesome. I have a UX improvement suggestion. Use Case:
Desired scenario: Currently, they have to start over and «retrieve» all posts again. Ideally, they could continue where they left off. Is this possible? Cheers, Benjamin
Benjamin Ogg
Dear Sridhar, I just saw, that here in BricksLabs you have implemented this. When I scroll down on the archive page more posts are loaded. Navigating to a post in same window and then return to the archive by browser back button brings me back where I left. Awesome! That's exactly what I would love to have for this solution here too. Is that possible? Cheers, Benjamin
Tom Homer
Hi Sridhar,
I am wondering the same thing. To make Load More accessible it needs the following:
Update Live Region: After loading new content, it's important to update a live region (using aria-live="polite") to inform users of the updated content, especially for screen reader users.
Manual Focus: When new content loads, focus should be moved to the first interactive element in the new set of items, making it easier for users to navigate.
Which Bricks native Load More doesn't do. WP GridBuilder does add the aria-live="polite" but doesn't do the manual focus.