Refresh entry button inside entry

[josh-attwood]

Hi there!

We are having some issues occasionally with blitz not refreshing certain pages when saved which I think is just fluky. The main problem is that we then get emails from clients confused as to how to refresh the cache for a particular page. It would be amazing if they could refresh the cache from within an entry through some kind of button in the sidebar, it would definitely save us a lot of hassle!

[bencroker]

This is an interesting idea, but it feels like a detail that non-technical users shouldn’t have to think about. I’d start by exploring why those pages are not refreshed and fix that, which is a more robust and long-term solution. Also, if you really want to allow users to refresh specific cached pages then you already can, via the cache utility.

[pixelmachine]

@josh-attwood obviously Ben is right but I also had a site that I just didn't have time to really dive into in order to figure out why the cache wasn't clearing. Instead I made a quick button like you described.

I added an API key in the Blitz advanced settings, added a tab to the entry type, called Cache, then added a template UI element like this:

<p class="light">NOTE: Save before refreshing!</p>
<a class="btn submit" 
   id="refresh-this-page-cache" 
   href="{{ siteUrl }}actions/blitz/cache/refresh-urls?key=[API_KEY]&urls={{ element.url }}">
   Refresh {{ element.title }}
</a>

{% js %}
let cacheBtn = document.getElementById('refresh-this-page-cache');
let cacheMsg = document.getElementById('notifications');

cacheBtn.addEventListener('click', function(e) {
  e.preventDefault();

  let notification = document.createElement("div");
  notification.className = "notification notice";
  notification.textContent = "Refreshing..."
  cacheMsg.appendChild(notification);

  var request = new XMLHttpRequest();
  request.open('GET', cacheBtn.href, true);

  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      // Success!
      var data = JSON.parse(this.response);
      notification.textContent = data.message
    } else {
      notification.textContent = "There was an error, try again or refresh the cache via Utilities"
    }

    window.setTimeout(function() {
      $(notification).fadeOut();
    }, 5000);
  };

  request.onerror = function() {
    notification.textContent = "There was an error, try again or refresh the cache via Utilities";
    window.setTimeout(function() {
      $(notification).fadeOut();
    }, 5000);
 };

  request.send();
}, false);
{% endjs %}

Hopefully I'll get back to the site to remove this at some point but the client has been using it for a couple of years with no issues. Just watch out for that lazy jQuery fadeOut() and the #notifications element – I haven't tried this on Craft 4 or more recent versions of Blitz so I don't know if they'll still work.

[bencroker]

Thanks for sharing, @pixelmachine.

[bencroker]

@josh-attwood @pixelmachine FYI I’ve opened a PR to address this at #690, feel free to take a look and offer any suggestions.