Advice On How To Customize ConLib:CategoryGridPage

[mayaco]

Hello,

I need advice on how to modify ConLib:CategoryGridPage. We need to add the proeduct dimensions and weight to the what is already displayed. For example, I need it to display the following information:

Product Photo
Product Name
Price
Product Dimensions / Product Weight
Product Category
Rating

Details Button

Any help is greatly appreciated.

Thanks,
Albert

[s_ismail]

Locate this section in your categoryGridPage.ascx

Code: Select all

 <asp:DataList ID="ProductList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%" 
                OnItemDataBound="ProductList_ItemDataBound" DataKeyField="ProductId" CssClass="catalog" EnableViewState="false" HorizontalAlign="left">
                <ItemStyle HorizontalAlign="center" VerticalAlign="bottom" Width="33%" CssClass="tableNode" />
                <ItemTemplate>
                    <asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder>
                    <uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' ShowRetailPrice="true" />
                    <asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>
                    <div style="margin-top:10px;margin-bottom:20px"><uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("ProductId")%>' /></div>
                </ItemTemplate>
                <SeparatorTemplate>&nbsp;</SeparatorTemplate>
                <SeparatorStyle CssClass="separator" Width="1" />
            </asp:DataList>

replace with this code

Code: Select all

   <asp:DataList ID="ProductList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%" 
                OnItemDataBound="ProductList_ItemDataBound" DataKeyField="ProductId" CssClass="catalog" EnableViewState="false" HorizontalAlign="left">
                <ItemStyle HorizontalAlign="center" VerticalAlign="bottom" Width="33%" CssClass="tableNode" />
                <ItemTemplate>
                    <asp:PlaceHolder ID="phItemTemplate1" runat="server"></asp:PlaceHolder>
                    <uc:ProductPrice ID="Price" runat="server" Product='<%#Container.DataItem%>' ShowRetailPrice="true" />
                    <asp:PlaceHolder ID="phItemTemplate2" runat="server"></asp:PlaceHolder>
                    <asp:Panel ID="DimentionPanel" runat="server">
                    <asp:Label ID="wieghtlbl" runat="server" Text='<%# Eval("Weight") %>'></asp:Label>
                    </asp:Panel>
                    <div style="margin-top:10px;margin-bottom:20px"><uc:AddToCartLink ID="Add2Cart" runat="server" ProductId='<%#Eval("ProductId")%>' /></div>
                </ItemTemplate>
                <SeparatorTemplate>&nbsp;</SeparatorTemplate>
                <SeparatorStyle CssClass="separator" Width="1" />
            </asp:DataList><

[jmestep]

If you are going to use something other than the product's shipping dimensions and weight, you can create a template field, or more than one, to handle it. Then you would put code in the .cs file to pick up that information and display it in a placeholder that you have added to the .ascx file, like the phItemTemplate1 (which doesn't have anything to do with template fields- it holds some of the name and image data). You can look at the App_Code/ProductHelper.cs for a sample of how to get the template data.

[mayaco]

Thank you s_ismail and Judy for both of your responses.

I'm not that comfortable yet with .NET but I can find my way around, with that said, I did manage to come up with a solution. Let me know if my attempt is correct.

I made a duplicate copy of ConLib/CategoryGridPage.ascx in Visual Express 2008 and renamed it ConLib/custom_CategoryGridPage.ascx. I opened the custom_CategoryGridPage.ascx.cs file and went to the code:

Code: Select all

                //OUTPUT LINKED NAME
                itemTemplate1.Controls.Add(new LiteralControl(string.Format("<a href=\"{0}\" class=\"highlight\">{1}</a><br />", productUrl, product.Name)));

                //OUTPUT MANUFACTURER
                if (product.Manufacturer != null)
                {
                    itemTemplate2.Controls.Add(new LiteralControl("<br /><a href=\"Search.aspx?m=" + product.Manufacturer.ManufacturerId + "\">" + product.Manufacturer.Name + "</a>"));                    
                }

and inserted the following code just before //OUTPUT MANUFACTURER:

Code: Select all

                //CUSTOM - 06-02-2010
                //OUTPUT DIMENSIONS AND WEIGHT
                if ((product.Height != 0) && (product.Width != 0) && (product.Length != 0))
                {
                    itemTemplate2.Controls.Add(new LiteralControl("<br /><span style=\"font-size:11px;\">" + String.Format("{0:0.00}", product.Length) + "in. x " + String.Format("{0:0.00}", product.Width) + "in. x " + String.Format("{0:0.00}", product.Height) + "in. (I.D.) / " + product.Weight + " lb.</span>"));
                }

I repeated this process for SearchPage.ascx. Was my attempt correct? I did get the results I wanted but wasn't sure if my logic was correct.

Thanks again for everyone's help.
Albert

[jmestep]

It looks good to me, especially since you are getting the required results.

[s_ismail]

Yes it will also work fine.