Let me start out by saying I felt this was a good route to take although may not be everyone’s first choice. There are more than one way to accomplish things correct? Here is how I do it.

What is a Variant?

A variant in SXA allows you to change the rendering output to display differently as needed. You can learn more about them by clicking here.

How to Setup a Variant

In SXA you will find the variants under /sitecore/content/[path]/Presentation/Rendering Variants. You will want to create a Variants parent item (/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/Variants) and underneath Variant Definition items (/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/Variant Definition). It is very important to name the Variants parent item the same name as your rendering that you will create. That is how SXA ties them together.

When adding the component to the page you will see the variants added.

The Code

In the view model we will inherit from the VariantsRenderingModel.

public class SuperfnaturalViewModel: VariantsRenderingModel
    {
         public string RenderingVariant { get; set; }

    }

The repository will inherit from the VariantsRepository. Using the method FillBaseProperties the necessary information to retrieve the variant information will be added to the model.

internal class SupernaturalRepository : VariantsRepository, ISupernaturalRepository
    {
        public override IRenderingModelBase GetModel()
        {
            SupernaturalViewModel supernaturalViewModel = new SupernaturalViewModel();

            FillBaseProperties(supernaturalCardsViewModel);
           
            return SupernaturalViewModel;
        }
    }

In the view we will get the selected variant using the FieldNames value (can also set this value in a variable in the view model). I know not the name (FieldNames?) I expected either.

string VariantGuid = Model.Rendering.Parameters["FieldNames"];

Checking What was Selected

Check default or if nothing is seletected.

@if (Constants.SupernaturalVariants.Default == VariantGuid || string.IsNullOrEmpty(VariantGuid))

View code goes here, you know HTML.

Check for the image left variant.

@if (Constants.SupernaturalVariants.ImageLeft == VariantGuid)

View code goes here, you know HTML.

Final Thoughts

Lots of ways to do this I am sure, but this was something I was familiar with and pretty easy for others to use in my opinion. There may be a better way, but as Adam Sandler says.