Sitecore Cookbook for Developers

Log in to Sitecore. Open the Content Editor from Launch Pad. You will find a default /sitecore/Content/Home item with the Title and Text fields. Delete this item as we will create our own custom template for the Home item.

In the /sitecore/Templates item, create a new Template Folder item, Cookbook. In this, create a Site Root template, leaving the base template set to the default Standard template, as shown in the following image:

In template builder, create different fields, Title and Body, as shown in the following image, and save the details:

We will now create a content page using this data template. Create a new content item, Home, in the /sitecore/Content path using the Site Root template that we created and fill in the appropriate information in these fields:

To show common details of websites, such as logo, copyright text, and some other information, create another Site Configuration template with fields such as Company Name, Logo, Copyright Text, and so on.

The Site Configuration item will be a non-visual item, so it should be created outside the Home item. Create a folder item Global in /sitecore/Content, and in this, create a content item, Configurations, using the preceding template, and fill in the appropriate details.

We will now create a layout from Visual Studio. From the SitecoreCookbook project, create an MVC main.cshtml view in the /Views folder to render field values from the previously created items. For this, put the following code in the view file inside the <h tml/body> tag:

<div id="header"> <a href="/">
  @Html.Sitecore().Field("Logo", Sitecore.Context.Database.GetItem("/sitecore/Content/Global/Configurations"))
</a> </div>

<div id="contentarea">
  <h1>@Html.Sitecore().Field("Title")</h1>
  @Html.Sitecore().Field("Body")
</div>

<div id="footer">
  @Html.Sitecore().Field("Copyright Text", Sitecore.Context.Database.GetItem("/sitecore/Content/Global/Configurations"))
</div>

We will now register this view file as a layout in Sitecore. In the /sitecore/layout/Layouts item, create a layout folder, Cookbook. In this, create a layout named Main Layout. Set the path field of this layout to /Views/main.cshtml.

Now we will assign the layout to the content items. Select the Site Root data template. From the ribbon, select Standard Values in the Builder Options tab. This will create the __Standard Values item for the template.

Select the __Standard Values item. From the ribbon, select the Details button in the Layout group from the Presentation tab. It will open a Layout Details dialog. For a Default layout, click on the Edit button, which will open the Device Editor dialog. Here, in the Layout section, select Main Layout and select OK. See the following image, which represents both the dialogs:

From the Content Editor, select the Home item. From the ribbon, click on the Preview button in the Publish group from the Publish tab. This will open your home page in preview mode, as shown in the following image, where you will find Logo, Title, Body, and Copyright Text.

Note

You can get the layout and style sheet files from the code bundle provided with this book to make it work, as shown in the following image:

Create one Common Fields data template with the Title, Body, Show in Menu, Image, and Icon fields. From its standard values, set Title as $name and tick the Show in Menu checkbox field. Also, from Layout Details, assign Main Layout to it, which we created in the previous recipe:

We will first create different subitems inside the Home item so that we can have enough items to render menu control properly. Here, $name entered in the Title field is a standard value token so that the name of the item will be stored in the Title field for newly created items. You can learn more about standard value tokens at http://goo.gl/qUE85h.

Create a few templates, for example, Product Section, Product Category, Product, and others. From their base template field, select the Common Fields template so that these fields, along with layout details, can get inherited to all these templates.

Create content items under the Home item, following the /Home/<Product Section>/<Product Category>/<Product> hierarchy, and fill in their Title, Body, and other fields' values. For example, refer to the following image:

Now, we will create a menu control to show all items created on the same hierarchical level of the context item. From Visual Studio, create a SideMenu.cshtml view in the /Views/Navigation folder and write the following code in it:

@model RenderingModel
<ol class="sidemenu">
  @foreach (var item in Model.Item.Parent.Children.ToArray())
  {
    if (@item["Show in Menu"] == "1")
    {
      <li>
        <a href="@Sitecore.Links.LinkManager.GetItemUrl(@item)">
          @item["Title"]
        </a>
      </li>
    }
  }
</ol>

Now we will register this view in Sitecore. Select /sitecore/layout/Renderings/, and create the Cookbook folder. In this, create a view rendering Side Menu and enter the view file path in the Path field, as shown in the following image:

In Main Layout or main.cshtml that we created in the previous recipe, place the following code in the appropriate place to render the menu on the page. Remember to update the item ID of the Side Menu rendering in this code:

<div id="sidemenu">
  @Html.Sitecore().Rendering("{2383A57F-21FF-4A77-9E2A-C467F0CEDA57}")
</div>

Now, preview any product item; you will find that all the items at the same hierarchical levels will be displayed, as shown in the following image:

