Sitecore has some excellent features which Front-End developers could benefit from using in a project. One feature that stands out to me as a Front-End Developer is Compatible Renderings. This simple to set-up feature really improves Content Editor’s experience in the Experience (Page) Editor allowing flexible page designs in a matter of minutes.
What are Compatible Renderings?
A Compatible Rendering is simply a component that can be replaced with another component providing both use the same datasource type (or no datasource at all); e.g. use the same type of data.
For example, in Sitecore we have a Film template which containing the following items:
We have two renderings “Film Card” and “Film Banner” which displays the same data but in a different presentation style. One a small rendering showing basic information of the film. The second a full width rendering showing in a more ‘Hero’ style format. This allows Film Card component to be switched out for Film Banner in a few clicks, showing the same data but in a completely different design. Pretty cool huh?
An example of this in the real world could be Rogue One now available to preorder. But since we’re using Compatible Renderings on release it would only require a few clicks to promote the film in a eye-catching banner.
Film Card CodePen example:
Film Banner CodePen example:
This should give you an idea of what’s possible; reusing Content (what Sitecore is all about) in a number of different styles, designs and even functionality. You are enabling your Content Editors to think more about what they can do with what you’ve built them than sticking to the assets from the design phase.
Why use Compatible Renderings?
Compatible renderings allow you to achieve the following:
- Data reuse – less time required for development
- Renderings can have multiple compatible renderings – lots of vibrant ways to display the content
- Editors can change the design of the page whilst using the same content – in a few clicks!
- Displaying the same data to a user in a new way, perhaps to draw their attention for a Call to Action – as seen in the CodePen examples
Compatible Renderings are one of the many great features Sitecore offers; they’re so easy to set up, require no additional code / development and they’re nice quick wins in any project!
One quick note is that you should always think about your data structure before designing and building your components in Sitecore. This will feed into compatible renderings, placeholder settings, custom experience editor buttons and so on.
If you head over to the Sitecore Helix website you will find a brief explanation of what Compatible Renderings are and their purpose.
How to Set Up Compatible Renderings
Compatible renderings are pretty straightforward;
- In the Content Editor, locate the rendering or sublayout for example /sitecore/layout/Renderings/Frontend Example/Film Card
- Click on the book icon
- From the dropdown select Compatible Renderings
- Using the multilist field, Locate the rendering or sublayout you wish to make compatible with this one
- To confirm its set up open the Experience Editor, add / find the rendering on the page and click that rendering you should see recycle icon on the toolbar
That’s it! We now have two components that can switch between one another. You can have any number of Compatible Renderings.
Front-End approach to Compatible Renderings
When planning the front-end for your Sitecore project, you should consider a few things before writing any code.
Here’s what I do:
- Define all components upfront – I sketch them on paper giving each component a name and its functionality
- Create each component in the solution and Sitecore – Usin meaningful folder structure, e.g. /core, /components, /global etc… for grouping by purpose
- Create each component in the solution
- Use a CSS naming methodology like B.E.M
- Create your base HTML structure for each component and add your CSS class naming (based on the naming methodology you’ve chosen), try to stay consistent with your class naming.
- Break your pre-processor files into _partial files for example _film-card.scss, _film-banner.scss.
- Identify components that can use the same datasource or datatype – if so, you just identified Compatible Renderings!
- Set up Placeholder settings and add each component to a Placeholder
To see exactly what I do when beginning a Sitecore project as a Front-End Developer have a look at my previous blog post Sitecore frontend approach quick start guide.
Keep in mind Sitecore is flexible and allows components to be added to multiple locations on a page. This can cause problem for frontend developers who are used to thinking in terms of pages instead of modular components. This can be mitigated by identifying and planning all the components before writing a line of code.
I hope this post helped you to understand the value of Compatible Renderings in Sitecore, how to identify them and how to get them into your Sitecore builds.
Thanks for reading.