I’m currently trying to implement a SSR SPA with BloomReach React SDK editable by BloomReach’s Channel Manager.
First thing to notice; i was not able to render CONTAINER_COMPONENT’s with react since the SDK (container.js) uses React.Fragment (in non-preview mode) and renders all its children inside of it. The container components i’ve defined within the console do have a purpose, for example defining the layout (main / sidebar). So i needed a way to add the SidebarContainer / MainContainer to the componentDefinitions list in order to be rendered. I’ve created a pull request for this: https://github.com/bloomreach/experience-react-sdk/pull/20
Now the containers can be rendered through React, i run into another big issue, which i couldn’t resolve in a nice way; How can i change the sort order of those container components within the Channel Manager? If i use the non-SPA implementation, the containers are defined within the free marker templates with <@hst.include ref=“mycontainer” /> which defines the order of rendering.
BloomReach React SDK renders all components with the returned from the Page Model. But the sort order of those containers in the Page Model are hard to sort (no drag & drop functionality for container components). Now the only way to solve ordering is to open the console and remove containers and insert them into the right order. This means i can lost all data and the task is cumbersome.
Can anybody help me with this one? Thanks in advance!
First of all, thank you for your contribution. We will review the PR and get back to you as soon as possible.
Regarding the issue with sorting, you don’t need to recreate the containers to reorder them. You can use “Up” and “Down” buttons in the console to change the order.
Thanks Dokmic for your response and the indication of the sort order button. But then still i got a problem, since my page inherit containers from a base page.
For example:
I’ve defined a container component top at the page starterstore-base under hst:abstractpages.
Then i define a starterstore-homepage under hst:pages which has a hst:referencecomponent property to the starterstore-base. Within this starterstore-homepage template i define another container component. In this situation i don’t have any control about ordering the container components, do i?
Drag & Drop is just a thought, but it would be helpful to change sort order of container components within the SPA implementation. Even expose a new hst property (index based) or something would help me, since there’s no way to order them right now. Currently the only way to implement the ordering of container components in SPA applications is to hardcode container references using <RenderCmsComponent path="sidebar" /> and <RenderCmsComponent path="main">, which is not ideal.
We looked into this problem, and we found this use case against the approach we recommend to follow. The problem is that when one page inherits another one, it is not possible to know the order of the merged set of the components. And during the development even on the backend side, you should always explicitly define your layout.
In this case, the developer should know the structure of the page, and changes in this structure should come along with the layout changes. What we can recommend is to reimplement the inheritance in the application layout:
