Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Can I use iParsys with React SPA?

mainul35-bs23
Level 1
Level 1

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.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

SPA
0 Replies