XM Cloud: Rendering Variants and Styles

Rendering Variants and Styles in Sitecore XM Cloud allow developers and content authors to have more control over the appearance and behavior of components. They enhance flexibility by allowing multiple presentations for a single component, without needing to duplicate the logic. In this guide, we’ll explore how to work with both rendering variants and styles, and how to configure them within the CMS.

What Are Rendering Variants?

Rendering Variants allow you to display the same content in different formats or layouts. A single component can have multiple variants, each defining a different structure or appearance of the same underlying data.

Configuring Rendering Variants

To configure Rendering Variants for you Renderings you need to go to the following path:

/sitecore/content/YourProject/YourProjects/Presentation/Headless Variants

In there you'll be able to create a Variant Item

And inside each Variant Item you can create a Variant Definition, the default, of course is "Default"

For this example we'll use a component that has an image and we want to give the Content Author the ability to select if the image goes in the right or in the left.
For this we can create the two Variant Definitions, Default that's going to be the ImageLeft and WithImageRight.
The names you select here are important, this will later match with the components we export on the code

There's no more configuration needed.

Coding a Rendering Variant

As you can see in the following code snippet, we created a type called VariantParams and in there we defined a boolean. We're adding that to our props and using it to check, in the main if the image is on the right or on the left via classes. Feel free to use any approach you want.

interface Fields {
  heading: Field<string>;
  copy: Field<string>;
  image: ImageField;
}

type VariantParams = {
  imageLeft: boolean;
};

type CTARowWithImageProps = ComponentProps & {
  fields: Fields;
  variantParams: VariantParams;
};

const CTARowWithImage = ({ fields, params, rendering, variantParams }: CTARowWithImageProps) => {
  const ctx = useSitecoreContext();

  const id = params.RenderingIdentifier;
  return (
    <section
      className={`${params.styles} ${variantParams.imageLeft ? 'flex-row' : 'flex-row-reverse'}`}
      id={id ? id : undefined}
    >
      <Image field={fields.image}/>
      <Text field={fields.heading} tag="h2" />
      {hasContent(ctx, fields.copy) && <Text field={fields.copy} tag="p" />}
    </section>
  );
};

After creating our base component that receives the variantParam boolean, we go ahead and create the variants.

const _Default = (props: CTARowWithImageProps) => {
  return <CTARowWithImage {...props} variantParams={{ imageLeft: true }} />;
};

const _WithImageRight = (props: CTARowWithImageProps) => {
  return <CTARowWithImage {...props} variantParams={{ imageLeft: false }} />;
};

You can see that we're returning our base component and changing the variantParams value on each one.

After that we just need to export our components

export const Default = withDatasourceCheck()<CTARowWithImageProps>(_Default);
export const WithImageRight = withDatasourceCheck()<CTARowWithImageProps>(_WithImageRight);

Note that the name we're exporting matches the configuration we did on the CMS.

Moving to the Pages Editor, Content Authors can select which variant to use after adding the rendering and clicking it, on the right side menu.

What Are Styles?

Styles in Sitecore allow content authors to apply predefined CSS classes to components dynamically. This enables the easy application of different styles or visual designs to components without modifying the code.

Configuring Styles

Go to the following path:

/sitecore/content/YourProject/YourProject/Presentation/Styles

And in there you can create a new Style (the blue one)

And inside each styles you can create a style (orange one)

The content tree will look like this:

And inside of the Button Style, we can add the value of the class that will be added along side the Allowed Renderings where this style will appear as an option:

In this case we implement the btn value for the CTA Row Link rendering.

Code configuration

Inside your code you can reference this new value using the params prop that comes from ComponentProps

interface Fields {
  link: LinkField;
}

type CTARowLinkProps = ComponentProps & {
  fields: Fields;
};

const CTARowLink = ({ fields, params }: CTARowLinkProps) => {
  return <Link className={params.styles} field={fields.link} />;
};

export default withDatasourceCheck()<CTARowLinkProps>(CTARowLink);

As you can see in the snippet, I'm adding the params.styles to the classNames.

Moving to the Pages Editor, on the appropiate rendering you can manage if you want to add the class or not on the right side menu.

As you can see the CTA Row Link style configuration is down below and you can check the checkbox, this will ad the btn class.

Conclusion

Rendering Variants and Styles offer a powerful way to extend the flexibility and reusability of components in Sitecore XM Cloud. With rendering variants, you can present the same content in multiple ways, while styles allow for dynamic application of visual designs. Both of these features make it easier to build modular, scalable sites that can be easily customized by content authors. By following the above steps, you can enhance your Sitecore project and ensure that your components remain versatile and easy to manage.