Create CMS templates

This document describes how to create CMS templates for Yves.

CMS page template

CMS page template is a Twig file that, when applied to a Storefront page, defines its design and layout.

To learn how the template is created, check the following exemplary procedure:

1. Create the Twig template src/Pyz/Shared/Cms/Theme/default/templates/contact_page.twig:

<h1>CONTACT US </h1>
<div>
<strong>  Get in touch </strong>
<br>
<strong>Phone number : </strong> +1 (000) 000-0000
<br>
<strong>Email : </strong> info@companyname.com
        <br><br>
        <strong> Visit our store </strong><br>
        123 Demo Street<br>
        Demo City<br>
        1234<br>
        <br>
    </div>

2. Define placeholders for translation:

<!-- CMS_PLACEHOLDER : "PlaceholderContactPageHeader" -->
    <!-- CMS_PLACEHOLDER : "PlaceholderContactHeader" -->
    <!-- CMS_PLACEHOLDER : "PlaceholderPhoneNr" -->
    <!-- CMS_PLACEHOLDER : "PlaceholderEmail" -->
    <!-- CMS_PLACEHOLDER : "PlaceholderStoreAddress" -->

 <h1>{{ spyCms('PlaceholderContactPageHeader') }} </h1>
    <div>
        <strong>{{ spyCms('PlaceholderContactHeader') }} </strong> <br>
        <strong>{{ spyCms('PlaceholderPhoneNr') }} </strong> +1 (000) 000-0000 <br>
        <strong>{{ spyCms('PlaceholderEmail') }}  </strong> info@companyname.com <br>
        <strong>{{ spyCms('PlaceholderStoreAddress') }}  
        </strong><br>

        123 Demo Street<br>
        Demo City<br>
        1234<br>
    </div>

The text in the defined placeholders is replaced at runtime by the glossary keys assigned to them.

A content manager can apply this template when creating a CMS page in the Back Office.

Template with slots

Template with slots is a Twig file that defines the layout of slots across a Storefront page and has at least one slot assigned.

Create a template with slots:

1. Create a Twig template as described in CMS Page Template.
2. For each slot that you want to have in the template, insert a slot widget.
3. Import template and slot lists. Learn about the lists in the Correlation section of the Templates & Slots feature overview.

Templates with slots are universal. In the Back Office, a content manager can apply this template when creating a CMS page or creating a category.

CMS Block template

CMS block template is a Twig file that, when applied to a CMS Block, defines its design and layout.

Create the Twig template—src/Pyz/Shared/CmsBlock/Theme/default/template//hello.twig.

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

A content manager can apply this template when creating a CMS block in the Back Office.

Content item widget template

Content item widget template is a Twig file that defines the layout of the content item it renders on Storefront.

By default, two content item widget templates are shipped per each content item:

• Banner widget
• Abstract Product List widget
• Product Set widget
• File widget

Create a content item widget template:

1. Create src/Pyz/Yves/{ModuleWidget}/Theme/default/views/{template-folder}/{new-template}.twig, where:
   • {new-template} is the template name.
   • {ModuleWidget} is the name of the respective Content Item Widget module.
   • {template-folder} is the template folder name. Based on the content item widget, choose:
     • banner
     • cms-product-abstract
     • content-product-set
     • content-file

The default templates located on the core level of each module can be used as examples.

2. Modify the template configuration in Pyz/Yves/{ModuleWidget}/Twig/{ModuleWidgetTwigFunction}.php:
   • Add the template identifier.
   • Based on the template identifier, add a path to the template.

Pyz/Yves/{ModuleWidget}/Twig/{ModuleWidgetTwigFunction}.php

namespace \Pyz\Yves\{ModuleWidget}\Twig;

class {ModuleWidgetTwigFunction} extends \SprykerShop\Yves\{ModuleWidget}\Twig\{ModuleWidgetTwigFunction}
{
    protected const WIDGET_TEMPLATE_IDENTIFIER_NEW_TEMPLATE = 'new-template';

    /**
    * @return array
    */
    protected function getAvailableTemplates(): array
    {
        return array_merge(parent::getAvailableTemplates(), [
            static::WIDGET_TEMPLATE_IDENTIFIER_NEW_TEMPLATE => '@{ModuleWidget}/views/{template-folder}/{new-template}.twig',
        ]);
    }
}

3. Override the method in the factory that creates the object of {ModuleWidgetTwigFunction}:

Pyz/Yves/{ModuleWidget}/{ModuleWidget}Factory.php

namespace \Pyz\Yves\{ModuleWidget};

use \Pyz\Yves\{ModuleWidget}\Twig\{ModuleWidgetTwigFunction};

class {ModuleWidget}Factory extends \SprykerShop\Yves\{ModuleWidget}\{ModuleWidget}Factory
{
    /**
    * @param \Twig\Environment $twig
    * @param string $localeName
    *
    * @return \Pyz\Yves\{ModuleWidget}\Twig\{ModuleWidgetTwigFunction}
    */
    public function createContentBannerTwigFunction(Environment $twig, string $localeName): \SprykerShop\Yves\{ModuleWidget}\Twig\{ModuleWidgetTwigFunction}
    {
        return new {ModuleWidgetTwigFunction}(
            $twig,
            $localeName,
            $this->getContentBannerClient()
        );
    }
}