Add pager controls to the category grid page

by Joe Payne 16. May 2008 00:08
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:
            <div class="catalogWrapper">


and replace it with this:
Code:
            <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:
            PagerControls.DataSource = pagerLinkData;
            PagerControls.DataBind();
        }
        else
        {
            PagerPanel.Visible = false;
        }


Now replace it with this:
Code:
            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.

Tags: , ,

AC7 Articles

Creating a new category display page

by Joe Payne 6. March 2008 12:30
Introduction
There are about a billion reasons to create a new category page, so I won't go into the why or what-for. Suffice it to say, you may want one so here is how to do it.

Copy the file
Pick the category display page you'd like to use as your starting point. For this document, let's assume it's CategoryGrid2.aspx. Let's assume your new file name will be "CustomGrid2.aspx". Avoid using new category page filenames of "CategoryGrid?.aspx" as future AC7 updates might include additions that overwrite your page.

Copy the file ~/CategoryGrid2.aspx to "CustomGrid2.aspx". Now you have to edit the new file so AC7 will know to treat it as a category display page.

Modifying the file
Category display pages are identified in the system using this comment line in the beginning of the .aspx file:

[quote] 
<%--
<DisplayPage>
    <Name>Category Grid (Deep Item Display)</Name>
    <NodeType>Category</NodeType>
    <Description>The defualt category page that displays products in a grid format. All sub-products in all sub-categories of the category are displayed. Allows customers to browse your catalog.</Description>
</DisplayPage>
--%>
[/quote]

In your new file copy, be sure to change the name and description values of the comment section as shown above to differentiate yours from the included pages.

Save it.

Conclusion
You now have a new choice in the drop downs for category display pages. If you've modified the comment section correctly at the beginning of the new file, AC7 will recognize it and use it just like any other category display page.

Tags: ,

AC7 Articles

Month List