The Habitat Home Corporate site and the tools and processes in it, is a Sitecore® solution example built using standard Sitecore MVC on the Sitecore Experience Platform™ (XP) following the Helix architecture principles.
In the first blog-post called: Introducing Habitat Home Corporate on Sitecore 9.2, I had a look at how you can install the new Habitat Home demo site. In this second blog-post on Habitat Home Corporate, I’m going to walk you through the various functionalities that the demo site offers.
Content tree
The homepage of the Habitat Home Corporate site can be found in the content editor at the following location: /sitecore/content/Habitat Standard Sites/Habitat Home Corporate/Home.
Page Types
The Habitat Home Corporate site has been kept really simple in terms of page types as you can see in the content tree above. It comes with just a couple of page types:
- Page – a default page, where components can be added to
- News Overview – a news overview page
- News – the news detail page
- Search Page – the search page
- Team member – a team member detail page
Components
The Habitat Home Corporate site comes with a bunch of standard Sitecore MVC components:
Let’s walk through these components.
Card container
The Card container component is just a container in which card components can be added to.
Carousel
A carousel can be added to the page and points to a datasource item, from which the children of type Carousel Slide are rendered.
Hero
The Hero components is the grey content block, that’s mostly used as a header of the page.
Page Title
A very basic components that displays the context items’s page title.
Page Content
Rich Text content
Promo Image – Left
A 2 column component, with a promo image to the left and content to the right.
Promo Image – Right
A 2 column component, with a promo image to the right and content to the left.
Form Wrapper
Adds a form wrapper, needed to embed the Habitat Home Form Component, which renders out a Sitecore Forms form.
Centered Heading
Displays a centered heading.
Our team
Displays a list of teammembers.
Breadcrumb
Renders out a breadcrumb relative to the homepage.
Video
Renders out a video. YouTube & Vimeo are supported, as well as Sitecore Media Library uploaded .mp4 files.
Image CTA – Left
A block component, with an image to the left and content & call to action link to the right.
Image CTA – Right
A block component, with an image to the right and content & call to action link to the left.
Latest news
A component that shows the latest news, which is fueled by Sitecore Content Search.
With all these components, new pages can be constructed. Next to that there’s:
- Metadata functionality
- Search functionality & paging
- The demo site uses Sitecore Forms
- Itembuckets & Wildcard & paging functionality for news items.
Let’s dive a little bit deeper into some areas.
Search
On item /sitecore/content/Habitat Standard Sites/Habitat Home Corporate/Settings/SearchConfigurationSettings the default number of search result items per page can be configured. And you can configure the templates that are actually supported to be returned in the search results.
News
For news there’s a configuration setting as well. On item /sitecore/content/Habitat Standard Sites/Habitat Home Corporate/Settings/News Settings the default number of items on the news overview per page can be configured. News makes use of Sitecore Wildcard functionality and therefore works with the slug of the news item to be able to resolve the correct news item through Sitecore Content Search functionality.
The actual news items are located under /sitecore/content/Habitat Standard Sites/Habitat Home Corporate/Data/News, which is a Sitecore Bucket, and are served through the wildcard item located at /news/*. The news item’s ‘News Slug’ field is used which is a hyphen (-) seperated slug for the news item (e.g. cybersecurity-requires-a-heightened-level-of-collaboration). With that news slug the actual item will be resolved.
Sitecore Forms
Habitat Home Corporate has 2 Sitecore Forms configured, to demo basic Sitecore Forms functionality. They are located at the following locations:
- /sitecore/Forms/Habitat Standard Sites/Habitat Home Corporate/Contact Us
- /sitecore/Forms/Habitat Standard Sites/Habitat Home Corporate/Download whitepaper form
When you have used the default installation from my previous blog-post, these form can be found on the front-end site of the website at:
- https://habitathomecorporate.dev.local/Download-our-whitepaper
- https://habitathomecorporate.dev.local/About-Us/Contact-Us
Both forms can be edited and looked at in the Sitecore Forms Designer. On submit, several actions will be triggered such as:
- Identify a contact in xDB
- Trigger a goal
- Trigger an outcome
- Redirect to a page
In a follow up blog-post I will walk you through the marketing functionalities and some more things I’ve discovered.
Happy Sitecoring …
Robbert
