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!