Adding pager controls to the top of a category display page
Posted: Thu May 15, 2008 8:21 am
Introduction
Well, it's been some time since I've done an article. Life has been busy for Solunar.com. I've brought on more staff now helping with backend accounting and order tasks. I just bought a small commercial phone system to support multiple extensions and phone lines to enhance our ability to make/receive customer calls. Life is good. Busy, but good
I recently had a request to publish a little modification I made to my site some time ago. If you've wandered through my categories, you might have noticed I have paging controls both above and below the product or category images on a category display page. This change was actually pretty easy to accomplish so I will offer it here for all to enjoy.
What to do
My example today involves the CategoryGridPage4.ascx user control. This is the one I use throughout most of my site. The pager control programming is very well designed so it is easy for a programmer to manipulate them on the page. To start, we need to edit the ~/ConLib/CategoryGridPage4.ascx file and find this line of code:
and replace it with this:
What that does is create an upper version of the same pager controls that already exist on the bottom of the page. Save the file as this is the only change we need to make to the HTML side of things.
Next, let's edit the ~/ConLib/CategoryGridPage4.ascx.cs file. Here is where we have just a little work to do - we need to configure the extra set of pager controls. Edit the file and look for this code in the BindPagingControls() subroutine (note you might have to expand the PagingControls region by clicking the little 'plus sign' if you use VWD like me). If all else, just search for the text "BindPagingControls":
Now replace it with this:
All done? Good, save the file. Fire up a category page on your site that uses CategoryGridPage4 and see how it looks - paging controls at the top should appear and function identical to those on the bottom.
How it works
On the HTML side, we created a second "area" defined with the name "PagerPanelUpper". In this "area", we simply duplicated the same code used to make the pager controls at the bottom.
On the code side, we assigned a datasource to the new upper pager control, just like the bottom pager control. Then we told IIS to bind that datasource to the control i.e. connect it and initialize it. The really cool part is we're able to use the same programming routines the bottom pager control uses, so there's really no new code. Any future changes we make to the programming of the pager controls will automatically affect both the upper and lower ones.
Conclusion
Every opportunity to improve your site visitor experience is an opportunity to make a sale. By adding additional pager controls to your category pages, you make it easier for customers to navigate the products you sell.
Well, it's been some time since I've done an article. Life has been busy for Solunar.com. I've brought on more staff now helping with backend accounting and order tasks. I just bought a small commercial phone system to support multiple extensions and phone lines to enhance our ability to make/receive customer calls. Life is good. Busy, but good
I recently had a request to publish a little modification I made to my site some time ago. If you've wandered through my categories, you might have noticed I have paging controls both above and below the product or category images on a category display page. This change was actually pretty easy to accomplish so I will offer it here for all to enjoy.
What to do
My example today involves the CategoryGridPage4.ascx user control. This is the one I use throughout most of my site. The pager control programming is very well designed so it is easy for a programmer to manipulate them on the page. To start, we need to edit the ~/ConLib/CategoryGridPage4.ascx file and find this line of code:
Code: Select all
<div class="catalogWrapper">Code: Select all
<div class="catalogWrapper">
<asp:PlaceHolder ID="PagerPanelUpper" runat="server">
<div class="paging">
<asp:Repeater ID="PagerControlsUpper" runat="server" OnItemCommand="PagerControls_ItemCommand" EnableViewState="true">
<ItemTemplate>
<asp:LinkButton ID="PageLink" runat="server" Text='<%#Eval("Text")%>' CommandName="Page" CommandArgument='<%#Eval("PageIndex")%>' Enabled='<%#Eval("Enabled")%>'></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</div>
</asp:PlaceHolder> Next, let's edit the ~/ConLib/CategoryGridPage4.ascx.cs file. Here is where we have just a little work to do - we need to configure the extra set of pager controls. Edit the file and look for this code in the BindPagingControls() subroutine (note you might have to expand the PagingControls region by clicking the little 'plus sign' if you use VWD like me). If all else, just search for the text "BindPagingControls":
Code: Select all
PagerControls.DataSource = pagerLinkData;
PagerControls.DataBind();
}
else
{
PagerPanel.Visible = false;
}
Code: Select all
PagerControls.DataSource = pagerLinkData;
PagerControls.DataBind();
//BEGIN: Solunar Mod
PagerControlsUpper.DataSource = pagerLinkData;
PagerControlsUpper.DataBind();
//END: Solunar Mod
}
else
{
PagerPanel.Visible = false;
//BEGIN: Solunar Mod
PagerPanelUpper.Visible = false;
//END: Solunar Mod
}
How it works
On the HTML side, we created a second "area" defined with the name "PagerPanelUpper". In this "area", we simply duplicated the same code used to make the pager controls at the bottom.
On the code side, we assigned a datasource to the new upper pager control, just like the bottom pager control. Then we told IIS to bind that datasource to the control i.e. connect it and initialize it. The really cool part is we're able to use the same programming routines the bottom pager control uses, so there's really no new code. Any future changes we make to the programming of the pager controls will automatically affect both the upper and lower ones.
Conclusion
Every opportunity to improve your site visitor experience is an opportunity to make a sale. By adding additional pager controls to your category pages, you make it easier for customers to navigate the products you sell.