Skip to main content
JakeCham
JakeCham
Level 6
April 20, 2022
Répondu

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

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.

 

Ce sujet a été fermé aux réponses.
Meilleure réponse par 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 commentaires

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
    Adobe Champion and Community Advisor
    BrianKasingliAdobe Champion and Community AdvisorRéponse
    Adobe Champion and Community Advisor
    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>

     

      Conditions d'utilisationAccessibility statement

      Loading footer...