How to move common code in sightly html file to different files

Avatar

Avatar

srinivas_chann1

Avatar

srinivas_chann1

srinivas_chann1

15-09-2020

Hi,

 

I have a common piece of code in  sightly html  ,instead  of writing the repetitive  code can i put this in a different file and just invoke are there any other ways . Please suggest.

 

 

In /apps/project/testcomponent/testcomponent.html

in the testcomponent.html:-

 

<sly data-sly-use.a="com.project.abc">

<!-- /* with brand */ -->
<sly data-sly-test="${a.brandStyles == 'brand'}">
<div class="comon1"> dd </div>
<div class="comon2"> cc </div>
<div class="comon3"> ff </div>
...
</sly>

<!-- /* without brand */ -->
<sly data-sly-test="${a.brandStyles != 'brand'}">
<div class="comon1"> dd </div>
<div class="comon2"> cc </div>
<div class="comon3"> ff </div>
...
</sly>


I tried:-

To put this file in file in /apps/project/testcomponent/abc.html
so abc.html had:-

<div class="comon1"> dd </div>
<div class="comon2"> cc </div>
<div class="comon3"> ff </div>

Now i modified in testcomponent.html:-

<sly data-sly-use.a="com.project.abc">

<!-- /* with brand */ -->
<sly data-sly-test="${a.brandStyles == 'brand'}">
<sly data-sly-include="/apps/project/testcomponent/abc.html"/>
...
</sly>

<!-- /* without brand */ -->
<sly data-sly-test="${a.brandStyles != 'brand'}">
<sly data-sly-include="/apps/project/testcomponent/abc.html"/>
...
</sly>

This throws error while page render
Please suggest how to solve this problem

 

Thanks

View Entire Topic

Avatar

Avatar

raj_mandalapu

Avatar

raj_mandalapu

raj_mandalapu

15-09-2020

Seems abc.html and testcomponent.html are in the same component, you don't need to call it by putting full path, you can call something like this <sly data-sly-include="abc.html"/>

The best practice is to use a template for reusable content.

I did not test below code, but your code should something like below, you can pass brandStyles as parameter to the template, inside template put test condition.

<template data-sly-template.template="${@ a}">
<sly data-sly-test="${a.brandStyles == 'brand'}">
<div class="comon1"> dd </div>
<div class="comon2"> cc </div>
<div class="comon3"> ff </div>
...
</sly>
</template>

<sly data-sly-call="${templateText @ properties=a}" />

Refer adobe docs:https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html