CMS Page Drafts and Previews

Last updated:
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 the spryker/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 the spryker/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 the spryker/cms module in the CmsDependencyProvider 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(),
        ];
    }
}

Usage in Yves

  1. Create a controller action for preview pages in Yves.
  2. 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();
    }
  1. The retrieved CMS data structure should match the Storage’s data structure at this point.
  2. You can use your original CMS page rendering twig to display the preview version.
  3. 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

  1. 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';
    ...
  1. 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(),
       ];
    }
}
  1. 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.