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.
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:
and change it to look like this:
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:
And change it to look like this:
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.
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! 🙂