1. Site Build Management

Create a Category Page

Version:

Categories are content items within Sitecore, data associated with Categories can be retrieved from the item. Categories could contain many children, consider paging the results of the category information to the user and making use of search to retrieve product and category children.

Complete the following prerequisites:

At the Content Editor

  1. Create a view for your category called _Category.cshtml and use it in the layout controls in Sitecore. You need a view for relationships displayed on the category page called _CategorySummary.cshtml.

    Category.cshtml

    @model CategoryViewModel
@{
    ViewBag.Title = Model.DisplayName;    
}
 
<div class="row">
<h1>@Model.DisplayNameRender</h1>
    <p>@Model.DescriptionRender</p>
</div>
<div>
    <ul class="thumbnails">
        @foreach (var product in Model.ChildProducts)
        {   
            <li class="span3">
                @Html.Partial("~/Views/Catalog/_ProductSummary.cshtml", new ProductViewModel(product))
            </li>  
        }
    </ul>
</div>

    ProductSummary.cshtml

    @model ProductViewModel
@{
    var mod = (ProductViewModel)Model;
}
 
<a href="@Sitecore.Links.LinkManager.GetDynamicUrl(mod.Item)">
    <div class="thumbnail">
        <img src="@mod.FirstImagePath(ImageSize.Detail)" alt="">
        <div class="productLabel">
            <span class="label label-success">@mod.ListPriceRender</span><span class="label label-productName">@mod.DisplayNameRender</span>
        </div>
        <div class="detailsFloatOver">
                <h4>@mod.DisplayNameRender </h4>
                <p>@mod.ListPriceRender</p>
        </div>
    </div>
</a>

  2. Create your basic view model for categories.

        public class CategoryViewModel : Sitecore.Mvc.Presentation.RenderingModel, IImageEntity
    {
        private Item _item;
 
        public CategoryViewModel() { }
        public CategoryViewModel(Item item) { this._item = item; }
 
        public override Item Item
        {
            get
            {
                if (this._item == null)
                    return base.Item;
 
                return this._item;
            }
        }
 
        public string DisplayName { get { return this.Item.DisplayName; } }
        public HtmlString DisplayNameRender
        {
            get
            {
                return PageContext.Current.HtmlHelper.Sitecore().Field(Sitecore.FieldIDs.DisplayName.ToString(), this.Item);
            }
        }
 
        public string Description
        {
            get { return this.Item["Description"]; }
            set { this.Item["Description"] = value; }
        }
 
        public HtmlString DescriptionRender
        {
            get
            {
                return PageContext.Current.HtmlHelper.Sitecore().Field("Description", this.Item);
            }
        }
 
        public string ImageFilename
        {
            get { return this.Item["Image_filename"]; }
            set { this.Item["Image_filename"] = value; }
        }
 
        public List<Item> ChildProducts { get; protected set; }
        public List<Item> ChildCategories { get; protected set; }
 
        [System.Xml.Serialization.XmlIgnore]
        protected ViewContext CurrentViewContext { get { return ContextService.Get().GetCurrentOrDefault<ViewContext>(); } }
 
        public void Initialize(Rendering rendering, List<Item> products, List<Item> childCategories)
        {
            base.Initialize(rendering);
 
            if (products != null && products.Count > 0)
                this.ChildProducts = products;
 
            if (childCategories != null && childCategories.Count > 0)
            {
                this.ChildCategories = childCategories;
            }
        }
    }

  3. Create an action controller.

    public ActionResult Category()
        {
            var viewModel = GetCategoryViewModel(this.Item, this.CurrentRendering);
            return View(this.CurrentRenderingView, viewModel);
        }

        protected virtual CategoryViewModel GetCategoryViewModel(Item categoryItem, Rendering rendering)
        {
            if (HttpContext.Items[_CurentCategoryViewModelKeyName] == null)
            {
                var categoryViewModel = new CategoryViewModel();
                var childProducts = categoryItem.Children.ToList();
                categoryViewModel.Initialize(rendering, childProducts, new List<Item>());
                HttpContext.Items[_CurentCategoryViewModelKeyName] = categoryViewModel;
            }
 
            var viewModel = (CategoryViewModel)HttpContext.Items[_CurentCategoryViewModelKeyName];
            return viewModel;
        }

Previewing a category from within the Sitecore content editor displays a page with details about that category.

If you have suggestions for improving this article, let us know!