Sly logic not working when adding a div just before and after | Community
Skip to main content
JakeCham
JakeCham
Level 6
April 20, 2022
Solved

Sly logic not working when adding a div just before and after

  • April 20, 2022
  • 2 replies
  • 834 views

Hi Team,

 

Below code is working fine when ${properties.checkbox} = false

<sly data-sly-test="${properties.checkbox}">

   <div>

</sly>

<sly data-sly-test="${properties.checkbox}">

   </div>

</sly>

 

But the same code is not working after adding another opening and closing div just before and after. code which isn't working is below when ${properties.checkbox} = false

<div>

<sly data-sly-test="${properties.checkbox}"> this sly isn't going inside when it is false as expected

   <div>

</sly>

<sly data-sly-test="${properties.checkbox}"> //this sly is going inside when condition is false

   </div> //closing div, this line is executing when condition is false

</sly>

</div>

 

output when ${properties.checkbox} = false.

<div>

</div>

</div>

 

Any suggestion would be appreciated.

Thanks in advance.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

From experiences, I've noticed that HTML elements cannot be declared as non-pairs inside of sightly conditions, so like you must either use <div></div>.

Please change to ->

<div>

<sly data-sly-test="${properties.checkbox}">

   <div>Test 1</div>

</sly>

<sly data-sly-test="${properties.checkbox}"> 

  <div>Test 2</div>

</sly>

</div>

 

// output

<div>

<div>Test 1</div>

<div>Test 2</div>
</div>

 

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
April 20, 2022

Hi @jakecham 

Browser add closing tab automatically if missing in the HTML.

I think you need to use data-sly-unwrap for adding/removing parent divs.

 

Can you share the sample output HTML, for both the cases when checkbox is enabled and disabled.

I can share the corresponding HTL for that similar to https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/sly-logic-mismatching/m-p/448718#M128497

Arun Patidar
    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    April 20, 2022

    From experiences, I've noticed that HTML elements cannot be declared as non-pairs inside of sightly conditions, so like you must either use <div></div>.

    Please change to ->

    <div>

    <sly data-sly-test="${properties.checkbox}">

       <div>Test 1</div>

    </sly>

    <sly data-sly-test="${properties.checkbox}"> 

      <div>Test 2</div>

    </sly>

    </div>

     

    // output

    <div>

    <div>Test 1</div>

    <div>Test 2</div>
    </div>

     

      Terms & ConditionsAccessibility statement

      Loading footer...