HTL snippets

Model + safe output + condition + loop (the 90% case)

<div class="cmp-plancard" data-sly-use.model="com.academy.phi.core.models.PlanCardModel">
  <h2 class="cmp-plancard__title">${model.title}</h2>
  <p data-sly-test="${model.subtitle}" class="cmp-plancard__subtitle">${model.subtitle}</p>
  <ul data-sly-list.benefit="${model.benefits}">
    <li class="cmp-plancard__benefit ${benefit.covered ? 'is-covered' : 'is-excluded'}">
      ${benefit.label}
    </li>
  </ul>
</div>

Include a child component / static resource type

<sly data-sly-resource="${'disclaimer' @ resourceType='phi-academy/components/disclaimer'}"></sly>
<sly data-sly-resource="${item.path @ wcmmode='disabled'}"></sly>

Template define + call (shared markup function)

<template data-sly-template.premium="${@ amount, suffix}">
  <span class="cmp-premium">${amount} <em>${suffix}</em></span>
</template>
<sly data-sly-call="${premium @ amount=model.formattedPremium, suffix='per month'}"></sly>

Rich text, links, i18n, formatting

<div>${model.termsHtml @ context='html'}</div>            <!-- sanitised rich text -->
<a href="${model.ctaPath @ extension='html'}">${'Compare plans' @ i18n}</a>
<span>${model.effectiveDate @ format='dd MMM yyyy', locale=request.locale}</span>

Attribute map + placeholder for empty components

<div data-sly-attribute="${model.dataAttributes}"></div>   <!-- map: {'data-plan':'gold'} -->

<sly data-sly-use.tpl="core/wcm/components/commons/v1/templates.html"
     data-sly-call="${tpl.placeholder @ isEmpty=!model.title}"></sly>

List iteration metadata

<li data-sly-list.item="${model.items}"
    class="${itemList.first ? 'is-first' : ''} ${itemList.odd ? 'is-odd' : ''}">
  ${itemList.index}: ${item.label}   <!-- index 0-based, count 1-based -->
</li>