Introduction

In the realm of headless Content Management Systems (CMS) and Sitecore Experience Accelerator (SXA), content editors often encounter the challenge while starting a new site from scratch, struggling to establish a consistent structure and assign appropriate components.

SXA establishes a standard site structure with headless CMS. This involved creating a foundational layout using predefined page templates and assigning the default components with specific variants. Our aim is to enable content editors to effortlessly add content without the need to design the basic structure themselves.

However, when it comes to incorporating specific variants, the out-of-the-box (OOTB) solution lacks direct support. To achieve this, let's explore the use of Sitecore PowerShell Extensions (SPE).

Utilizing Sitecore PowerShell Extensions (SPE)

SPE provides a rich scripting environment within the Sitecore desktop, allowing users to write and execute PowerShell scripts directly within the Sitecore interface. It offers seamless integration with the Sitecore APIs, allowing users to interact with Sitecore items, templates, media libraries, and other components using PowerShell commands. With SPE, you can automate repetitive tasks, such as item creation, deletion, publishing, indexing, and content migration. Resulting in saving time and effort for developers and administrators.

Here are some useful resources to learn more about Sitecore PowerShell Extensions (SPE):

• Official Documentation: The official documentation provides comprehensive information on installing, configuring, and using SPE. Visit Sitecore PowerShell Extensions Documentation to access the documentation.

• Sitecore Marketplace: The Sitecore Marketplace page for SPE contains additional information, user reviews, and community discussions. Visit Sitecore Marketplace - SPE for more details.

To address this challenge, I leveraged the OOTB solution of SPE which creates a basic site structure with specific modules.

Add rendering variants

In the process of establishing a new website and scaffolding default pages with various components, it is often encountered that multiple rendering variants are required for each component. However, selecting the appropriate variant for each component can prove to be a daunting task. To overcome this challenge, the following steps can be implemented:

1. Add the variants in branch templates:- /sitecore/templates/Branches/Feature/MySite

1. Get the component in which the variant needs to be added. For our example its Image component:-

$renderingImage = Get-Item -Path '/sitecore/layout/Renderings/Feature/PreranaWebsite/Media/Image'

1. Prepare rendering definition:-

# prepare rendering definitions

$renderingImageDefinition = $renderingImage | New-Rendering

1. Prepare rendering variant. For example, this will have the list of variants for the image component: -

$service = [Sitecore.DependencyInjection.ServiceLocator]::ServiceProvider.GetService([Sitecore.XA.Foundation.Variants.Abstractions.Services.IAvailableRenderingVariantService])

$imageVariants = $service.GetAvailableRenderingVariants($Site, $renderingImage.Name, $renderingImage.ID, $item.TemplateID)

1. You can create a small utility function that takes two input parameters :

   a. List of rendering variants

   b. Name of the rendering variant that needs to be set

It will look for the specific variant name and then return the ID for the specific variant which would be added to the component on any page as shown below:-

# Get the rendering variants by name and assign them to specific rendering

function Get-RenderingVariantByName {

[CmdletBinding()]

param($Variants, $Name)

foreach ($variant in $Variants)

{

if ($variant.Name -eq $Name)

{

return $variant.ID.ToString();

}

}

6. Invoke the function by adding the component to the specific page:-

# change Demo Page Template

$demo = Get-Item -Path "$sitePath/Demo"

#Get the specific variant by invoking the utility function

$imageTitleVariant = Get-RenderingVariantByName -Variants $imageVariants -Name "WithTitle"

#Add the component to the page

Add-Rendering -Item $demo -PlaceHolder "/headless-main" -Instance $renderingImageDefinition -Parameter @{ "FieldNames" = $imageTitleVariant; "DynamicPlaceholderId" = "1" }

7. Once the script is executed, the page will have the variant added to the component:-

Conclusion:

I hope this article has provided you with valuable insights and practical guidance. Now, it's your turn to dive in, experiment, and take advantage of the features in SXA.

If you have any questions or need further assistance, please feel free to reach out in the comments section below. Follow me for more content on Sitecore. Happy site scaffolding!