How to pass an object/variable to another file (using data-sly-include)?

[jayv25585659]

so I'm including another file

<hr>${fish.name}<hr>
<div>
  <sly data-sly-include="my-include-file-here.html">
</div>

I'm wondering if I can pass my "fish" object to my-include-file-here.html. If it's possible, how can  I do it?

I've looked the internet but can't find what I'm looking for.

Thanks

[Techaspect_Solu · Accepted solution]

Hi,

Your use case can be achieved by using Sightly Template and Call feature. Please refer the below example. It'll help you in achieving your use case.

templates/tooltip.html:

<template data-sly-template.tooltip="${@ text}" class="tooltip_modal">

  <div class="modal-content">

    <div class="modal-header">

      <span class="close">&times;</span>

      <h5>Tooltip</h5>

    </div>

    <div class="modal-body">

      <p>${text}</p>

    </div>

  </div>

</template>

component.html:

<sly data-sly-use.tooltipTmpl="templates/tooltip.html"

data-sly-call="${tooltipTmpl.tooltip @ text='Sample text'}" data-sly-unwrap>

</sly>

Sample output would be:

<div class="modal-content">

    <div class="modal-header">

      <span class="close">&times;</span>

      <h5>Tooltip</h5>

    </div>

    <div class="modal-body">

      <p>Sample text</p>

    </div>

  </div>

Please refer the links below for more details:

HTL Block Statements

cq5 - Pass parameters to data-sly-include in sightly/HTL - Stack Overflow

We hope this information helps!

Regards,

TechAspect Solutions