CMS Page Drafts and Previews

With the CMS draft feature the shop administrator 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 spryker/cms module to at least 6.2 version. Additional information on how to migrate the spryker/cms module can be found here.
  • If you have 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 here.
  • If you do not have spryker/cms-collector module installed, register your CMS page data expander plugins to 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(),
        ];
    }
}

  • Optionally upgrade spryker/cms-gui module to at least 4.3 version if you want to have access to the Yves preview pages from Administration Interface.

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();
    }

  3. The retrieved CMS data structure should match the Storage's data structure at this point.
  4. You can use your original CMS page rendering twig to display the preview version.
  5. Check out our Demoshop for more detailed examples and ideas regarding the complete Yves integration.

Configuring Yves Preview Page Access From Administration Interface - 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';
    ...

  2. Optionally add "Preview" view button group item to "List of CMS pages" in the Administration Interface 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(),
       ];
    }
}

  3. Optionally add "Preview" action button to "Edit Placeholders" in the Administration Interface 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.

 

See also:

 

Last review date: Sep. 22nd, 2017