How to make footer component constant through out the whole site in AEM?

Question

The site structure is as like this in my aem project.

For the footer component i am using following code :-

<div class="ftrsection" data-sly-repeat="${currentPage.listChildren}">
                <h3 data-sly-test.child="${item.title}" >${child}</h3>      
                <ul class="footermenu">
                    <li data-sly-repeat.subpage="${item.listChildren}">
                        <a href="${subpage.path}.html" title="${subpage.title}" class="">${subpage.title}</a> 
                    </li>        

                </ul>
            </div>

When i am in the home page it takes it as current page in the first line of the code and displays the site hierarchy in the footer perfectly as this

But when i am in a inner page( here explore page) it takes it as currectPage and displays the footer as this which i dont want . i want it to be constant through out the whole site. How to make it constant?

Answer 1

It is solved. Had to create a helper class to find the correct root.

File :Footer.java

package com.csmpl.bbsr.me.core.models;

import java.util.*;
import java.util.Iterator;
import com.day.cq.wcm.api.Page;
import com.day.cq.wcm.api.PageFilter;

import com.adobe.cq.sightly.WCMUsePojo;

public class Footer extends WCMUsePojo{
    private List<Page> items = new ArrayList<Page>();
    private Page rootPage;

    // Initializes the navigation
    @Override
    public void activate() throws Exception {
        rootPage = getCurrentPage().getAbsoluteParent(2);

        if (rootPage == null) {
        	rootPage = getCurrentPage();
        }
        
        Iterator<Page> childPages = rootPage.listChildren(new PageFilter(getRequest()));
	   	while (childPages.hasNext()) {
			items.add(childPages.next());
	   	}
    }

    // Returns the navigation items
    public List<Page> getItems() {
        return items;
    }
    // Returns the navigation root
    public Page getRoot() {
        return rootPage;
    }
}

Then had to access the class in the footer's htl like:

<div  class="ftrsection" data-sly-use.footer="com.csmpl.bbsr.me.core.models.Footer" data-sly-repeat="${footer.root.listChildren}">
                <h3 data-sly-test.child="${item.title}" >${child}</h3>      
                <ul class="footermenu">
                    <li data-sly-repeat.subpage="${item.listChildren}">
                        <a href="${subpage.path}.html" title="${subpage.title}" class="">${subpage.title}</a> 
                    </li>        

                </ul>
            </div>

And it worked. Hope it helps. :)