How to increase the viewing size of the Catalog

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

How to increase the viewing size of the Catalog

Post by AbleMods » Tue Sep 07, 2010 8:58 am

Introduction
Time for some fun. Today's project involves adding a new dropdown list to the admin-side Catalog browse page. This dropdown will let you choose how many items will be shown per-page in the current category. Why you might ask? Well some of us in eCommerce-land have a lot of products in a single category. By a lot, I mean hundreds and hundreds of products. By default, the catalog browse page only shows 40 products at a time. Moving them 40 at a time is a pain.

For example, my http://www.Solunar.com website has thousands of products available for sale. I didn't hand-enter all of these of course. In fact, I didn't hand enter ANY of them. I wrote an import program that added them all to my store electronically. But my distributor doesn't categorize things the way I want them done, so most all of these products have to be moved around and broken up into appropriate sub-categories.

Enter: The Catalog Browse page. It gives you an elegant set of bulk functions that let you move stuff around in the store catalog with ease. However, I could have literally hundreds of products to move. Moving them 40 at a time is inefficient. So here is my solution: Adding a new dropdown that lets you choose how many items to show on each page of the catalog. There's a screenshot at the bottom of this post that shows what the end result looks like when you're done.

Changes to Make
As always, make a backup copy of your existing files before making these changes.

We're only working with two files today, both located in the /Admin/Catalog/ folder. First, find the browse.aspx file and edit it with your favorite text editor.

Look for this section of code in the Browse.aspx file:

Code: Select all

<td align="right">
    <asp:ImageButton ID="ParentCategory" runat="server" SkinID="ParentCategoryIcon" OnClick="ParentCategory_Click" EnableViewState="false" ToolTip="Parent Category" />
</td>
and change it to look like this:

Code: Select all

<td align="right">
    Show 
    <asp:DropDownList ID="list_PageSize" runat="server" AutoPostBack="true" >
        <asp:ListItem Text="20" Value="20" />
        <asp:ListItem Text="40" Value="40" />
        <asp:ListItem Text="100" Value="100" />
        <asp:ListItem Text="All" Value="10000" />
    </asp:DropDownList>&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:ImageButton ID="ParentCategory" runat="server" SkinID="ParentCategoryIcon" OnClick="ParentCategory_Click" EnableViewState="false" ToolTip="Parent Category" />
</td>
Save the changes. What you've just done is add a new dropdown list control to the page HTML code. However, we're not done yet. We haven't told IIS what to do with that dropdown list. Right now, you could select the choices all day long and nothing will happen. So let's add that server-side code to make it work the way we want.

Edit the browse.aspx.cs code-behind file and find the following section of code:

Code: Select all

    protected void Page_Load(object sender, EventArgs e)
    {
        BulkOptions.Attributes.Add("onchange", "if(!confirmSelection()) return false;");
    }
And change it to look like this:

Code: Select all

    protected void Page_Load(object sender, EventArgs e)
    {
        BulkOptions.Attributes.Add("onchange", "if(!confirmSelection()) return false;");
        // BEGIN MOD: AbleMods.com
        // 9-7-2010
        // Set pagesize of the grid control

        // if first time here, set default for the dropdown
        if (!Page.IsPostBack)
            list_PageSize.SelectedValue = "40";
        
        // Set pagesize
        CGrid.PageSize = AlwaysConvert.ToInt(list_PageSize.SelectedValue);
        
        // END MOD:  AbleMods.com
    }
Save your changes. Upload the modified files if necessary and give it a test.

What Just Happened?
The changes are actually very simple from a programming standpoint. All we've done is add a new ASP.Net dropdown list control to the HTML page. That dropdown list has the choices available for the number of items to show each time a category is clicked.
Then we added a few lines of code to the Page_Load() section of the programming. This Page_Load() section fires every time the browse.aspx is loaded. Keep in mind that this page is using AJAX, so the page is "loaded" every time you click something that doesn't leave the page entirely. Once we're in this Page_Load() section of the programming, we see if this is the first time here with the "Page.IsPostBack()" test. If it is the first time, then we set the default choice on the dropdown list to 40. That number 40 just happens to be what the original default is in the browse.aspx file.
The last step is to tell the gridview control how many items to show per-page based on what choice is selected on the new dropdown list control.

Conclusion
This modification adds a nifty bit of functionality to your catalog browse page. By letting you see more products in a category in a single page, you can really leverage the bulk catalog features. Enjoy! :)
Capture.JPG
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

Post Reply