Hello everyone,
I am trying to solve a problem related to loading a part of a page with randomly generated content. More and more often, I receive requests from clients to display randomized data in certain sections of a page – most commonly loops of projects, references, logos, images, hints, etc. Unfortunately, most projects are currently running behind Cloudflare and/or local cache plugins. In this setup, the only realistic option is to use AJAX for the random data and generate it using custom PHP, otherwise the output gets cached.
It occurred to me to use a template in Bricks (Bricks → Templates, Type: Section) and load it via AJAX. In this template, I could use the same visuals that are already used in the system. This would save a huge amount of time, and at the same time the client could manage the template themselves in the visual editor.
Unfortunately, I ran into what seems to be a fundamental limitation: when a Bricks template is loaded this way via AJAX, Bricks completely blocks the CSS of that template. The content itself is generated correctly and transferred to the target location without any issues, but none of the visual styling is applied, including background images of elements, etc.
When I insert the template shortcode directly into the test page ([bricks_template id=“123”]) just for testing purposes, the CSS is loaded. However, it is not loaded in a configuration suitable for randomized data – for example, background images are taken from the cached, fixed shortcode output. Even if the shortcode is set to display:none, this approach is practically unusable, and the content is duplicated in the page (even if hidden). For the same reason, global styles are often unusable as well.
So the question is:
Is it possible to achieve a setup where, when a template is loaded via AJAX, the visual styling is generated together with the HTML and can be injected into the target page as well?
Of course, it is also possible that I have misunderstood the intended workflow and that I am approaching this in a completely wrong way, and that there is a much simpler and more functional solution.
Current implementation
functions.php / custom plugin:
add_action(‘rest_api_init’, function () {
register_rest_route(‘custom/v1’, ‘/bricks-template’, [
‘methods’ => ‘GET’,
‘callback’ => ‘ajax_bricks_template_raw’,
‘permission_callback’ => ‘__return_true’,
]);
});
function ajax_bricks_template_raw() {
nocache_headers();
header(‘Cache-Control: no-store, no-cache, must-revalidate, max-age=0’);
header(‘Content-Type: text/html; charset=UTF-8’);
echo do_shortcode('[bricks_template id="123"]');
exit;
}
AJAX on the target page:
<div id="ajax-bricks-template"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
fetch("/wp-json/custom/v1/bricks-template", { cache: "no-store" })
.then(r => r.text())
.then(html => {
document.getElementById("ajax-bricks-template").innerHTML = html;
});
});
</script>
Thanks in advance for any help or for pointing me in the right direction.
