Ctg. List Page with DIFFERENT thumbnail AND product images

[Mizmo67]

We need to have a particular section set up so that it displays the thumbnail (which is a part availability icon) and the product image itself.

Our current default category page looks like this:
http://store.scottsbt.com/PennParts/Handles/TypeD.aspx
With THUMBNAIL, SKU, DESCRIPTION, PRICE AND DETAILS columns

For the handle options categories, I want the product image to display where the SKU column is now
I'm having problems with the code.

CategoryListPageHandleOptions.ascx file:

Code: Select all

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="CategoryListPageHandleOptions.ascx.cs" Inherits="ConLib_Custom_CategoryListPageHandleOptions" %>
    <%--
    <conlib>
    <summary>A category page that displays all contents of a category in a simple list format.  This page displays products, webpages, and links. VERSION FOR HANDLE OPTIONS CATEGORIES, displays thumbnail for avsilability and productimage to show handle type</summary>
    <param name="DefaultCaption" default="Catalog">Caption text that will be shown as caption when root category will be browsed.</param>
    </conlib>
    --%>
    <%@ Register Src="~/ConLib/CategoryBreadCrumbs.ascx" TagName="CategoryBreadCrumbs" TagPrefix="uc" %>
    <%@ Register Src="~/ConLib/CategorySearchSidebar.ascx" TagName="CategorySearchSidebar" TagPrefix="uc" %>
    <%@ Register Src="~/ConLib/AddToCartLinkPenn.ascx" TagName="ProductDetailsLink" TagPrefix="uc" %>
    <ajax:UpdatePanel ID="ResultsAjaxPanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <asp:PlaceHolder ID="CategoryHeaderPanel" runat="server" EnableViewState="false">
            <uc:CategoryBreadCrumbs id="CategoryBreadCrumbs1" runat="server" HideLastNode="True" />
            <div class="pageHeader">
                <h1><asp:Literal ID="Caption" runat="server" EnableViewState="False"></asp:Literal></h1>
            </div>
            <asp:PlaceHolder ID="SubCategoryPanel" runat="server" EnableViewState="false">
                <div class="section">
                    <div class="content">
                        <asp:Repeater ID="SubCategoryRepeater" runat="server" EnableViewState="false">
                            <SeparatorTemplate><br /></SeparatorTemplate>
                            <ItemTemplate><asp:HyperLink ID="SubCategoryLink" runat="server" Text='<%#String.Format("{0}", Eval("Name"))%>' NavigateUrl='<%#Eval("NavigateUrl")%>'></asp:HyperLink></ItemTemplate>
                        </asp:Repeater><br /><br />
                    </div>
                </div>
            </asp:PlaceHolder>
            <div >
                <asp:Literal ID="CategoryDescription" runat="server" EnableViewState="false"></asp:Literal>
            </div>            
        </asp:PlaceHolder>
        <br />
            <asp:PlaceHolder ID="phCategoryContents" runat="server">           
                <!-- Top Bar -->
                <div class="catalogWrapper" style="padding:0px;">
                    <asp:Repeater ID="CatalogNodeList" runat="server" OnItemDataBound="CatalogNodeList_ItemDataBound" EnableViewState="false">                   
                        <HeaderTemplate>
                            <table  class="pagedList" style="width: 100%;" border="0" cellspacing="1">
                                <tr>
                                    <th scope="col" style="width:130px;">Availability</th><!-- Change from orig list file: added availability calls the Thumbnail (part stock icons-->
                                    <th scope="col" style="width:130px;">Item Photo</th><!-- Change from orig list file: replaced SKU with thumbnail sized part image -->
                                    <th scope="col">Description</th>
                                    <th scope="col" align="center">Price</th>
                                    <th scope="col">&nbsp;</th>
                                </tr>
                        </HeaderTemplate>
                        <ItemTemplate>                       
                            <asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder>
                            <td runat="server">
                                <uc:ProductDetailsLink ID="ProductDetailsLink" runat="server" Product='<%#((CatalogNode)Container.DataItem).CatalogNodeType == CatalogNodeType.Product ? ((CatalogNode)Container.DataItem).ChildObject : null %>' />
                            </td>
                            <asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>
                        </ItemTemplate>
                        <FooterTemplate>
                            </table>
                        </FooterTemplate>
                    </asp:Repeater>               
                </div>
            </asp:PlaceHolder>
            <asp:PlaceHolder ID="phEmptyCategory" runat="server" Visible="false" EnableViewState="false">
                <div class="catalogWrapper"  align="center">
                    <asp:Localize ID="EmptyCategoryMessage" runat="server" Text="The category is empty." EnableViewState="false"></asp:Localize>
                </div>
            </asp:PlaceHolder>
        </ContentTemplate>
    </ajax:UpdatePanel>
    <asp:Panel ID="RequiredParameterMissingPanel" runat="server" Visible="false" EnableViewState="false">
        <asp:Label ID="RequiredParameterMessage" runat="server" Text="{0}: Parameter(s) {1} is/are required." EnableViewState="false" SkinID="ErrorCondition"></asp:Label>
    </asp:Panel>

CategoryListPageHandleOptions.ascx.cs file:

Code: Select all

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using CommerceBuilder.Common;
using CommerceBuilder.Catalog;
using CommerceBuilder.Products;
using CommerceBuilder.Utility;

public partial class ConLib_Custom_CategoryListPageHandleOptions : System.Web.UI.UserControl
{
    private Category _Category;
    private CatalogNodeCollection _CatalogNodes;
    private string _DefaultCaption = "Catalog";
    private string _DefaultCategorySummary = "Welcome to our store.";

    private string _PagingLinksLocation = "BOTTOM";

    /// <summary>
    /// Name that will be shown as caption when root category will be browsed
    /// </summary>
    [Personalizable(), WebBrowsable()]
    public string DefaultCaption
    {
        get { return _DefaultCaption; }
        set { _DefaultCaption = value; }
    }

    /// <summary>
    /// Summary that will be shown when root category will be browsed
    /// </summary>
    [Personalizable(), WebBrowsable()]
    public string DefaultCategorySummary
    {
        get { return _DefaultCategorySummary; }
        set { _DefaultCategorySummary = value; }
    }

    public int CategoryId
    {
        get
        {
            if (ViewState["CategoryId"] == null)
                ViewState["CategoryId"] = PageHelper.GetCategoryId();
            return (int)ViewState["CategoryId"];
        }
        set
        {
            ViewState["CategoryId"] = value;
        }
    }

    private void BindPage()
    {
        //BIND THE DISPLAY ELEMENTS
        if (IsValidCategory())
        {
            if (_Category != null)
            {
                Page.Title = _Category.Name;
                CategoryBreadCrumbs1.CategoryId = this.CategoryId;
                Caption.Text = _Category.Name;
                CategoryDescription.Text = (_Category.Summary != null) ? _Category.Summary : "&nbsp;";
            }
            else
            {
                // IT IS ROOT CATEGORY
                Page.Title = DefaultCaption;
                CategoryBreadCrumbs1.CategoryId = this.CategoryId;
                Caption.Text = DefaultCaption;
                CategoryDescription.Text = DefaultCategorySummary;
            }

            BindSubCategories();
        }
        else
        {
            CategoryHeaderPanel.Visible = false;
        }
        BindResultHeader();
    }

    protected void Page_Init(object sender, System.EventArgs e)
    {
        Trace.Write(this.GetType().ToString(), "Load Begin");
        //EXIT PROCESSING IF CATEGORY IS INVALID OR MARKED PRIVATE
        if (!IsValidCategory())
        {
            // SHOW ONLY THE MESSAGE THAT REQUIRED PARAMETER IS MISSING.
            ResultsAjaxPanel.Visible = false;
            RequiredParameterMissingPanel.Visible = true;
            RequiredParameterMessage.Text = String.Format(RequiredParameterMessage.Text, "CategoryDetailsPage", "CategoryId");
            return;
        }
        else
        {
            if (!Page.IsPostBack)
            {
                //REGISTER THE PAGEVIEW
                CommerceBuilder.Reporting.PageView.RegisterCatalogNode(this.CategoryId, CatalogNodeType.Category);
            }
        }

        Trace.Write(this.GetType().ToString(), "Load Complete");
    }

    protected void BindSubCategories()
    {
        CategoryCollection allCategories = CategoryDataSource.LoadForParent(this.CategoryId, true);
        List<SubCategoryData> populatedCategories = new List<SubCategoryData>();
        foreach (Category category in allCategories)
        {
            int totalItems = CatalogNodeDataSource.CountForCategory(category.CategoryId);
            if (totalItems > 0)
            {
                populatedCategories.Add(new SubCategoryData(category.CategoryId, category.Name, category.NavigateUrl, totalItems));
            }
        }
        if (populatedCategories.Count > 0)
        {
            SubCategoryPanel.Visible = true;
            SubCategoryRepeater.DataSource = populatedCategories;
            SubCategoryRepeater.DataBind();
        }
        else SubCategoryPanel.Visible = false;
    }

    public class SubCategoryData
    {
        private int _CategoryId;
        private string _Name;
        private int _ProductCount;
        private string _NavigateUrl;
        public int CategoryId { get { return _CategoryId; } }
        public string Name { get { return _Name; } }
        public int ProductCount { get { return _ProductCount; } }
        public string NavigateUrl { get { return _NavigateUrl; } }
        public SubCategoryData(int categoryId, string name, string navigateUrl, int productCount)
        {
            _CategoryId = categoryId;
            _Name = name;
            _NavigateUrl = navigateUrl;
            _ProductCount = productCount;
        }
    }

    protected void BindResultHeader()
    {
        //UPDATE THE RESULT INDEX MESSAGE       
        CatalogNodeList.DataSource = _CatalogNodes;
        CatalogNodeList.DataBind();
    }

    protected void CatalogNodeList_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
        if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
        {
            //GENERATE TEMPLATE WITH HTML CONTROLS
            //TO OPTIMIZE OUTPUT SIZE
            PlaceHolder itemTemplate1 = (PlaceHolder)e.Item.FindControl("phItemTemplate1");
            PlaceHolder itemTemplate2 = (PlaceHolder)e.Item.FindControl("phItemTemplate2");

            if ((itemTemplate1 != null))
            {

                // CSS CLASS FOR THIS ROW
                String cssClass = "oddRow";
                if (e.Item.ItemIndex % 2 == 0) cssClass = "evenRow";

                itemTemplate1.Controls.Add(new LiteralControl("<tr class=\"" + cssClass + "\">"));

                CatalogNode catalogNode = (CatalogNode)e.Item.DataItem;

                string target = "_self";
                if (catalogNode.CatalogNodeType == CatalogNodeType.Link)
                    target = ((Link)catalogNode.ChildObject).TargetWindow;

                if (catalogNode.CatalogNodeType == CatalogNodeType.Product && catalogNode.ChildObject != null)
                {
                    Product product = ((Product)catalogNode.ChildObject);
                    string catalogNodeUrl = this.Page.ResolveUrl(catalogNode.NavigateUrl);

                    //OUTPUT LINKED THUMNAIL
                    string thumbnail = "&nbsp;";
                    itemTemplate1.Controls.Add(new LiteralControl("<td>"));
                    if (catalogNode.ThumbnailUrl != null) thumbnail = string.Format("<a href=\"{0}\" target=\"{3}\"><img src=\"{1}\" alt=\"{2}\" border=\"0\" class=\"Thumbnail\" width=\"100\" /></a><br />", ResolveUrl(catalogNodeUrl), ResolveUrl(catalogNode.ThumbnailUrl), catalogNode.ThumbnailAltText, target);
                    itemTemplate1.Controls.Add(new LiteralControl(thumbnail));
                    itemTemplate1.Controls.Add(new LiteralControl("</td>"));
					
					//This block below for the product image display replaces the column that showed the SKU in our standard pennparts category list display
					//OUTPUT LINKED PRODUCT IMAGE
                    string image = "&nbsp;";
                    itemTemplate1.Controls.Add(new LiteralControl("<td>"));
                    if (catalogNode.ImageUrl != null) image = string.Format("<a href=\"{0}\" target=\"{3}\"><img src=\"{1}\" alt=\"{2}\" border=\"0\" class=\"Image\" width=\"100\" /></a><br />", ResolveUrl(catalogNodeUrl), ResolveUrl(catalogNode.ImageUrl), catalogNode.ImageAltText, target);
                    itemTemplate1.Controls.Add(new LiteralControl(image));
                    itemTemplate1.Controls.Add(new LiteralControl("</td>"));
					//I copied the thumbnail code to make the above block, needs to be modified for product image currently getting error 9/3/11 see below:
					//[[ConLib:Custom\CategoryListPageHandleOptions]] e:\hshome\scottsbt\store.scottsbt.com\ConLib\Custom\CategoryListPageHandleOptions.ascx.cs(201): error CS0117: 'CommerceBuilder.Catalog.CatalogNode' does not contain a definition for 'ImageUrl' 
					
                    //OUTPUT LINKED NAME
                    itemTemplate1.Controls.Add(new LiteralControl("<td>"));
                    itemTemplate1.Controls.Add(new LiteralControl(string.Format("<a href=\"{0}\" class=\"highlight\" target=\"{2}\">{1}</a><br />", ResolveUrl(catalogNodeUrl), catalogNode.Name, target)));
                    itemTemplate1.Controls.Add(new LiteralControl(string.Format("<div class=\"summary\">{0}</div>", catalogNode.Summary)));
                    itemTemplate1.Controls.Add(new LiteralControl("</td>"));

                    //OUTPUT PRICE
                    itemTemplate1.Controls.Add(new LiteralControl("<td align='center'>"));
                    if (!product.UseVariablePrice && product.Price > 0)
                    {
                        string price = string.Format("<span class=\"price\">{0:ulc}</span> ", product.Price);
                        itemTemplate1.Controls.Add(new LiteralControl(price));
                    }
                    else itemTemplate1.Controls.Add(new LiteralControl("&nbsp;"));
                    itemTemplate1.Controls.Add(new LiteralControl("</td>"));
                }

                if (catalogNode.CatalogNodeType == CatalogNodeType.Link || catalogNode.CatalogNodeType == CatalogNodeType.Webpage)
                {
                    //OUTPUT LINKED THUMNAIL
                    string thumbnail = "&nbsp;";
                    itemTemplate1.Controls.Add(new LiteralControl("<td>"));
                    if (catalogNode.ThumbnailUrl != null) thumbnail = string.Format("<a href=\"{0}\" target=\"{3}\"><img src=\"{1}\" alt=\"{2}\" border=\"0\" class=\"Thumbnail\" width=\"100\" /></a><br />", ResolveUrl(catalogNode.NavigateUrl), ResolveUrl(catalogNode.ThumbnailUrl), catalogNode.ThumbnailAltText, target);
                    itemTemplate1.Controls.Add(new LiteralControl(thumbnail));
                    itemTemplate1.Controls.Add(new LiteralControl("</td>"));

                    itemTemplate1.Controls.Add(new LiteralControl("<td>&nbsp;</td>"));
					
					//OUTPUT LINKED IMAGE ((added to match the above thumbnail code))
                    string image = "&nbsp;";
                    itemTemplate1.Controls.Add(new LiteralControl("<td>"));
                    if (catalogNode.ImageUrl != null) image = string.Format("<a href=\"{0}\" target=\"{3}\"><img src=\"{1}\" alt=\"{2}\" border=\"0\" class=\"Image\" width=\"100\" /></a><br />", ResolveUrl(catalogNode.NavigateUrl), ResolveUrl(catalogNode.ImageUrl), catalogNode.ImageAltText, target);
                    itemTemplate1.Controls.Add(new LiteralControl(image));
                    itemTemplate1.Controls.Add(new LiteralControl("</td>"));

                    itemTemplate1.Controls.Add(new LiteralControl("<td>&nbsp;</td>"));

                    //OUTPUT LINKED NAME
                    itemTemplate1.Controls.Add(new LiteralControl("<td>"));
                    itemTemplate1.Controls.Add(new LiteralControl(string.Format("<a href=\"{0}\" class=\"highlight\" target=\"{2}\">{1}</a><br />", ResolveUrl(catalogNode.NavigateUrl), catalogNode.Name, target)));
                    itemTemplate1.Controls.Add(new LiteralControl(string.Format("<div class=\"summary\">{0}</div>", catalogNode.Summary)));
                    itemTemplate1.Controls.Add(new LiteralControl("</td>"));

                    itemTemplate1.Controls.Add(new LiteralControl("<td>&nbsp;</td>"));
                }
            }
        }
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        if (IsValidCategory())
        {
            //INITIALIZE THE CONTENT NODES
            _CatalogNodes = new CatalogNodeCollection();
            CatalogNodeCollection allNodes;
            if (_Category != null) allNodes = _Category.CatalogNodes;
            else allNodes = CatalogNodeDataSource.LoadForCategory(0);
            foreach (CatalogNode node in allNodes)
            {
                if (node.Visibility == CatalogVisibility.Public)
                {
                    bool addNode = true;
                    if (node.CatalogNodeType == CatalogNodeType.Category)
                    {
                        addNode = (CatalogDataSource.CountForCategory(node.CatalogNodeId, true) > 0);
                    }
                    if (addNode)
                    {
                        _CatalogNodes.Add(node);
                    }
                }
            }

            //BIND PAGE
            BindPage();
        }
    }

    private bool IsValidCategory()
    {

        // IF IT IS ROOT CATEGORY
        if (this.CategoryId == 0) return true;
        else
        {
            // TRY TO LOAD THE CATEGORY AGAIN
            if (_Category == null) _Category = CategoryDataSource.Load(this.CategoryId);
            if (_Category != null && _Category.Visibility != CatalogVisibility.Private) return true;
            else return false;
        }
    }
}

