Create a Category Page
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:
You have products in your catalog
You have assigned a layout and some controls to the products within your catalog
At the Content Editor
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.