Install product CMS blocks

Last updated:
Edit on GitHub

Product blocks are CMS blocks that are embedded in the product template and rendered on product details pages of selected products.

To integrate product blocks, follow the steps:

  1. Install the CMS Block Product Connector module using Composer: 
composer require spryker/cms-block-product-connector:"^1.4.0"
  1. To register the CMS block form plugin, add CmsBlockProductAbstractFormPlugin to the CMS block GUI dependency provider:

src/Pyz/Zed/CmsBlockGui/CmsBlockGuiDependencyProvider.php

<?php

namespace Pyz\Zed\CmsBlockGui;

use Spryker\Zed\CmsBlockGui\CmsBlockGuiDependencyProvider as SprykerCmsBlockGuiDependencyProvider;
use Spryker\Zed\CmsBlockProductConnector\Communication\Plugin\CmsBlockProductAbstractFormPlugin;

class CmsBlockGuiDependencyProvider extends SprykerCmsBlockGuiDependencyProvider
{
    /**
     * @return array<\Spryker\Zed\CmsBlockGui\Communication\Plugin\CmsBlockFormPluginInterface>
     */
    protected function getCmsBlockFormPlugins(): array
    {
        return array_merge(parent::getCmsBlockFormPlugins(), [
            new CmsBlockProductAbstractFormPlugin(),
        ]);
    }
}
  1. To register the CMS block form handler plugin, add CmsBlockProductAbstractUpdatePlugin to the CMS Block dependency provider:

src/Pyz/Zed/CmsBlock/CmsBlockDependencyProvider.php

<?php

namespace Pyz\Zed\CmsBlock;

use Spryker\Zed\CmsBlock\CmsBlockDependencyProvider as SprykerCmsBlockDependencyProvider;
use Spryker\Zed\CmsBlockProductConnector\Communication\Plugin\CmsBlockProductAbstractUpdatePlugin;

class CmsBlockDependencyProvider extends SprykerCmsBlockDependencyProvider
{
    /**
     * @return array<\Spryker\Zed\CmsBlockExtension\Dependency\Plugin\CmsBlockUpdatePluginInterface>
     */
    protected function getCmsBlockUpdatePlugins(): array
    {
        return array_merge(parent::getCmsBlockUpdatePlugins(), [
            new CmsBlockProductAbstractUpdatePlugin(),
        ]);
    }
}
  1. Optional: To show which abstract products a blocks is assigned to on the View CMS Block page, register the product list plugin by adding CmsBlockProductAbstractListViewPlugin to the CMS Block GUI dependency provider:

src/Pyz/Zed/CmsBlockGui/CmsBlockGuiDependencyProvider.php

<?php

namespace Pyz\Zed\CmsBlockGui;

use Spryker\Zed\CmsBlockGui\CmsBlockGuiDependencyProvider as SprykerCmsBlockGuiDependencyProvider;
use Spryker\Zed\CmsBlockProductConnector\Communication\Plugin\CmsBlockProductAbstractListViewPlugin;

class CmsBlockGuiDependencyProvider extends SprykerCmsBlockGuiDependencyProvider
{
    /**
     * @return array<\Spryker\Zed\CmsBlockGui\Communication\Plugin\CmsBlockViewPluginInterface>
     */
    protected function getCmsBlockViewPlugins(): array
    {
        return array_merge(parent::getCmsBlockViewPlugins(), [
            new CmsBlockProductAbstractListViewPlugin(),
        ]);
    }
}
  1. Optional: To show which blocks an abstract product is assigned to on the View Product Abstract page, add CmsBlockProductAbstractBlockListViewPlugin to the Product Management dependency provider:

src/Pyz/Zed/ProductManagement/ProductManagementDependencyProvider.php

<?php

namespace Pyz\Zed\ProductManagement;

use Spryker\Zed\CmsBlockProductConnector\Communication\Plugin\CmsBlockProductAbstractBlockListViewPlugin;
use Spryker\Zed\ProductManagement\ProductManagementDependencyProvider as SprykerProductManagementDependencyProvider;

class ProductManagementDependencyProvider extends SprykerProductManagementDependencyProvider
{
    /**
     * @return array<\Spryker\Zed\ProductManagement\Communication\Plugin\ProductAbstractViewPluginInterface>
     */
    protected function getProductAbstractViewPlugins(): array
    {
        return [
            new CmsBlockProductAbstractBlockListViewPlugin(),
        ];
    }
}
  1. To show product CMS blocks on product details pages, add the following to the pages’ template:
{% if data.idProductAbstract is defined %}
	{{ spyCmsBlock({ product: data.idProductAbstract}) }}
{% endif %}

Now you can create product CMS blocks and add them to product pages. For instructions, see Create product CMS blocks.