My current error message:

[[ConLib:Custom\CategoryListPageHandleOptions]] e:\hshome\scottsbt\store.scottsbt.com\ConLib\Custom\CategoryListPageHandleOptions.ascx.cs(201): error CS0117: 'CommerceBuilder.Catalog.CatalogNode' does not contain a definition for 'ImageUrl'

I'm assuming ImageUrl is already defined via (using CommerceBuilder.Products;) but maybe I'm missing something?
Any help would be appreciated.

[jmestep]

You need to changes places like the following to product.ThumbnailUrl.

Code: Select all

//OUTPUT LINKED THUMNAIL
                    string thumbnail = " ";
                    itemTemplate1.Controls.Add(new LiteralControl("<td>"));
                    if (catalogNode.ThumbnailUrl != null) thumbnail = string.Format("<a href=\"{0}\" target=\"{3}\"><img src=\"{1}\" alt=\"{2}\" border=\"0\" class=\"Thumbnail\" width=\"100\" /></a><br />", ResolveUrl(catalogNodeUrl), ResolveUrl(catalogNode.ThumbnailUrl), catalogNode.ThumbnailAltText, target);

The code section starting with
[code/if (catalogNode.CatalogNodeType == CatalogNodeType.Product && catalogNode.ChildObject != null)
{
Product product = ((Product)catalogNode.ChildObject);[/code]
holds data that applies to a product only, so you need to switch to picking up the data from the product instead of the catalogNode

[Mizmo67]

Thanks, Judy. I knew I was totally overlooking something but wasn't sure what. Still such a novice with .aspx.

[Mizmo67]

I still can't figure out what I'm doing wrong.

Currently, this original page we have works:
http://store.scottsbt.com/PennParts/Handles/TypeA.aspx

The thumbnail is in the first column, no problem. That's the thumbnail code that's shown in my original post.
I tried to copy that working thumbnail code to generate the product image next to it.

But I still can't get the code to work so that the product image displays in the second column.
It has to be within the catalog node loop that generates each item line on the display page, but I can't get the program to recognize pulling the image like we did with the thumbnail...

I've tried all kinds of variations but I'm still getting error messages.