In the SitecoreCookbook project, create a BreadcrumbItem class in the Models folder. This class will contain properties useful to render breadcrumb items. We inherited this class from Site core.Data.Items.CustomItem to implement custom items:

public class BreadcrumbItem : CustomItem
{
  public BreadcrumbItem(Item item)
    : base(item) {Assert.IsNotNull(item, "item");}

  public string Title
  {get { return InnerItem["Title"]; }}

  public bool IsActive
  {get { return Sitecore.Context.Item.ID == InnerItem.ID;}}

  public string Url
  {get { return LinkManager.GetItemUrl(InnerItem); }}
}

In the SitecoreCookbook project, create a rendering BreadcrumbList model class in the Models folder, which will make a list of all the breadcrumb items. Make sure that it inherits the Sitecore.Mvc.Presentation.RenderingModel class so that Sitecore will automatically invoke its Initialize() method when the view is invoked:

public class BreadcrumbItemList : RenderingModel
{
  public List<BreadcrumbItem> Breadcrumbs { get; set; }
  public override void Initialize(Rendering rendering)
  {
    Breadcrumbs = new List<BreadcrumbItem>();
    List<Item> items = GetBreadcrumbItems();
    foreach (Item item in items)
    {
      Breadcrumbs.Add(new BreadcrumbItem(item));
    }
    Breadcrumbs.Add(new BreadcrumbItem(Sitecore.Context.Item));
  }
}

Create the GetBreadcrumbItems() method to collect a list of breadcrumb items as follows:

private List<Sitecore.Data.Items.Item> GetBreadcrumbItems()
{
  string homePath = Sitecore.Context.Site.StartPath;
  Item homeItem = Sitecore.Context.Database.GetItem(homePath);
  List<Item> items = Sitecore.Context.Item.Axes.GetAncestors()
    .SkipWhile(item => item.ID != homeItem.ID)
    .ToList();
  return items;
}

We will now register this model in Sitecore. From the Content Editor, select the /sitecore/layout/Models item. Create a Cookbook folder, and create a BreadcrumbItemList model in it. Set the Model Type field value to the fully qualified type name of this class, as shown in the following image:

Now we will create a view to render breadcrumb items. In the SitecoreCookbook project, create a Breadcrumb.cshtml view in the /Views/Navigation folder. Set the created BreadcrumbItemList model in the @model directive. Place the view content as follows:

@model SitecoreCookbook.Models.BreadcrumbItemList
<ol class="breadcrumb">
  @foreach (var item in Model.Breadcrumbs) {
    <li>
      @if (@item.IsActive)
        { @item.Title }
      else { 
        <a href="@item.Url">
          @item.Title
        </a>
      }
    </li>
  }
</ol>

Register this view in Sitecore, and remember to assign the registered model to this view. So, when the view is invoked, Sitecore will initialize the mentioned model to collect the breadcrumb item list and pass it to the view:

In the same way as the previous recipe, place this breadcrumb view rendering in Main Layout so that it will get applied to all the items having this layout. Use the following code for this, and update the item ID of the view rendering in the code:

<div id="breadcrumb">
  @Html.Sitecore().Rendering("{764C9697-EA31-4409-8208-0CAECBD76500}")
</div>

Now, preview an item; you will find the breadcrumb on the site, as shown in the following image:

Create a Carousel Slide template, as shown in the following image. Set the Source property of the Image field so that a user can pick carousel images directly from the source media folder. Do the same for the Link Item field.

Create some carousel slide content items with appropriate field values.

We want to show some selected carousel slides on our Home page, so we will add the tree list type carousel slides field to the Site Root template so that we can select multiple carousel slide items, as shown in the following image:

We will now create a CustomItem class to represent carousel slide properties in the same way as the previous recipe. In the SitecoreCookbook project, create a CarouselSlide class in the Models folder and inherit it from the CustomItem class. Add Title, Image, and Url properties to it:

public class CarouselSlide: CustomItem
{
  public CarouselSlide(Item item)
    : base(item) { }

  public string Title{
    get { return InnerItem["Title"]; }
  }

  public HtmlString Image {
    get {
      return new HtmlString(FieldRenderer.Render(InnerItem, "Image"));
    }
  }

  public string Url {
    get {
      Item linkItem = Sitecore.Context.Database.GetItem(InnerItem["Link Item"]);
      if (linkItem != null)
        return LinkManager.GetItemUrl(linkItem);
      return "";
    }
  }
}

Now we will create a Controller class, which will create a list of CarouselSlide objects. In the SitecoreCookbook project, create a NavigationController controller in the Controllers folder. Create the ActionResult or ViewResult Carousel() method that will return a list of carousel items to the view:

