I'm using a wagtail as a headless CMS. I want to enable users of this CMS to easily see the preview of the page on a SPA. I've overridden APIs to expose draft pages with help of token.
The only part I'm stuck at is modifying the URL in the Preview button to redirect to the SPA so that they can hit the API, get the data and render the page.
Is there any way I can override the URL of the preview button or just be able to add another action to see preview of the page on a SPA?
pip install wagtail-headless-preview
HEADLESS_PREVIEW_CLIENT_URLS = {
'default': 'http://localhost:8020/',
}
Add HeadlessPreviewMixin to your page class:
from wagtail_headless_preview.models import HeadlessPreviewMixin
class MyWonderfulPage(HeadlessPreviewMixin, Page):
pass
Try using Ajax for something like this:
function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);~}
wagtail-headless-preview is designed to solve this exact problem: