CMS Page Drafts and Previews
Edit on GitHub
You are browsing a previous version of the document. The latest version is Code releases 05.20.
With the CMS draft feature the Back Office user can create drafts of CMS pages without affecting the current live version of the page. It is possible to preview draft version of content before publishing it to see how the page will look like when it is live. This article will tell you how to enable the preview draft page feature.
Prerequisites
- Upgrade the
spryker/cms
module to at least 6.2 version. Additional information on how to migrate thespryker/cms
module can be found in Migration Guide - CMS. - If you have the
spryker/cms-collector
module installed, upgrade it to at least 2.0 version. Additional information on how to migrate thespryker/cms-collector
module can be found in Migration Guide - CMS Collector. - If you do not have the
spryker/cms-collector
module installed, register your CMS page data expander plugins to thespryker/cms
module in theCmsDependencyProvider
dependency provider.
Example of CMS page data expander plugin registration:
<?php
namespace Pyz\Zed\Cms;
use Spryker\Zed\Cms\CmsDependencyProvider as SprykerCmsDependencyProvider;
use Spryker\Zed\CmsContentWidget\Communication\Plugin\CmsPageDataExpander\CmsPageParameterMapExpanderPlugin;
class CmsDependencyProvider extends SprykerCmsDependencyProvider
{
/**
* @return \Spryker\Zed\Cms\Dependency\Plugin\CmsPageDataExpanderPluginInterface[]
*/
protected function getCmsPageDataExpanderPlugins()
{
return [
new CmsPageParameterMapExpanderPlugin(),
];
}
}
- Optionally, upgrade the
spryker/cms-gui
module to at least 4.3 version if you want to have access to the Yves preview pages from the Back Office.
Usage in Yves
- Create a controller action for preview pages in Yves.
- Use
CmsClientInterface::getFlattenedLocaleCmsPageData
to retrieve the flattened draft data for a specific locale.
Example of data retrieval:
<?php
/**
* @param int $idCmsPage
*
* @return array
*/
protected function getFlattenedLocaleCmsPageData($idCmsPage)
{
$localeCmsPageDataRequestTransfer = $this->getClient()->getFlattenedLocaleCmsPageData(
(new FlattenedLocaleCmsPageDataRequestTransfer())
->setIdCmsPage($idCmsPage)
->setLocale((new LocaleTransfer())->setLocaleName($this->getLocale()))
);
return $localeCmsPageDataRequestTransfer->getFlattenedLocaleCmsPageData();
}
- The retrieved CMS data structure should match the Storage’s data structure at this point.
- You can use your original CMS page rendering twig to display the preview version.
- Check out our Demoshop for more detailed examples and ideas regarding the complete Yves integration.
Configuring Yves Preview Page Access from the Back Office - Optional
- Define the Yves preview page URI in configuration with a numeric sprintf placeholder which stands for the CMS page id.
Example of preview page URI registration:
<?php
config_default.php
...
$config[CmsGuiConstants::CMS_PAGE_PREVIEW_URI] = '/en/cms/preview/%d';
...
- Optionally add the Preview button group item to the “List of CMS pages” in the Back Office by registering the
CmsPageTableExpanderPlugin
plugin to access the preview page.
Example of page table expander plugin registration:
<?php
namespace Pyz\Zed\CmsGui;
use Spryker\Zed\CmsGui\CmsGuiDependencyProvider as SprykerCmsGuiDependencyProvider;
use Spryker\Zed\CmsGui\Communication\Plugin\CmsPageTableExpanderPlugin;
class CmsGuiDependencyProvider extends SprykerCmsGuiDependencyProvider
{
/**
* @return \Spryker\Zed\CmsGui\Dependency\Plugin\CmsPageTableExpanderPluginInterface[]
*/
protected function getCmsPageTableExpanderPlugins()
{
return [
new CmsPageTableExpanderPlugin(),
];
}
}
- Optionally add the Preview action button to the Edit Placeholders in the Back Office by registering the
CreateGlossaryExpanderPlugin
plugin to access the preview page.
Example of glossary expander plugin registration:
<?php
namespace Pyz\Zed\CmsGui;
use Spryker\Zed\CmsGui\CmsGuiDependencyProvider as SprykerCmsGuiDependencyProvider;
use Spryker\Zed\CmsGui\Communication\Plugin\CreateGlossaryExpanderPlugin;
class CmsGuiDependencyProvider extends SprykerCmsGuiDependencyProvider
{
/**
* @return \Spryker\Zed\CmsGui\Dependency\Plugin\CreateGlossaryExpanderPluginInterface[]
*/
protected function getCreateGlossaryExpanderPlugins()
{
return [
new CreateGlossaryExpanderPlugin(),
];
}
}
Restricting Access to Preview Page
You can restrict customer access to the preview page by installing and configuring spryker/customer-user-connector
module.
Thank you!
For submitting the form