Can I use iParsys with React SPA?
I was trying to create a home page template, which would have iparsys for header, footer and body. My plan is that, header and footer could be added from parent component in authoring mode. I have added the iParsys but these does not display in authoring mode, however if I put some hardcoded text, that is being displayed.
For your reference, I am pasting my code here.
- home-page template (components/structure/home-page):
- .content.xml code:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Component"
jcr:title="GLPG Forms Home Page"
sling:resourceSuperType="glpg-forms/components/content/page"
componentGroup=".hidden"/>- home-page.xml
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page"
lang="${page.language}"
data-sly-use.head="head.html"
data-skin="default">
<head>
<sly data-sly-call="${head.head @ page = page}"></sly>
</head>
<sly data-sly-include="body.html"></sly>
<h1>Hello SPA</h1>
</html>- body.xml
<body class="page"
data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page"
data-site-id="glpg-111"
data-sly-use.footer="footer.html">
<div class="i-par i-par-header"
data-sly-resource="${ @9556322='header', resourceType='foundation/components/iparsys'}"></div>
<main class="content-area">
<div data-sly-resource="${ @9556322='body', resourceType='wcm/foundation/components/responsivegrid'}"></div>
</main>
<div class="i-par i-par-footer"
data-sly-resource="${ @9556322='footer', resourceType='foundation/components/iparsys'}"></div>
<sly data-sly-call="${footer.footer @ page = page}"></sly>
</body>
The super type of home-page template is a simple page component, which is provided by default, when generating the project from aem spa react project archetype. The page component uses
spa-project-core/components/pageas the resource supertype.