0

Here is the code I have written in HTL file footer.html I am using editable template here.

<div class="6u">
                            <div class="row collapse-at-2">
                            <sly data-sly-test="${footer.arr}">
                                <sly data-sly-repeat="${footer.arr}">
                                <sly data-sly-resource="${'column${itemList.index}'  @resourceType='aem-site/components/structure/footer/footerList'}"></sly>
                                </sly>
                            </sly>
                            </div>
                        </div>

and the footerList.html file has this piece of code (it is hardcoded for now but it's not the final code)

<div class="6u">
    <h3>Accumsan</h3>
    <ul class="alt">
        <li><a href="#">Nascetur nunc varius</a></li>
        <li><a href="#">Vis faucibus sed tempor</a></li>
        <li><a href="#">Massa amet lobortis vel</a></li>
        <li><a href="#">Nascetur nunc varius</a></li>
    </ul>
</div>

I have been facing some weird issues with editing the component. This is how the component looks like on the page:

enter image description here

I was expecting the footerList component to appear as two separate components containing one column each since the value of ${footer.arr} in footer.html is 2. But it is appearing like it's one component containing two column.

Another issue I am facing is that I am not getting an options to edit the component as shown in the image below:

enter image description here

That's how to components look in CRXDE

enter image description here

Please let me know if any further information is needed.

user972418
  • 817
  • 3
  • 25
  • 58

1 Answers1

0

Your footerList components need to be included via a container component in order to be editable. You can either include them directly in the top level container (responsive grid in this case) or make your footer component a container (by extending the responsive grid - see Core Components Form Container)

Vlad
  • 10,602
  • 2
  • 36
  • 38
  • So, does that mean that I have to include the container in the code in place of the footerList component and then drag and drop the footerList component on the container ? – user972418 Oct 06 '17 at 14:32
  • That depends on your needs. You could have a fully editable container or just as well have some predefined content in the container. – Vlad Oct 06 '17 at 16:15
  • What I am trying to achieve here is include a component, footerList, a number of times (1-5) depending upon what was selecting in the footer component dialog. How do you suggest is a better way to implement this ? – user972418 Oct 06 '17 at 18:17