Get development started with Sitecore Part 3: Pages and navigation
Now we need to focus our attention on the about page lets take a look at the about page
We can use the same layout we have and just create a new BoxContent for the About Bussines Casual content. But what about the “Our Team” content? Well… lets first create our new About page
Save and publish and if you named it the same way I did navigate to /about
You should see something like this:
This is because we have defined the rendering as default for each content pages on the __Standard Values of the Default Page template but since it currently does not have a data source selected is crashing because our code is not guarding against such scenarios.
Let’s improve our code so that It would be able to handle this kind of scenario:
See full source code here: Carousel.cshtml
I did by moving the declaration of the images field up and with an If block. Publish and reload and you should see something like this:
Now let’s create a BoxContent for the about page
Now use the experience or content editor to assign this about content to the main content placeholder.
Select the AboutContent Item and you should see something like this:
While we are on it let's remove the carousel from the Top Content since we won’t be using that for this page:
Save and publish and you should see something like this:
Let’s improve the presentation of the images with the text. Open the DefaultBoxContent.cshtml file on Visual Studio
Before we go on I made a change to the default content box view that consists in detecting if there is an image defined so that it will change the way the content is displayed if you are familiar with bootstrap this shouldn’t be too hard:
It should look like this now:
It’s an improvement but there is still something else We need to fix, take a look at the home page:
Let’s make our code able to identify if there is an image or not so that text will use all of the space if the image is not set.
Open the DefaultBoxContent.cshtml view and update it to:
Save and publish and refresh the home page and you should see something like this:
We have actually created an experience that allows us to add more pages and any BoxContent or Carousel that we want in the placeholders but We will don’t have anything for the “Our Team” content. So let's create a template for Staff also our navigation menu is not working properly let's fix that first
In Order to get the links for the about page I have done this in the Header.cshtml file I don’t think is the best approach but for the moment it works
Not that our links for we can shift our attention towards our team section of the about page, let's begin by creating the Staff template
It will contain Name, JobTitle and Picture fields
Now lets create the Team, I will create three content items in a folder called Team, feel free to use any random data for the fields.
Now we need to create a Team rendering and view lets create Team.cshtml first in the source code and paste the contents of the our team section in the about.html from the bootstrap template
And for the rendering:
Update our BottomContent allowed controls:
Save and publish and assign the team rendering to the BottomContent placeholder in the about page via the experience or content editor and you should have something like this:
To actually get the data here we don’t really need to assign a data source since we know exactly from where we are going to get that data So back in our Team.cshtml we are going to update it to something like this:
If you are an MVC Developer you probably know that querying the database from the view is not a good practice and we are going to address that in the last part of this series. For the moment this should work so refresh your about page and you should have something like this:
Great! now we can move the blog page, but before we continue its time to improve our code as you know we currently have our code full of bad practices, so we need to do refactoring and have a better code base before we continue to drag these bad practices to the rest of our code
Next: Part 4: A Better way
