Quick start 

This page walks through a minimal working example: rendering the header CType with a Handlebars template.

1. Include the site set

   Add the cpsit/handlebars site set to your site configuration (see Site sets):

   config/sites/<my-site>/config.yaml

   dependencies:
     - cpsit/handlebars

   Copied!

2. Configure template paths

   Declare where your .hbs files are located using the site settings provided by the site set:

   config/sites/<my-site>/settings.yaml

   handlebars.view.templateRootPath: 'EXT:my_sitepackage/Resources/Private/Templates/Handlebars'
   handlebars.view.partialRootPath: 'EXT:my_sitepackage/Resources/Private/Partials/Handlebars'

   Copied!

   See also

   Template paths — all configuration methods and their priority order.

3. Create a Handlebars template

   Create the template file at the path declared above. The filename without the .hbs extension is used as the templateName :

   EXT:my_sitepackage/Resources/Private/Templates/Handlebars/Header.hbs

   <div class="ce-header">
       {{#if header}}
           <h1 class="ce-header__title">{{header}}</h1>
       {{/if}}
       {{#if subheader}}
           <p class="ce-header__subtitle">{{subheader}}</p>
       {{/if}}
   </div>

   Copied!

4. Configure the content element

   Point the header CType at the template using a HANDLEBARSTEMPLATE content object:

   tt_content.header = HANDLEBARSTEMPLATE
   tt_content.header {
       templateName = Header
   
       variables {
           header = TEXT
           header.field = header
   
           subheader = TEXT
           subheader.field = subheader
       }
   }

   Copied!

   Each entry in variables is processed as a TYPO3 content object against the current content element record. The resulting values are passed to the template alongside the automatically injected data and current variables.

5. Flush caches

   After editing TypoScript, flush the TYPO3 page cache. After editing Services.yaml, flush and rebuild the service container as well.