Integrate CMS block widgets

Last updated:
Edit on GitHub

This document describes how to enable CMS block widget in a Spryker project.

CMS block widgets are outdated. We recommend using slots which are part of the CMS feature. For integration instructions, see Install the CMS feature

Prerequisites

Install the necessary features before beginning the integration step.

NAME VERSION
CMS 202404.0

1) Install the required modules

Install the required modules using Composer:

composer require spryker/cms-content-widget-cms-block-connector:"^1.0.0" --update-with-dependencie
Verification

Make sure that the following modules have been installed:

MODULE EXPECTED DIRECTORY
CmsContentWidgetCmsBlockConnector vendor/spryker/cms-content-widget-cms-block-connector

2) Set up configuration

Set up the following configuration:

src/Pyz/Zed/CmsContentWidget/CmsContentWidgetConfig.php

<?php

namespace Pyz\Zed\CmsContentWidget;

use Spryker\Shared\CmsContentWidgetCmsBlockConnector\ContentWidgetConfigurationProvider\CmsContentWidgetCmsBlockConnectorConfigurationProvider;
use Spryker\Zed\CmsContentWidget\CmsContentWidgetConfig as SprykerCmsContentConfig;

class CmsContentWidgetConfig extends SprykerCmsContentConfig
{
	/**
	* {@inheritdoc}
	*
	* @return array|\Spryker\Shared\CmsContentWidget\Dependency\CmsContentWidgetConfigurationProviderInterface[]
	*/
	public function getCmsContentWidgetConfigurationProviders()
	{
		return [
			CmsContentWidgetCmsBlockConnectorConfigurationProvider::FUNCTION_NAME => new CmsContentWidgetCmsBlockConnectorConfigurationProvider(),
		];
}
Verification

Make sure that the cms_block option is displayed in the Back Office:

  1. Go to Content > Blocks
  2. Select Edit Placeholder next to a block.
  3. Check that, in the widget drop-down menu, the cms_block option is displayed.

3) Set up widgets

Add the following plugin to your project:

PLUGIN SPECIFICATION PREREQUISITES NAMESPACE
CmsBlockContentWidgetPlugin Creates a new widget for editing CMS Blocks. None Spryker\Yves\CmsContentWidgetCmsBlockConnector\Plugin

src/Pyz/Yves/CmsContentWidget/CmsContentWidgetDependencyProvider.php

<?php

namespace Pyz\Yves\CmsContentWidget;

use Spryker\Shared\CmsContentWidgetCmsBlockConnector\ContentWidgetConfigurationProvider\CmsContentWidgetCmsBlockConnectorConfigurationProvider;
use Spryker\Yves\CmsContentWidget\CmsContentWidgetDependencyProvider as SprykerCmsContentWidgetDependencyProvider;
use Spryker\Yves\CmsContentWidgetCmsBlockConnector\Plugin\CmsContentWidget\CmsBlockContentWidgetPlugin;

class CmsContentWidgetDependencyProvider extends SprykerCmsContentWidgetDependencyProvider
{
	/**
	* {@inheritdoc}
	*
	* @return \Spryker\Yves\CmsContentWidget\Dependency\CmsContentWidgetPluginInterface[]
	*/
	public function getCmsContentWidgetPlugins()
	{
		return [
			CmsContentWidgetCmsBlockConnectorConfigurationProvider::FUNCTION_NAME => new CmsBlockContentWidgetPlugin(
				new CmsContentWidgetCmsBlockConnectorConfigurationProvider()
			),
		];
	}
}
Verification
  1. Create the CMS blocks:
    • BlockA with some text.
    • BlockB with the code: {{ cms_block(['BlockA']) }}.
  2. Add BlockB to a CMS Page.
  3. Make sure that the CMS block widget is rendered correctly on the Storefront.