Search code examples
aemsightly

How to display every sub page of the parent of the current page in aem?


I want to display names of every child pages of the parent of the current page except the current page in the component in aem. But my output is coming including the current page name.

 <section id="touractivities">
            <div class="container">
                 <div class="row">
                    <div class="col-sm-12">
                         <ul class="row buttontab">
                           <li class="col-md col-sm-4 col-6"  data-sly-repeat="${CurrentPage.parent.listChildren}">
                              <div class="btnbggradient">
                                        <a href="${item.path}.html" class="shadow">
                                        <i class="icon-${item.name}"></i>
                                        <h5 >${item.title}</h5>
                                        </a>
                                    </div>
                                </li>
                              </ul>
                    </div>
                </div>
        </div></section>

my aem structure:

my aem structure

required output:

required output

output im getting:

output im getting

The code is correct except that the bird watching li should not come while i am in bird watching page.


Solution

  • <section id="touractivities">
                    <div class="container">
    
                        <div class="row">
                            <div class="col-sm-12">
                                <ul class="row buttontab" data-sly-list="${CurrentPage.parent.listChildren}">
    
                                       <li class="col-md col-sm-4 col-6" data-sly-test="${item.path != currentPage.path}" >
                                            <div class="btnbggradient">
                                                <a href="${item.path}.html" class="shadow">
                                                <i class="icon-${item.name}"></i>
                                                <h5 >${item.title}</h5>
                                                </a>
                                            </div>
                                        </li>
    
                                </ul>
                            </div>
                        </div>
                </div></section>