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:
-
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>
-
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;
}
}
}
-
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.