Creation of standard components

For this verification, we will first create a sample with the following settings as a standard component.

In the Datasource tab, set the Datasouce item to Automatically create data source under page and the Rendering template to

For Behaviors, set Dynamic placeholders.

The component is now ready on the CMS side. Next, we will create a sample for use with this component by executing the following command in the root path of the Next.js app

jss scaffold Sample

Add Test to the code generated by the sample.

import React from 'react';
import { ComponentParams, ComponentRendering } from '@sitecore-jss/sitecore-jss-nextjs';

interface SampleProps {
  rendering: ComponentRendering & { params: ComponentParams };
  params: ComponentParams;
}

export const Default = (props: SampleProps): JSX.Element => {
  const id = props.params.RenderingIdentifier;

  return (
    <div className={`component ${props.params.styles}`} id={id ? id : undefined}>
      <div className="component-content">
        <p>Sample Component</p>
      </div>
    </div>
  );
};

export const Test = (props: SampleProps): JSX.Element => {
  const id = props.params.RenderingIdentifier;

  return (
    <div className={`component ${props.params.styles}`} id={id ? id : undefined}>
      <div className="component-content">
        <p>Sample Test Component</p>
      </div>
    </div>
  );
};

Now, when you place a component and specify Default as the standard form, the Smaple Component will appear, and if you specify Test, the Sample Test Component will appear.

Creating Variants

We will add Variants settings for the above components. Under Presentation - Headless Variants, the name of this component will be Sample, and under Sample, Default and Test will be set.

Confirmation of operation in the Experience Editor

After placing the created component, you will see that Default and Test are displayed in the Variant: field.

We were able to confirm that the Variant item was successfully displayed.

Confirmation of operation in Pages

Now check the above settings in Pages, where the parameters are referenced, but there is no Variants item to choose from.

The Rendering Parameters of the component created this time are as follows.

For example, if you go to the Rendering Parameters of the Promo component, you will see that it inherits the following template

For the Base Rendering Parameters, see /sitecore/templates/Foundation/JSS Experience Accelerator/Presentation/Rendering Parameters/ BaseRenderingParameters, and if you check the Standard Value, you will see that it includes a Variant item.

We will therefore change the base used by Rendering Parameters.

After the change, when you refer to Pages, you can select Variant as follows.

Create a component corresponding to Variant

In fact, when creating the first component, it is possible to select the template that will become the base.

Now you can specify the Rendering Parameters item when you create it, and you can select Variants in Pages without any problems.

Summary

In this case, we have identified the role of Rendering Parameters. As introduced in the background image, the behavior of Pages refers to Rendering Parameters, so if you want to display items in a way that is easy to edit, you should review this part of the page.

Tags

• XM Cloud
• Headless SXA