Removing dropdowns from category grid
Posted: Tue Oct 21, 2014 2:47 pm
We are trying to build our blog into AC, and while this will mean a bit more manual entry of 'posts' by creating categories to be used as 'tags', but our hope is that bringing the content into the AC site and having the posts show up in the XML sitemap, instead of having run under different software in a subfolder, that this will help with SEO. It also keeps a completely consistent appearance across the website and blog. If anyone sees fault in our reasoning please let me know.
It seems that the best category grid to use is the CategoryDetails grid. We have managed to remove the column for the thumbnail, giving the post the full width of the main panel. We would also like to remove the sort menu (no reason for sorting) and number of items per page (we would like hard-code this). I have gotten some distance on this, but when I try to remove the sort dropdown completely I get an error. When I try to remove the items per page dropdown it displays nothing. Any help would be appreciated. The code, as far as I have gotten it, is below.
.ASCX file:
.CS file:
We also found a bug in this category grid (CategoryDetailsPage.ascx)- if you run onto multiple pages, the last product from the previous page displays. In other words, if you have 20 items, and the page is set to display 12 items, then you will display items 1-12 on page one, and 12-20 on page two. I am sure that this is a simple fix, but I do not see where to correct this.
It seems that the best category grid to use is the CategoryDetails grid. We have managed to remove the column for the thumbnail, giving the post the full width of the main panel. We would also like to remove the sort menu (no reason for sorting) and number of items per page (we would like hard-code this). I have gotten some distance on this, but when I try to remove the sort dropdown completely I get an error. When I try to remove the items per page dropdown it displays nothing. Any help would be appreciated. The code, as far as I have gotten it, is below.
.ASCX file:
Code: Select all
<%@ Control Language="C#" AutoEventWireup="True" Inherits="AbleCommerce.ConLib.BlogPage" CodeFile="BlogPage.ascx.cs" %>
<%--
<conlib>
<summary>A category page that displays all contents of a category with summary description in a row format. This page displays products, webpages, and links.</summary>
<param name="DefaultCaption" default="Catalog">Caption text that will be shown as caption when root category will be browsed.</param>
<param name="DefaultCategorySummary" default="Welcome to our store.">Summary that will be shown when root category will be browsed.</param>
<param name="PagingLinksLocation" default="BOTTOM">Indicates where the paging links will be displayd, possible values are "TOP", "BOTTOM" and "TOPANDBOTTOM".</param>
</conlib>
--%>
<div id="categoryDetailsPage">
<div class="section">
<div class="pageHeader">
<h1><asp:Literal ID="Caption" runat="server" EnableViewState="False"></asp:Literal></h1>
</div>
<div class="content">
<asp:Literal ID="CategoryDescription" runat="server" EnableViewState="false"></asp:Literal>
</div>
</div>
<div class="section">
<div class="content">
<asp:PlaceHolder ID="phCategoryContents" runat="server">
<asp:Panel ID="PagerPanelTop" runat="server" CssClass="pagingPanel">
<asp:Repeater ID="PagerControlsTop" runat="server">
<ItemTemplate>
<a class='<%#Eval("TagClass")%>' href='<%#Eval("NavigateUrl")%>'><%#Eval("Text")%></a>
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
<div class="section searchSortHeader">
<div class="content">
<table width="100%" cellpadding="3" cellspacing="0" border="0">
<tr>
<td align="left">
<div class="sortPanel">
<asp:DropDownList ID="SortResults" runat="server" AutoPostBack="true" CssClass="sorting" EnableViewState="false">
</asp:DropDownList>
</div>
<asp:Panel ID="PageSizePanel" runat="server" CssClass="pageSizePanel">
<asp:Label ID="PageSizeLabel" runat="server" Text="Display:" CssClass="fieldHeader" EnableViewState="false" AssociatedControlID="PageSizeOptions"></asp:Label>
<asp:DropDownList ID="PageSizeOptions" runat="server" AutoPostBack="true" CssClass="pageSizeOptions" EnableViewState="false">
<asp:ListItem Text="12 Items" Value="12" Selected="True"></asp:ListItem>
</asp:DropDownList>
</asp:Panel>
</td>
</tr>
</table>
</div>
</div>
<div class="categoryDetailsListing">
<div class="itemListing">
<asp:Repeater ID="CatalogNodeList" runat="server" OnItemDataBound="CatalogNodeList_ItemDataBound" EnableViewState="false">
<ItemTemplate>
<div class="itemContainer">
<div class="itemDisplay">
<div class="detailsArea">
<div class="features">
<asp:Panel ID="NamePanel" runat="server" CssClass="itemName">
<asp:HyperLink ID="ItemName" runat="server"></asp:HyperLink>
</asp:Panel>
<asp:Panel ID="SummaryPanel" runat="server" CssClass="summary">
<asp:Label ID="ItemSummary" runat="server"></asp:Label>
</asp:Panel>
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<asp:Panel ID="PagerPanel" runat="server" CssClass="pagingPanel">
<asp:Repeater ID="PagerControls" runat="server">
<ItemTemplate>
<a class='<%#Eval("TagClass")%>' href='<%#Eval("NavigateUrl")%>'><%#Eval("Text")%></a>
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
</asp:PlaceHolder>
<asp:PlaceHolder ID="phEmptyCategory" runat="server" Visible="false" EnableViewState="false">
<div align="center">
<asp:Localize ID="EmptyCategoryMessage" runat="server" Text="The category is empty." EnableViewState="false"></asp:Localize>
</div>
</asp:PlaceHolder>
</div>
</div>
</div>
Code: Select all
namespace AbleCommerce.ConLib
{
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using CommerceBuilder.Catalog;
using System.ComponentModel;
using CommerceBuilder.Utility;
[Description("A category page that displays all contents of a category with summary description in a row format. This page displays products, webpages, and links.")]
public partial class BlogPage : System.Web.UI.UserControl
{
private Category _Category;
private string _DefaultCaption = "Catalog";
private string _DefaultCategorySummary = "Welcome to our store.";
private int _pageSize = 12;
private int _currentPageIndex;
private int _lastPageIndex;
/// <summary>
/// Name that will be shown as caption when root category will be browsed
/// </summary>
[Personalizable(), WebBrowsable()]
[Browsable(true), DefaultValue("Catalog")]
[Description("Caption text that will be shown as caption when root category will be browsed.")]
public string DefaultCaption
{
get { return _DefaultCaption; }
set { _DefaultCaption = value; }
}
/// <summary>
/// Summary that will be shown when root category will be browsed
/// </summary>
[Personalizable(), WebBrowsable()]
[Browsable(true), DefaultValue("Welcome to our store.")]
[Description("Summary that will be shown when root category will be browsed.")]
public string DefaultCategorySummary
{
get { return _DefaultCategorySummary; }
set { _DefaultCategorySummary = value; }
}
private string _PagingLinksLocation = "BOTTOM";
/// <summary>
/// Indicates where the paging links will be displayd, possible values are "TOP", "BOTTOM" and "TOPANDBOTTOM"
/// </summary>
[Personalizable(), WebBrowsable()]
[Browsable(true), DefaultValue("BOTTOM")]
[Description("Indicates where the paging links will be displayd, possible values are \"TOP\", \"BOTTOM\" and \"TOPANDBOTTOM\".")]
public string PagingLinksLocation
{
get { return _PagingLinksLocation; }
set
{
// possible values are "TOP", "BOTTOM" and "TOPANDBOTTOM"
String tmpLocation = value.ToUpperInvariant();
if (tmpLocation == "TOP" || tmpLocation == "BOTTOM" || tmpLocation == "TOPANDBOTTOM")
{
_PagingLinksLocation = tmpLocation;
}
}
}
public int CategoryId
{
get
{
if (ViewState["CategoryId"] == null)
ViewState["CategoryId"] = AbleCommerce.Code.PageHelper.GetCategoryId();
return (int)ViewState["CategoryId"];
}
set
{
ViewState["CategoryId"] = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (IsValidCategory())
{
string eventTarget = Request["__EVENTTARGET"];
if (string.IsNullOrEmpty(eventTarget) || !eventTarget.EndsWith("PageSizeOptions"))
{
string pageSizeOption = Request.QueryString["ps"];
if (!string.IsNullOrEmpty(pageSizeOption))
{
PageSizeOptions.ClearSelection();
ListItem item = PageSizeOptions.Items.FindByValue(pageSizeOption);
if (item != null) item.Selected = true;
}
}
if (!string.IsNullOrEmpty(eventTarget))
{
if (eventTarget.EndsWith("PageSizeOptions") || eventTarget.EndsWith("SortResults"))
{
string url = Request.RawUrl;
if (url.Contains("?"))
url = Request.RawUrl.Substring(0, Request.RawUrl.IndexOf("?"));
url += "?s=" + SortResults.SelectedValue;
url += "&ps=" + PageSizeOptions.SelectedValue;
Response.Redirect(url);
}
}
if (_Category != null)
{
int count = CatalogDataSource.CountForCategory(_Category.Id, true, true);
if (count > 0)
{
_currentPageIndex = AlwaysConvert.ToInt(Request.QueryString["p"]);
_pageSize = AlwaysConvert.ToInt(PageSizeOptions.SelectedValue);
_lastPageIndex = ((int)Math.Ceiling(((double)count / (double)_pageSize))) - 1;
CatalogNodeList.DataSource = CatalogDataSource.LoadForCategory(_Category.Id, true, true, _pageSize, (_currentPageIndex * _pageSize), SortResults.SelectedValue);
CatalogNodeList.DataBind();
int startRowIndex = (_pageSize * _currentPageIndex);
int endRowIndex = startRowIndex + _pageSize;
if (endRowIndex > count) endRowIndex = count;
if (count == 0) startRowIndex = -1;
BindPagingControls();
}
else
{
phEmptyCategory.Visible = true;
}
AbleCommerce.Code.PageVisitHelper.RegisterPageVisit(_Category.Id, CatalogNodeType.Category, _Category.Name);
}
}
}
protected void CatalogNodeList_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
{
if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
{
//GENERATE TEMPLATE WITH HTML CONTROLS
//TO OPTIMIZE OUTPUT SIZE
PlaceHolder itemTemplate1 = (PlaceHolder)e.Item.FindControl("phItemTemplate1");
CatalogNode catalogNode = (CatalogNode)e.Item.DataItem;
string catalogNodeUrl = this.Page.ResolveUrl(catalogNode.NavigateUrl);
string target = "_self";
if (catalogNode.CatalogNodeType == CatalogNodeType.Link)
target = ((Link)catalogNode.ChildObject).TargetWindow;
HyperLink itemName = (HyperLink)e.Item.FindControl("ItemName");
itemName.NavigateUrl = catalogNode.NavigateUrl;
itemName.Target = target;
itemName.Text = catalogNode.Name;
Label itemSummary = (Label)e.Item.FindControl("ItemSummary");
itemSummary.Text = catalogNode.Summary;
}
}
private bool IsValidCategory()
{
// IF IT IS ROOT CATEGORY
if (this.CategoryId == 0) return true;
else
{
// TRY TO LOAD THE CATEGORY AGAIN
if (_Category == null) _Category = CategoryDataSource.Load(this.CategoryId);
if (_Category != null && _Category.Visibility != CatalogVisibility.Private) return true;
else return false;
}
}
protected void BindPagingControls()
{
if (_lastPageIndex > 0)
{
PagerPanel.Visible = (PagingLinksLocation == "BOTTOM" || PagingLinksLocation == "TOPANDBOTTOM");
PagerPanelTop.Visible = (PagingLinksLocation == "TOP" || PagingLinksLocation == "TOPANDBOTTOM");
float tempIndex = ((float)_currentPageIndex / 10) * 10;
int currentPagerIndex = (int)tempIndex;
int totalPages = currentPagerIndex + 1 + _pageSize; // ADD ONE BECAUSE IT IS A ZERO BASED INDEX
if (totalPages > (_lastPageIndex + 1)) totalPages = (_lastPageIndex + 1);
string baseUrl;
if (_Category != null)
{
baseUrl = this.Page.ResolveUrl(_Category.NavigateUrl) + "?";
}
else
{
baseUrl = this.Page.ResolveUrl(Request.Url.AbsolutePath) + "?";
}
string s = Request.QueryString["s"];
if (!string.IsNullOrEmpty(s))
{
baseUrl = baseUrl + "s=" + s + "&";
}
string ps = Request.QueryString["ps"];
if (!string.IsNullOrEmpty(ps))
{
baseUrl = baseUrl + "ps=" + ps + "&";
}
if (PagerPanel.Visible)
{
PagerControls.DataSource = AbleCommerce.Code.NavigationHelper.GetPaginationLinks(currentPagerIndex, totalPages, baseUrl);
PagerControls.DataBind();
}
if (PagerPanelTop.Visible)
{
PagerControlsTop.DataSource = AbleCommerce.Code.NavigationHelper.GetPaginationLinks(currentPagerIndex, totalPages, baseUrl);
PagerControlsTop.DataBind();
}
}
else
{
PagerPanel.Visible = false;
PagerPanelTop.Visible = false;
}
}
}
}
