BreadCrumbs Control

 Feedback on this topic

Defining Custom Catalogs

Using the StoreFront Merchant Tools you can define a hierarchy of product categories. Each category has a name and a unique ID. A product can be assigned to one or more categories. For example, here is how a simple store with a handful of products might be arranged:

Standard StoreFront catalog pages are created by performing a search for a specific category. For example, to see the Books catalog page you would load the URL "SearchResult.aspx?CategoryID=1". Sometimes, you may need to create your own special catalog page. For example, you may create your own catalog page for books called Books.aspx or Books.html, or perhaps you want to create a special page of combines products in a way that can not easily be presented by the search templates. To have your catalog page show up in the BreadCrumbs control, you must do 2 things:

  1. Make sure that the category exists in the StoreFront database, even if no products are assigned.
  2. Add a <Catalog> tag to the BreadCrumbs control that relates the category ID to the URL of the custom catalog page.

Example

In this walkthrough you will create a custom catalog of books. The custom catalog page will be saved as Books.html. The name of the catalog will be "My Books".

  1. Use the StoreFront Merchant Tools to create a new, top-level category called "My Books". You do not need to assign any products to the new category. Custom catalog pages can replace any category in the hierarchy.
  2. Find the unique ID of the new category. There are several ways to do this. The easiest is to open the Categories table in the database, find the row with the Name field equal to "My Books" and note the value of the UID.
  3. Create a new file and enter the following HTML (note that these links will work if you have at least 2 products in your store, although the actual products that are displayed will probably not be books):
    <html>
    <head>
    <title>My Books</title>
    </head>
    <body>
    This is a special collection of my books. Enjoy!
    <ul>
    <li><a href="detail.aspx?id=1">Book 1</a></li>
    <li><a href="detail.aspx?id=2">Book 2</a></li>
    </ul>
    </body>
    </html>
  4. Save the file as "Books.html" in the root directory of your store.
  5. Open BreadCrumbs.ascx in an editor and add the following <Catalog> tag:
    <sfaddons:BreadCrumbs id="BreadCrumbs1" runat="server">
      <ItemTemplate>
        <asp:datalist id="BreadCrumbList" RepeatDirection="Horizontal" RepeatLayout="Flow" runat="server">
          <ItemTemplate>
            <asp:HyperLink id="CatalogLink" runat="server" NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "url") %>'>
              <%# DataBinder.Eval(Container.DataItem, "name") %>
            </asp:HyperLink>
          </ItemTemplate>
          <SeparatorTemplate>
            &gt;
          </SeparatorTemplate>
        </asp:datalist>
      </ItemTemplate>
      <SeparatorTemplate><br></SeparatorTemplate>
      <Catalog CategoryID="5" Url="BookCollection.html" />
    </sfaddons:BreadCrumbs>
  6. Note that the CategoryID on the <Catalog> tag is based on the sample store described above and will not work if your store has fewer than 5 categories. In this is the case for your store, replace the 5 with the UID that you found in step #2 above.
  7. Save the modified BreadCrumbs.ascx.
  8. Load Books.html in a browser, then click on either one of the links.
  9. If you have configured your store to display the BreadCrumbs Control on your product detail pages, you will see something like this:

    If you clicked on My Books, you would return the Books.html.

 

 

Copyright © 2003, Structured Solutions. All rights reserved.