Sitecore container with variants to change background color

Question

I want to build a component in Sitecore that I can drag other components into when using Experience Accelerator, just like the out of the box container component. I'd also like to add variants on that component so the user can select a different variant that will change the background image or color of the container.

This seems like a pretty simple task, but I'm not sure where to start. So far, I have cloned the Page Content component. I was going to start with a Scriban variant, but I'm not sure if that's necessary to use Scriban. If I use Scriban, what do I use for the datasource?

Answer 1

The Container component is not a Variant component, so you can't create variants for it.

You have 2 options, the best as has already been mentioned, just add a Style option for the Container component and use that to add the background colors. It's the simplest and easiest to use option for content authors.

The 2nd is to clone an existing variant component, something like the Promo, and create your rendering variants with a placeholder for the content. This will give you the ability to have multiple rendering variants, but you will end up with a very heavy handed component for something as simple as a Container

To add a placeholder to a Rendering Variant, you can either use the Variant Placeholder item, if you are building the variant via the item model. Or, if you are using scriban templates, you can use {sc_placeholder "myPlaceholderKey"}.

As to your question about the Datasource item and cloning the Page Content component. For a component that is only there to act as a container, it is unlikely you would require a datasource item. However, the Page Content component does not use a datasource item, it uses the current context item. So {i_item} is your page item, and you would be able to render any fields on your page template.

Answer 2

If the only difference is the background color I would say follow this guide to handle the styling difference with a checkbox in the properties of a rendering:

Add a style for a rendering

Scriban could be useful if you want to be able to edit the markup from the Content Editor. For this particular application I don't think it would be of particular help or be a burden. To access the data source you can use {{i_datasource}} or {{i_item}}. The full documentation can be found here:

Scriban templates