What is a Snippet?
Snippets provide some much needed functionality within the Sitecore CMS.
If you’re not familiar with Snippets, they allow content editors to design and create “reusable page fragments” (or in atomic design terminology organisms) that can be used and reused within pages of your Sitecore site.
In Sitecore terms, a Snippet is an item that has renderings and content that is not rendered as a page, but that can be embedded within or copied into placeholders of pages.
Building A Snippet
A common use of Snippets is to build global elements for your website such as a site header / navigation and site footer.
A sample header from BrainJuice
In SCORE style, we build the navigation out of atomic components – building blocks including components like menu bars, fly out navigation items, drop down menus, and content such as images, text, maps, videos – whatever.
The BrainJuice Mega Menu
Embedding a Snippet into a Page or Standard Values
Once built, Snippets can be placed on a page (or added to standard values) by using a component provided in SCORE called “Reference a Snippet”. This method will embed the Snippet into the page.
Snippet components – Reference a Snippet and Run a Snippet Macro
Since the Snippet doesn’t belong to a single page, you don’t edit it within a page. We render the Snippet in a preview mode within the page to collapse its bits and pieces. If you wish to edit the Snippet, you follow the link provided.
A Snippet exists as its own item in Sitecore (and has its own renderings and content), and any changes to the Snippet content or presentation are automatically rendered within any page that references it.
Adding Embedded Personalization
The first interesting extension of Sitecore Personalization using Snippets is to embed a personalization rule within the Snippet itself.
Here’s a simple personalization to change the “featured product” in the fly out navigation based on the user belonging to a specific campaign.
In our second example, we will add personalization to an entire fly out panel within the main navigation. As you can see, this personalization will hide the fly out menu item within the mega menu for the first visit to the website, and show it on all subsequent visits that are tracked.
Personalization of a single menu item within the global site header.
With these personalization rules embedded within the global header, the rules will execute on every page. This turns out to be a pretty handy thing to do – personalization of global, reusable components and content in Sitecore provided by BrainJocks SCORE.
In the next article of this series, we’ll discuss how to personalize these embedded Snippets in an entirely different way – macro personalization.