public class NavigationController : Controller
{
  public ActionResult Carousel()
  {
    List<CarouselSlide> slides = new List<CarouselSlide>();

    MultilistField multilistField = Sitecore.Context.Item.Fields["Carousel Slides"];
    if (multilistField != null) {
      Item[] carouselItems = multilistField.GetItems();
      foreach (Item item in carouselItems) {
        slides.Add(new CarouselSlide(item));
      }
    }
    return PartialView(slides);
  }
}

Now we will register this controller and action method in Sitecore. Select the /sitecore/layout/Renderings/Cookbook item. Create a Carousel controller rendering and set the Controller and Controller Action fields, as shown in the following image:

Now we will create a view to render the carousel slides. In the SitecoreCookbook project, create a Carousel.cshtml view file in the /Views /Navigation folder:

@model IEnumerable<SitecoreCookbook.Models.CarouselSlide>
<div class="carousel-inner" role="listbox">
  @foreach (var item in Model) {
    <div>
      <a href="@item.Url" title="@item["Title"]">
        @item.Image
      </a>
    </div>
  }
</div>

In the Main Layout file, place this rendering using the following code. Remember to update the item ID of this controller rendering in the code.

@Html.Sitecore().Rendering("{62104CCC-D747-4671-BB3B-CFF041F42A5A}")

Preview the content item; it will show carousel images on the page. Making the carousel work fully, as shown in the following image, you may need to change HTML in the view and append style sheets, which you can get from the code bundle provided with this book:

We will first decide places where we can put content dynamically or we need placeholders, for example, breadcrumb, side menu, and main content area.

From Main Layout, remove the existing renderings from these places and add placeholders, breadcrumb, left-colum n, and main-content as follows:

<div class="container">
  <div id="breadcrumb">
    @Html.Sitecore().Placeholder("breadcrumb")
  </div>
  <div id="sidemenu">
    @Html.Sitecore().Placeholder("left-column")
  </div>
  <div id="contentarea">
    <article>
      @Html.Sitecore().Placeholder("main-content")
    </article>
  </div>
</div>

We already have breadcrumb and Side Menu view renderings; we will create a simple view rendering to show the Title, Body, and other fields in the main content area. In the SitecoreCookbook project, create a TitleAndBody.cshtml view file in the /Views/Content/ folder with the following content, and register this rendering:

<h1>@Html.Sitecore().Field("Title")</h1>
<div> @Html.Sitecore().Field("Body") </div>

Now, we will place Breadcrumb, Side Menu, and Title and Body renderings in breadcrumb, left-column, and main-content placeholders accordingly. From the Content Editor, select Standard Values of the Site Root template. From the ribbon, click on the Details button in the Layout group from the Presentation tab to open the Layout Details dialog. Click on the Edit button to open the Device Details dialog and select the Controls section. It will show an empty list, but once you add renderings on placeholders, they will be displayed, as shown in the following image:

To add renderings, click on the Add button from the Device Editor dialog. It will open the Select a Rendering dialog, where you can add renderings to particular placeholders, as shown in the following image:

Repeat steps 4 and 5 for all template standard values, where you want to add renderings. Now, preview different pages to see the power of placeholders; you will find the renderings are displayed on the pages!

From the Content Editor, select the /sitecore/layout/Placeholder Settings item. Create a placeholder setting main content item in it. In its Placeholder Key field, enter the name of the placeholder that we defined in the Main Layout, for example, main-content.

Now open the Home page in the Experience Editor. Find the Title and Body rendering that is placed on the main-content placeholder, as shown in the following image. From the floating toolbar visible there, click on Go to parent component to reach its parent component, which is the main-content placeholder in our case. Now, you will find two Add here buttons in the main-content placeholder to place components before and after the Title and Body rendering:

Clicking on this button will open a Select a Rendering dialog, from which you can select a component to add to that place. Select the Carousel rendering to place it before the Title and Body rendering, save the changes, and see how your page has been changed!

In the placeholder setting that we created, don't specify the Placeholder Key field (leave it blank) so that we can override it on the template level.

Select the standard values of the Site Root template. Open its Layout Details, and select the Select the Placeholder Settings tab in the Device Details dialog. Click on the Add button, which will open the Placeholder Setting dialog. Here, select the created placeholder setting, main content, and set the main-content placeholder name, as shown in the following image, and save the settings:

From the Content Editor, select standard values of the Site Root template. Open the Placeholder Setting dialog from the Device Editor. Remove any placeholder settings, if any. Create a new setting.

Set the Name to Home Content and the Placeholder Key field to our main-content placeholder key. In the Parent field, select the main content placeholder setting that we have already created. Here, select the required renderings from the Allowed Controls field:

Open the Home page in the Experience Editor. Add the renderings to it; you will find that only the preceding selected renderings will be available to pick, as shown in the following image:

In the same way, you can apply these settings to standard values on Product or any other template, as per your requirement.