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

Show Miscellaneous charges on the AC7 invoice

by Joe Payne 13. May 2008 00:47
Just a quick modification today, so here goes:

The default AC7 invoice doesn't show credits, discounts, extra charges etc. It has the programming to do so, but the code doesn't work like it should. If you've ever added an extra line item for a Discount and then printed the invoice, you'll see what I mean.

Here's how to fix it so the line shows every time. As I said, this is a quick fix (I was in a hurry today) so the "Other:" charge line will show on every invoice whether it has a zero amount or not. Perhaps when I have more time I can make it fully functional as Able intended.

Edit the ~/Admin/Orders/Print/Invoices.aspx page and find this line:

Code:
                            <tr id="trOther" runat="server" visible='<%# GetTotal(Container.DataItem, OrderItemType.Charge, OrderItemType.Coupon, OrderItemType.Credit, OrderItemType.Discount, OrderItemType.GiftCertificate, OrderItemType.GiftWrap) > 0) %>'  >


And remove the entire visible= parameter so the line looks like this:

Code:
                            <tr id="trOther" runat="server" >


Now go display an invoice for an order. You should see a line for "Other:" and it will contain the proper dollars for any discounts, coupons, additional charges etc that are part of the order line items.

Tags: , ,

AC7 Articles

Month List