HTML Template Sightly Language

WCMMODE LIST

1. wcmmode.edit
2. wcmmode.preview
3. wcmmode.design
4. wcmmodedisabled

Data Sly Element

• data-sly-include

data-sly-include="component.html"

• data-sly-resource

<div data-sly-resource="${'par_items' @ resourceType='foundation/components/parsys'}" data-sly-unwrap></div>

• data-sly-use

<div data-sly-use.testBrands="com.test.models.TestModel"></div>

• data-sly-test

<a data-sly-test="${properties.buttonType}">Hello</a>

• data-sly-element

<div data-sly-element="${properties.headerType || 'h2'}" 

class="${properties.headerAlignment || 'text-center'}">${properties.headerText || 'Header Text' @ i18n, context='html'}</div>

• data-sly-list

<div data-sly-list="${resource.listChildren}" data-sly-unwrap>

    <div data-sly-resource="${item.path}" data-sly-unwrap="${wcmmode.preview || wcmmode.disabled}"></div>

</div>

<select data-sly-list="${channelSelector.channelList}">

<option class="channel" data-channel-code="${item.channelCode}">${item.displayName}                 </option>

</select>

• data-sly-attribute

 <a href="${properties.linkUrl }"

data-sly-attribute.target="${properties.isOpenInNewWindow ? '_blank' : ''}"

data-sly-attribute.title="${properties.linkTitle ? properties.linkTitle : ''}"

data-sly-attribute.id="${properties.altTaggingText ? properties.altTaggingText : ''}">

${properties.linkText || 'Link'  @ i18n, context="html"} 

</a>

• data-sly-template

 <template data-sly-template.dummy>

<div class="col-tsm-2">

<div class="img">

<a href="#">

<img src="/etc/designs/product/images/product" alt="" title="">

</a>

</div>

<div>

<a class="additionalInformation" href="#">

<p class="desc">

Short Description(if available)

</p>

</a>

</div>

</div>

</template>

• data-sly-call

<div data-sly-test="${!properties.title data-sly-unwrap>

<div class="ImageList row">

<div data-sly-call="${dummy}" data-sly-unwrap></div>

<div data-sly-call="${dummy}" data-sly-unwrap></div>

<div data-sly-call="${dummy}" data-sly-unwrap></div>

<div data-sly-call="${dummy}" data-sly-unwrap></div>

<div data-sly-call="${dummy}" data-sly-unwrap></div>

<div data-sly-call="${dummy}" data-sly-unwrap></div>

</div>

</div>

@Context

1. URI
   <img src="${properties.backgroundImage @ context='uri'}" />
2. Attribute
   <div id="${playerType == 'live' ? 'ssmplive' : uniqueid}" class="aa" data-key="${simpleStreamApiKey.value @ context='attribute'}"</div>
3. unsafe
   <div data-sly-test.variablePriced="${pm.product.productPricing.variablePriced}"  data-sly-unwrap></div>
   <script type="text/javascript">
   var priceRange = ${variablePriced @ context='unsafe'};
   </script>
4. html
   <p>${properties['desktop/descriptionText']@ context='html'}</p>
5. scriiptString
   <script type="text/javascript">
   var $moduleSection = $("[data-test-type='${properties.type @ context='scriptString'}']").last();
   </script>
6. styleToken
   <label aria-label="${color.name}" class="swatch" style="background-image:url(${baseImageUrl @ context='styleToken'}${color.swatchFileName @
   context='styleToken'}?${swatchImageSuffix.value @ context='styleToken'})">
7. scriptToken
   <script type="text/javascript">
        hasTest = ${hasTest @ context='scriptToken'};
   </script>

Include Client Lib In A Page

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

<includeClientLib data-sly-call="${clientLib.js @ categories=['load']}" data-sly-unwrap />

<includeClientLib data-sly-call="${clientLib.js @ categories=['product']}" data-sly-unwrap  data-sly-test="${properties.pageType == 'product' || properties.pageType == 'productNotFound'}"/>

</sly>