HTL Code Samples from Immerse 2017

code.md

1. Use statement

template.html

<sly data-sly-use.logic="logic.js">
    <h1>${logic.pageTitle}</h1>
</sly>

logic.js

use(function () {
    var page = pageManager.getPage('/content/we-retail/us/en');
    var pageTitle = page.getPageTitle() || page.getTitle() || 'untitled';
    
    return {
        page: page,
        pageTitle: pageTitle
    };
});

2. Load resources with data-sly-use

template.html

<sly data-sly-use.logic="logic.js" data-sly-use.title="${logic.title.path}">
    <h1>${title.jcr:title}</h1>
</sly>

logic.js

use(function () {
    var page = pageManager.getPage('/content/we-retail/us/en');
    var title = page.getContentResource('root/responsivegrid/section_title');
    
    return {
        page: page,
        title: title
    };
});

3. Handle resources in data-sly-resource

template.html

<sly data-sly-use.logic="logic.js">
    <sly data-sly-resource="${logic.title.path}"></sly>
</sly>

logic.js

use(function () {
    var page = pageManager.getPage('/content/we-retail/us/en');
    var title = page.getContentResource('root/responsivegrid/section_title');
    
    return {
        page: page,
        title: title
    };
});

4. Template statement

template.html

<sly data-sly-template.listChildren="${@ page}">
    <ul data-sly-list.child="${page.listChildren}">
        <li>
            <span data-sly-use.pageTitle="${'getPageTitle.js' @ page=child}">
                ${child.title}
            </span>
            <sly data-sly-call="${listChildren @ page=child}"></sly>
        </li>
    </ul>
</sly>

<sly data-sly-use.logic="logic.js">
    <h1 data-sly-use.pageTitle="${'getPageTitle.js' @ page=logic.page}">${pageTitle}</h1>
    <sly data-sly-call="${listChildren @ page=logic.page}"></sly>
</sly>

logic.js

use(function () {
    var page = pageManager.getPage('/content/we-retail/us/en');
    var title = page.getContentResource('root/responsivegrid/section_title');
    
    return {
        page: page,
        title: title
    };
});

getPageTitle.js

use(function () {
    return this.page.getPageTitle() || this.page.getTitle() || 'untitled';
});

5. Using synthetic resources

template.html

<sly data-sly-use.logic="logic.js">
    <h1 data-sly-use.pageTitle="${'getPageTitle.js' @ page=logic.page}">${pageTitle}</h1>
    <ul data-sly-list.child="${logic.children}">
        <li data-sly-resource="${child}"></li>
    </ul>
</sly>

logic.js

use(function () {
    var page = pageManager.getPage('/content/we-retail/us/en');
    var childrenIterator = page.listChildren();
    var children = [];
    
    while (childrenIterator.hasNext()) {
        var child = childrenIterator.next();
        children.push({
            "jcr:title": child.getPageTitle() || child.getTitle() || 'untitled',
            "type": "H2",
            "sling:resourceType": "core/wcm/components/title/v1/title",
            "resourceName": "title"
        })
    }
    
    return {
        page: page,
        children: children
    };
});

---

template.html

<sly data-sly-template.listChildren="${@ page}"
     data-sly-use.children="${'listChildren.js' @ page=page}">
    <ul data-sly-list.child="${children}">
        <li>
            <sly data-sly-resource="${child.syntheticTitle}"></sly>
            <sly data-sly-call="${listChildren @ page=child.page}"></sly>
        </li>
    </ul>
</sly>

<sly data-sly-use.logic="logic.js">
    <h1 data-sly-use.pageTitle="${'getPageTitle.js' @ page=logic.page}">${pageTitle}</h1>
    <sly data-sly-call="${listChildren @ page=logic.page}"></sly>
</sly>

logic.js

use(function () {
    var page = pageManager.getPage('/content/we-retail/us/en');
    
    return {
        page: page
    };
});

listChildren.js

use(function () {
    var childrenIterator = this.page.listChildren();
    var children = [];
    
    while (childrenIterator.hasNext()) {
        var child = childrenIterator.next();
        children.push({
            "page": child,
            "syntheticTitle": {
                "jcr:title": child.getPageTitle() || child.getTitle() || 'untitled',
                "type": "H2",
                "sling:resourceType": "core/wcm/components/title/v1/title",
                "resourceName": "title"
            }
        })
    }
    
    return children;
});

6. Pass markup to a template

template.html

<sly data-sly-template.card="${@ img, title, content}">
    <div class="card">
        <img src="${img}" alt/>
        <h2>${title}</h2>
        <div class="content" data-sly-test="${content}" data-sly-call="${content}"></div>
    </div>
</sly>

<sly data-sly-template.example>
    <p>This example shows how to pass markup to a template</p>
</sly>

<sly data-sly-call="${card @ img='hello.jpg', title='Hello World', content=example}"></sly>

7. Pass request attributes

template.html

<sly data-sly-use.logic="logic.js">
    <sly data-sly-resource="${'title' @ resourceType='repl/components/title', requestAttributes=logic.attributes}"></sly>
</sly>

logic.js

use(function () {
    //var page = pageManager.getPage('/content/we-retail/us/en');
    var attributes = new Packages.java.util.HaashMap();
    attributes.put("title", "Hello World");
    attributes.put("description", "Lorem ipsum…");
    
    return {
        attributes: attributes
    };
});

/apps/repl/components/title/title.html

<div class="title" data-sly-use.logic="title.js">
    <h2>${logic.title}</h2>
    <p data-sly-test="${logic.description}">
        ${logic.description}
    </p>
</div>

/apps/repl/components/title/title.js

use(function () {
    return {
        "title": request.getAttribute('title'),
        "description": request.getAttribute('description')
    };
});

8. Inject servers-side variables into HBS templates

template.html

<script id="card-template" type="text/x-handlebars-template"
    data-sly-include="card-template.html"></script>

card-template.js

<div class="card ${'card--test'}" data-sly-test="${true}">
    <img src="{{img}}" alt/>
    <h2>{{title}}</h2>
</div>