HOW TO INCLUDE ONE COMPONENT WITHIN ANOTHER COMPONENT?

[ac6600]

I need some help in including a component inside another component.

This is the scenario:
1. I have a page-hero component
2. I have a request info component

Now I want to add this request-info component in the exact middle of page-hero.

Can anyone please help me out with the steps that I have to follow in order to achieve this.
Note: I am very new to AEM and have been using it since the past 6-7 months.

@kautuk_sahni @BrianKasingli @arunpatidar @DEBAL_DAS 

Thanks in advance!!

[SantoshSai · Accepted solution]

Hi @ac6600 ,

You can use data-sly-resource 

data-sly-resource includes the result of rendering the indicated resource through the sling resolution and rendering process.

eg.

<sly data-sly-resource="${resource @ resourceType='wcm/foundation/components/responsivegrid'}"></sly>

where "wcm/foundation/components/responsivegrid" is path to your component.

Hope that helps!

Regards,

Santosh

[DEBAL_DAS]

Let's suppose I want to include image component inside hero-image component then I will use below htl code to include image component -

<sly data-sly-resource="${'image' @ resourceType='weretail/components/content/image'}"></sly>

[Manu_Mathew_]

@ac6600 

data-sly-resource includes the result of rendering the indicated resource through the sling resolution and rendering process. It helps include result of a resource from a path specified. The sling resolution and rendering process will process the indicated resource from path and result will be included.

In your case you just have to use - 

<sly data-sly-resource="${'requestInfo' @ resourceType='path of request info component'}"></sly>

within the html of your page-hero component.

for more details fon HTLs:

https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html?lang=...

[Manu_Mathew_]

<sly data-sly-resource="${'requestInfo' @ resourceType='path of request info component'}"></sly>

within the html of your page-hero component.

for more details fon HTLs:

https://experienceleague.adobe.com/docs/experience-manager-htl/using/htl/block-statements.html?lang=...