Conditional Display using Date + server caching

How To
1

I am using a conditional display logic in Bricks to display a message in the header of a site ONLY if the date is before a certain date. The logic appears to work correctly BUT due to caching (I am using OLS and Cloudflare) the message remains on the site.
It seems like the conditional code should be included even in the cached version but that doesn’t seem to be the case.
As soon as I clear the cache, the logic works correctly.

Any ideas for a solution to this?

image
image1072×366 41 KB

2

You can use JavaScript (or jQuery). First hide it with CSS, then with JS, do “if date less than Sept 20”, show it.

PHP outputs the data no matter what, then the page caches it, which will look the same to every similar viewer.

JavaScript will be executed on each page execution, even if cached
 so that is a quick workaround :+1:

3

here my version with an attribute attached to one block or element. this bypasses the cached version of a page and updates.

  1. Name the element CSS-ID (i.e. mein-text)
  2. Add an attribute to the element (i.e. data-ablaufdatum)
  3. copy this script in settings>custom code> footer scripts
    dont forget the opening ‘<’ in sript tag below (snippet does not show here with correct syntax)
  4. test functionality by change the date to the past. 2025-10-01

script>
document.addEventListener(“DOMContentLoaded”, function() {
const element = document.getElementById(“mein-text”);
if(!element) return;

const aktuellesDatum = new Date();
const ablaufDatum = new Date(element.getAttribute(“data-ablaufdatum”));

if (aktuellesDatum > ablaufDatum) {
element.style.display = “none”;
}
});