-1

Let's say, I have a template A and sling:resourceType is /apps/myproject/components/basePage. In this component I've body.html and header.html and footer.html script included through slightly in body.html. Now I am creating another template B, and sling:resourceType is /apps/myproject/components/compB and sling:resourceSuperType of compB is /apps/myproject/components/basePage. In /apps/myproject/components/compB I have added content.html and selector.html

If I create a page (mytest.html) of type template B, then header and footer script is included correctly but when I hit this mytest.selector.html then header and footer script is not included. I want template B will have two different view based on selector. Please let me know where I am missing.

Pakira
  • 1,951
  • 3
  • 25
  • 54
  • Your `selector.html` template is a completely independent template. You have to include header and footer like you did in your `body.html`. If you want to use a different header and footer you have to include a different header and footer. Also: Your question is poorly formatted and it is also hard to understand what the issue is. Please read [How to Ask](http://stackoverflow.com/help/how-to-ask). – Jens May 14 '17 at 22:19

2 Answers2

0

I believe you are trying to include multiple scripts within same template to achieve different views. This is correct approach todo in AEM. But missing part is the moment you create the second script (selector.html in this case), it becomes another template and you need to code to include your entire page scripts into this script as well.

When you override scripts from /libs/wcm/foundation/components/page component, they ll work fine when your custom script names matches to parent component. For example your body.html will override /libs/wcm/foundation/components/page/body.html and page will render how it is coded. When you create selector.html it becomes independent script as there is no /libs/wcm/foundation/components/page/selector.html.

You need to define all behavior (to include header, footer script etc) explicitly against your custom script. In this case you need include header/footer scripts explicitly into your selector.html

Saravana Prakash
  • 1,321
  • 13
  • 25
0

Using a selector means that you're using some special implementation of your component. For instance, your component may have several charts and you want to encapsulate those in your selectors and use it through AJAX from browser, and reuse those selectors in your main component as well.

Currently, you're trying to achieve is to use your header and footer to another component which breaks the encapsulation rule. Rather do this, take out your header.html and footer.html and make those individual components and you it in your basePage as well as your child pages.

See the snippet below:

<div data-sly-resource="${'header' @ resourceType='/apps/myproject/components/header'}">
<p>Your body and anything you want to put here</p>
<div data-sly-resource="${'footer' @ resourceType='/apps/myproject/components/footer'}">

This way, you can reuse your headers whereever you want even in your selectors.

Abdul Munim
  • 18,869
  • 8
  • 52
  • 61