Using CMS blocks in content

Blocks can be viewed as partial content snippets that can be embedded in other pages. From an SEO perspective, blocks are a real advantage.

The CMS Block module supports flexible extension by adding a new connector.

Spryker provides two extensions as examples CMS Block Category Connector and CMS Block Product Connector. However, you are free to extend and create new relations of blocks to other system subjects.

The following steps show how CMS blocks work.

To add a CMS block with a hello message, follow these steps:

1. Add a template for the new block—similar to templates for pages.
2. Create a new Twig template under the src/Pyz/Yves/CmsBlock/Theme/default/template/ folder. We call it hello.twig, and it contains the following structure:

<!-- CMS_BLOCK_PLACEHOLDER : "helloBlockText" -->
<div class="cms-block">
    <h1>Hello World!</h1>
    <p>{{ spyCmsBlockPlaceholder('helloBlockText') | raw }}</p>
</div>

3. Configure the new block in the CMS Block interface and add the corresponding glossary keys for the two included placeholders.
4. In Back Office, in Content > Blocks, click Create Block.
5. Select the newly created template from the list, select a static type, and enter a proper unique NAME (“HelloMessage”).
6. To limit the availability to a date range, enter the VALID FROM and VALID TO dates.
7. Click Save.
8. Create the glossary keys for the placeholders (see the previous example).
9. Run the collectors so that the changes are effective in Yves.

The new block is now ready to be used and integrated in other Twig templates.

{{ spyCmsBlock({name: 'HelloMessage'}) }}

Multi-store environment

If you have a multiple store environment configured, you can also define in which of your stores the CMS Block can appear.

In the previous example, the CMS Block is assigned to DE and US only. If the CMS Block is enabled, it appears only in DE and US stores. Afterward, the user can define another CMS Block assigned to AT store only and have different content per store.