Highlighted

Can I use iParsys with React SPA?

Avatar

Avatar

mainul35-bs23

Avatar

mainul35-bs23

mainul35-bs23

09-11-2020

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.

 

  1. home-page template (components/structure/home-page):

mainul35-bs23_0-1604990144030.png

  • .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="${ @path='header', resourceType='foundation/components/iparsys'}"></div>
<main class="content-area">
    <div data-sly-resource="${ @path='body', resourceType='wcm/foundation/components/responsivegrid'}"></div>
</main>
<div class="i-par i-par-footer"
     data-sly-resource="${ @path='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/page

as the resource supertype.

iparsys SPA