Optimizely CMS - Learning by Doing: EP06 - Create Header, Footer, Menu & Component/View for Blocks

 

Episode 6 is Live!!

The latest installment of my Learning by Doing: Build Series on Optimizely CMS 12 is now available on YouTube!

This video demonstrates how to build common components like headers and footers, create a dynamic navigation menu, and set up views for blocks in Optimizely CMS 12.

Here's a summary of the key steps:

• Creating Header and Footer Components: The video shows how to create header.cshtml and footer.cshtml files under the Views/Shared folder. These are initially simple but can be enhanced later.
• Integrating Components into Layout: The created header and footer partial views are then integrated into the main _Layout.cshtml file using await Html.RenderPartialAsync to make them common across the website .
• Building a Dynamic Menu: The header component is enhanced to include a dynamic menu. This involves injecting IContentLoader to retrieve child pages from the start page and iterating through them to create hyperlinks .
• Creating Views for Blocks (CMS 12 specific): For blocks like "Ingredient Item Block" and "Recipe Steps Block," the process is different in CMS 12 compared to earlier versions . It requires:
• View Models: Creating separate view models (e.g., IngredientViewModel) for each block to hold the data to be displayed.
• Components (View Components): Creating view components (e.g., IngredientViewComponent) that inherit from AsyncBlockComponent and map data from the block's model to its view model .
• Views: Creating the actual Razor views (default.cshtml) for each block under a specific folder structure: Views/Shared/Components/[Block Model Name]/default.cshtml. These views then use the view model to display the block's content .