Parsys is not appearing in experience fragment in SPA Editor React project
I am trying to create an experience fragment for SPA by extending "cq/experience-fragments/components/xfpage". I just followed the instructions on the WKND site. I could see XF related features on the left side but I don't see any placeholder (parsys) to add a component. I double checked the index.js and entrypoint of the SPA which is provided by the AEM SPA Editor JS SD and. Both Sightely and SPA entry has the root element "spa-root". But still the responsive grid is not appearing on the XF page. Note I have the same setup for a regular page where I could see the parsys. I have a problem only in XF pages.
Is there any additional config I should make?
Body.html
<div id="spa-root" data-sly-resource="${resource @ resourceType='cq/remote/content/renderer/request/handler'}"></div>
<sly data-sly-include="footerlibs.html"/>
ui.frontend/src/index.js
document.addEventListener('DOMContentLoaded', () => {
ModelManager.initialize().then((pageModel) => {
const history = createBrowserHistory()
render(
<Router history={history}>
<App
history={history}
cqChildren={pageModel[Constants.CHILDREN_PROP]}
cqItems={pageModel[Constants.ITEMS_PROP]}
cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
cqPath={pageModel[Constants.PATH_PROP]}
locationPathname={window.location.pathname}
/>
</Router>,
document.getElementById('spa-root')
)
})
})
Hi @Mario248,
For the SPA Editor React project, you need to create experience fragment by extending "spa-project-core/components/xf-page".
<?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="Experience Fragment"
sling:resourceSuperType="spa-project-core/components/xf-page"
componentGroup=".hidden"/>
It is not working even by extending "spa-project-core/components/xf-page". FYI, this component is not having anything.
@Mario248 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.
Kautuk Sahni
You need to extend the responsivegrid, maybe the json response is not available in editor for custom system.
Arun Patidar
Related Conversations
