In this article, we will dynamically reference an AEM experience fragment to a page, dynamically using code.
Sightly Implementation
Hard Coded Example
The first example uses sightly to reference an experience fragment, /content/experience-fragments/we-retail/equipment, and the required variation, master. This will only work when the path includes the experience fragment variation path. The value here is hard coded.
1 2 | <sly data-sly-resource="${@path='/content/experience-fragments/we-retail/equipment/master', selectors='content', wcmmode='disabled'}"></sly> |
Dynamic Example
In the second example, we can see that our component adapts to the com.mysite.models.component.MyCustomComponent, Sling Model backend, and then it exposes the experience fragment in the exPath property. The value returned from the exPath is ‘/content/experience-fragments/we-retail/equipment/master’.
1 2 3 4 | <sly data-sly-use.cmp="com.mysite.models.component.MyCustomComponent"></sly> <sly data-sly-resource="${@path=cmp.exPath, selectors='content', wcmmode='disabled'}"></sly> |
Removing <html><body> unwanted tags and client library imports
When you include wcmmode=’disabled’, it will cause your page to render the <html><body> unwanted tags and client library imports that you probably do not want apart of the page. To fix this issue, you would just need to dismiss wcmmode=’disabled’.
Use this line of text instead:
1 2 3 4 | <sly data-sly-use.cmp="com.mysite.models.component.MyCustomComponent"></sly> <sly data-sly-resource="${@path=cmp.exPath, selectors='content'}"></sly> |
