Sitecore Scriban: Using Dynamic Placeholders

A Brief History of Dynamic Placeholders

More like Traumatic Placeholders, amirite? If you've been Sitecore-ing for long enough you've likely seen enough for you and your therapist to know what I'm talking about.

Thankfully over the years dynamic placeholders have evolved from a community module in Sitecore 8 (and previous), to having native support in Sitecore 9 and up, to now I'd say having a wonderfully simple implementation in Scriban.

Dynamic Placeholders Example

While Sitecore SXA comes without its own system for containers & container components, in this case I was implementing a new series of containers leveraging Tailwind CSS.

Instead of implementing a new grid system within SXA (where users can determine the column, widths etc) I created a container component in Scriban and used different rendering variants to for the different widths (50/50, 35/65, 25/25/50).

All you have to do is put an asterisk after the placeholder name you're targeting, and some wonderful Sitecore pipeline will do the rest for you. For example:

<div class="mx-auto max-w-7xl">
    <div class="flex flex-row flex-wrap"> 
        <div class="basis-[100%] lg:basis-1/2"> 
            {{ sc_placeholder "main*" }} 
        </div>
        <div class="basis-[100%] lg:basis-1/2">
            {{ sc_placeholder "main*" }} 
        </div>         
    </div> 
</div>

Again - note the asterisks at the end of the placeholder name. This example shows the two columns being created in Tailwind CSS, each with a unique dynamic placeholder target main.

Thanks for checking out this simple post!