Customizing how an entry is rendered
Out of the box, Statamic will push the temporary version of the entry through its usual render process.
If you have complex requirements – for example, needing to render it through a different frontend – you are able to customize it.
The LocalizedEntry
class has a toLivePreviewResponse
method. You can override this and return whatever you want to be
rendered in Live Preview’s content pane.
See how to override the entry classes.
<?php
namespace App;
use Statamic\Data\Entries\LocalizedEntry as BaseLocalizedEntry;
class LocalizedEntry extends BaseLocalizedEntry
{
public function toLivePreviewResponse($request, $extra)
{
return response('any html');
}
}
The localized entry (eg. $this
) will have any temporary values entered in Live Preview applied as supplemented data.
$this->get('title'); // the original title
$this->getSupplement('title'); // the title as entered in live preview
$array = $this->toArray(); // when converting an entry to an array, the supplemental data overrides the originals
$array['title']; // this would be the title as entered in live preview
The $request
provided to the toLivePreviewResponse
method will be a faked request to either the entry’s absolute
or AMP URL, depending on what the user has selected.
The $extra
parameter will be an array of the values for any additional inputs.
Additional Inputs
You may add extra fields to Live Preview’s header area using custom Vue components. The values of these fields will be available in the cascade.
Define the inputs using an array of key value pairs of field handles and vue component names in config/statamic/live_preview.php
:
'inputs' => [
'show_ads' => 'live-preview-ads',
]
Similar to fieldtypes, this component will be given a value
prop, and expect any changes to emit an input
event.
Statamic.$components.register('live-preview-ads', require('./LivePreviewAds.vue'));
<template>
<div>
<label>
<input type="checkbox"
:value="value"
@input="$emit('input', $event.target.checked)" />
Show Advertisements
</label>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
You can use these values in your views under the live_preview
array:
{{ if live_preview:show_ads }}
<div class="ad"> ... </div>
{{ /if }}
Props
Prop | Description |
---|---|
value |
The value of the input. |
loading |
Whether the live preview contents is being loaded. (eg. when you type) |