Install the ContentProductWidget module

The ContentProductWidget module renders Abstract Product List content items as product lists or sliders on the Storefront.

To integrate the ContentProductWidget module, follow these steps:

1) Install the module

Install the spryker-shop/content-product-widget module using Composer:

composer require spryker-shop/content-product-widget --update-with-dependencies

2) Register the Twig plugin

Register the Twig plugin to make the content_product_abstract_list function available in Yves and CMS blocks.

src/Pyz/Yves/Twig/TwigDependencyProvider.php

<?php

namespace Pyz\Yves\Twig;

use Spryker\Yves\Twig\TwigDependencyProvider as SprykerTwigDependencyProvider;
use SprykerShop\Yves\ContentProductWidget\Plugin\Twig\ContentProductAbstractListTwigPlugin;

class TwigDependencyProvider extends SprykerTwigDependencyProvider
{
    /**
     * @return array<\Spryker\Shared\TwigExtension\Dependency\Plugin\TwigPluginInterface>
     */
    protected function getTwigPlugins(): array
    {
        return [
            ...
            new ContentProductAbstractListTwigPlugin(),
        ];
    }
}

3) Use the Twig function

After you register the plugin, you can render Abstract Product List content items by using the content_product_abstract_list function.

3.1 Function signature

Parameters:

• contentKey (string): The unique key of the Abstract Product List content item (for example, the NAME used when creating the content item).
• templateIdentifier (string): The identifier of the template to use. See Default templates.

Example (CMS block or CMS page template):

{{ content_product_abstract_list('best-sellers', 'bottom-title') }}

4) Optional: Configure templates

By default, the ContentProductWidget module ships with two templates:

To use a default template, pass its identifier as the second argument of the Twig function.

To add custom templates, extend the project-level Twig function provider for ContentProductWidget, and add your own identifiers and paths. For details, see Create CMS templates.

5) Optional: Extend product data with categories

You can extend the product data that ContentProductWidget uses with additional information, such as product categories. To do this, register collection expander plugins in the project-level ContentProductWidgetDependencyProvider.

The following example registers ProductCategoryContentProductAbstractCollectionExpanderPlugin, which enriches the abstract product collection with category data:

src/Pyz/Yves/ContentProductWidget/ContentProductWidgetDependencyProvider.php

<?php

namespace Pyz\Yves\ContentProductWidget;

use SprykerShop\Yves\ContentProductWidget\ContentProductWidgetDependencyProvider as SprykerContentProductWidgetDependencyProvider;
use SprykerShop\Yves\ProductCategoryWidget\Plugin\ContentProductWidget\ProductCategoryContentProductAbstractCollectionExpanderPlugin;

class ContentProductWidgetDependencyProvider extends SprykerContentProductWidgetDependencyProvider
{
    /**
     * @return array<\SprykerShop\Yves\ContentProductWidget\Dependency\Plugin\ContentProductAbstractCollectionExpanderPluginInterface>
     */
    protected function getContentProductAbstractCollectionExpanderPlugins(): array
    {
        return [
            new ProductCategoryContentProductAbstractCollectionExpanderPlugin(),
        ];
    }
}

This plugin extends the abstract product collection with category information so that you can display categories in your ContentProductWidget templates.

6) Next steps

After you install and integrate the ContentProductWidget module, you can:

• Create abstract product list content items.
• Add content items to CMS blocks.
• Create CMS templates to customize how Abstract Product List content items are displayed.