diff --git a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
index a86cd56579..32cd592d80 100644
--- a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
+++ b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
@@ -14,6 +14,7 @@ import { ComponentProps } from './PlaceholderCommon';
import {
convertedDevData as nonEeDevData,
convertedLayoutServiceData as nonEeLsData,
+ sxaRenderingColumnSplitterVariant,
sxaRenderingVariantData,
sxaRenderingVariantDataWithCommonContainerName as sxaRenderingCommonContainerName,
sxaRenderingVariantDataWithoutCommonContainerName as sxaRenderingWithoutContainerName,
@@ -346,6 +347,21 @@ describe('', () => {
);
expect(renderedComponent.find('.default').length).to.equal(1);
});
+
+ it('should render column splitter rendering variant', () => {
+ const component = sxaRenderingColumnSplitterVariant.sitecore.route as RouteData;
+ const phKey = 'column-1-{*}';
+
+ const renderedComponent = mount(
+
+ );
+
+ expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
+ expect(renderedComponent.find('.rendering-variant').prop('className')).to.equal(
+ 'rendering-variant col-9|col-sm-10|col-md-12|col-lg-6|col-xl-7|col-xxl-8 test-css-class-y'
+ );
+ expect(renderedComponent.find('.default').length).to.equal(1);
+ });
});
it('should populate the "key" attribute of placeholder chrome', () => {
diff --git a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
index f424b55148..4e30a9b147 100644
--- a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
+++ b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
@@ -12,6 +12,15 @@ import {
import { convertAttributesToReactProps } from '../utils';
import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
+/**
+ * These patterns need for right rendering Dynamic placeholders.
+ * Must be distinguished Splitter components and another placeholders(containers)
+ */
+const EXCLUDE_PLACEHOLDERS_RENDER = [
+ new RegExp(/column-(\d{1})-\{\*\}/i),
+ new RegExp(/row-(\d{1})-\{\*\}/i),
+];
+
type ErrorComponentProps = {
[prop: string]: unknown;
};
@@ -121,7 +130,10 @@ export class PlaceholderCommon extends React.Compone
from backend side we get common name of placeholder is called 'nameOfContainer-{*}' where '{*}' marker for replacing **/
if (rendering?.placeholders) {
Object.keys(rendering.placeholders).forEach((placeholder) => {
- if (placeholder.indexOf('{*}') !== -1) {
+ if (
+ placeholder.indexOf('{*}') !== -1 &&
+ !EXCLUDE_PLACEHOLDERS_RENDER.some((pattern) => name.search(pattern) !== -1)
+ ) {
rendering.placeholders[name] = rendering.placeholders[placeholder];
delete rendering.placeholders[placeholder];
}
diff --git a/packages/sitecore-jss-react/src/test-data/non-ee-data.ts b/packages/sitecore-jss-react/src/test-data/non-ee-data.ts
index a1327b3bb3..52f819b4f6 100644
--- a/packages/sitecore-jss-react/src/test-data/non-ee-data.ts
+++ b/packages/sitecore-jss-react/src/test-data/non-ee-data.ts
@@ -269,3 +269,42 @@ export const sxaRenderingVariantDataWithoutCommonContainerName = {
},
},
};
+
+export const sxaRenderingColumnSplitterVariant = {
+ sitecore: {
+ context: {
+ pageEditing: false,
+ },
+ route: {
+ name: 'Home',
+ displayName: 'Home',
+ fields: {
+ key: {
+ value: 'This is a some sample <p>field data</p> o'boy! "wow"',
+ },
+ },
+ placeholders: {
+ 'column-1-{*}': [
+ {
+ uid: 'c4d5d43b-5aa8-4e03-8f16-9428f3e02d5c',
+ componentName: 'RichText',
+ dataSource: '/sitecore/content/SxaSample/SxaSampleSite/Home/Data/RichText',
+ params: {
+ GridParameters: 'col-9|col-sm-10|col-md-12|col-lg-6|col-xl-7|col-xxl-8',
+ FieldNames: 'Default',
+ Styles: 'test-css-class-y',
+ },
+ fields: {
+ Text: {
+ value: 'Test RichText',
+ },
+ Title: {
+ value: 'Rich Text Rendering Variant',
+ },
+ },
+ },
+ ],
+ },
+ },
+ },
+};