Adding pager controls to the top of a category display page

This forum is where we'll mirror posts that are of value to the community so they may be more easily found.
Post Reply
User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Adding pager controls to the top of a category display page

Post by AbleMods » 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:

Code: Select all

            <div class="catalogWrapper">
and replace it with this:

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>                    
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":

Code: Select all

            PagerControls.DataSource = pagerLinkData;
            PagerControls.DataBind();
        }
        else
        {
            PagerPanel.Visible = false;
        }
Now replace it with this:

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
        }
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.
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

User avatar
Hostmaster
Commander (CMDR)
Commander (CMDR)
Posts: 126
Joined: Fri Jan 04, 2008 3:30 pm
Location: Melbourne Fl
Contact:

Re: Adding pager controls to the top of a category display page

Post by Hostmaster » Thu May 15, 2008 10:57 am

Joe

Thats Great, Thanks for the post.

I am having a little trouble with the .paging span , .paging .current Style for this, it doesnt seem to work. the rest of the paging styles seem fine. Any Ideas?

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Adding pager controls to the top of a category display page

Post by AbleMods » Thu May 15, 2008 12:33 pm

Email me your categorygridpage4.ascx file - I need to compare yours to mine. I'm wondering if mine was modified elsewhere without me realizing it.

My site is getting more and more modified now, so it's harder for me to document clean modifications for the rest of the AC7 community using a standard install.
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

User avatar
batmike
Commander (CMDR)
Commander (CMDR)
Posts: 123
Joined: Tue Sep 04, 2007 10:46 am
Location: Minneapolis, MN
Contact:

Re: Adding pager controls to the top of a category display page

Post by batmike » Mon May 19, 2008 4:18 pm

Thanks ... the extra page controls make it a lot easier to see the navigation, so users don't get confused

Mike718NY
Commodore (COMO)
Commodore (COMO)
Posts: 485
Joined: Wed Jun 18, 2008 5:24 pm

Re: Adding pager controls to the top of a category display page

Post by Mike718NY » Sun Jul 20, 2008 1:11 pm

I noticed you didn't do this same great feature for your Search pages.
I am going to add top paging to my Search pages.
I'll post the code if it comes out ok.

Mike718NY
Commodore (COMO)
Commodore (COMO)
Posts: 485
Joined: Wed Jun 18, 2008 5:24 pm

Re: Adding pager controls to the top of a category display page

Post by Mike718NY » Sun Jul 20, 2008 1:43 pm

Was easy. Took 5 minutes.

Code: Select all


1. Add this to the top part of your SearchPage.ascx page:

<asp:Panel ID="PagerPanelTOP" runat="server">
<div class="paging">
<asp:Repeater ID="PagerControlsTOP" runat="server" OnItemCommand="PagerControls_ItemCommand">
<ItemTemplate>
<a class='<%#Eval("TagClass")%>'  href='<%#Eval("NavigateUrl")%>'><%#Eval("Text")%></a>
</ItemTemplate></asp:Repeater></div></asp:Panel>


2. Modify these code sections, . . anything with "TOP" at the end is added, leave the rest:

      //added:
      PagerPanelTOP.Visible = true;
      PagerPanel.Visible = true;            <<  just add above this one, leave this one alone

      Same thing here, just add the first 2 lines above the other one:
      //added:
      PagerControlsTOP.DataSource = NavigationHelper.GetPaginationLinks(currentPagerIndex, totalPages, baseurl);
      PagerControlsTOP.DataBind();      
      PagerControls.DataSource = NavigationHelper.GetPaginationLinks(curren . . . . . .       
      PagerControls.DataBind();

      and one more:
      //added:
      PagerPanelTOP.Visible = false;
      PagerPanel.Visible = false;          << leave


You can leave this event as it is, because both controls can use it:

  protected void PagerControls_ItemCommand(object source, RepeaterCommandEventArgs e)
  {
    if (e.CommandName == "Page")        ..............



crazyjoe
Commander (CMDR)
Commander (CMDR)
Posts: 172
Joined: Mon Apr 26, 2010 2:20 pm

Re: Adding pager controls to the top of a category display page

Post by crazyjoe » Thu May 06, 2010 9:58 am

Any idea how to get this to work on 7.0.4? It looks like my code in CategoryGridPage.ascx and ascx.cs already has something like this, but I don't see pager controls on the top of my page, but they are correctly visible at the bottom.
Crazy Joe Sadloski
Webmaster
Hot Leathers Inc.
http://www.hotleathers.com

User avatar
s_ismail
Commander (CMDR)
Commander (CMDR)
Posts: 162
Joined: Mon Nov 09, 2009 12:20 am
Contact:

Re: Adding pager controls to the top of a category display page

Post by s_ismail » Thu May 06, 2010 10:37 am

Try something like that
[[ConLib:CategoryGridPage PagingLinksLocation="Top"]].

crazyjoe
Commander (CMDR)
Commander (CMDR)
Posts: 172
Joined: Mon Apr 26, 2010 2:20 pm

Re: Adding pager controls to the top of a category display page

Post by crazyjoe » Mon May 10, 2010 10:08 am

Thanks for the pro tip s_ismail. I want my pager controls to show up both on the top, and bottom. Your code makes it show up on the top only. Is there something else I can put in to make it visible on both the top and bottom of my category grid page?
Crazy Joe Sadloski
Webmaster
Hot Leathers Inc.
http://www.hotleathers.com

User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Re: Adding pager controls to the top of a category display page

Post by AbleMods » Mon May 10, 2010 10:50 am

crazyjoe wrote:Is there something else I can put in to make it visible on both the top and bottom of my category grid page?
Use TOPANDBOTTOM instead of just TOP.
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

crazyjoe
Commander (CMDR)
Commander (CMDR)
Posts: 172
Joined: Mon Apr 26, 2010 2:20 pm

Re: Adding pager controls to the top of a category display page

Post by crazyjoe » Mon May 10, 2010 1:41 pm

Thats it!!! Awesome. Thank you so much.
Crazy Joe Sadloski
Webmaster
Hot Leathers Inc.
http://www.hotleathers.com

Post Reply