Create a Template File
A template file is necessary to render the data defined by the view.
To create a template:
-
In your CCT module’s Templates directory, create a new .tpl file.
-
Name this file to intuitively relate to your module as a template.
For example:
../SC.CCT.ImageViewer@0.0.1/Templates/sc_cct_imageviewer.tpl
-
Create the HTML required to render the data defined by the view.
For the example ImageViewer CCT, your template might look similar to:
<div class="sc-cct-imageviewer"> <div class="sc-cct-imageviewer-slider-container"> <div class="sc-cct-imageviewer-image-slider"> <ul data-sc-cct-imageviewer class="sc-cct-imageviewer-image-slider-list"> <li> <div class="sc-cct-imageviewer-slide-main-container"> {{#if hasImage}} <img src="{{resizeImage imageUrl 'main'}}" alt="{{imageAlt}}" /> {{/if}} {{#if hasText}} <div class="sc-cct-imageviewer-slide-caption sc-cct-imageviewer-slide-caption-{{valign}}"> {{#each texts}} <h2 class="sc-cct-imageviewer-slide-caption-title">{{this}}</h2> {{/each}} </div> {{/if}} </div> </li> </ul> </div> </div> </div>
-
Save the template.