http://orders.homaxproducts.com interface question

Aug 10, 2009 at 6:20 PM

Some days ago I come to http://orders.homaxproducts.com that presented as worked sample of commerce for umbraco packet.

On Products Page of http://orders.homaxproducts.com (http://orders.homaxproducts.com/products.aspx) u have list of categories.

As I can understand, products.aspx based on CommerceCategoryList template, that have macros [commerce]XsltCategoryList. This macros returns only a list with link to product category like this:

<ul>

     <li><h3><a href="/Category1.aspx">Category1</a></h3><li>

    <li><h3><a href="/Category2.aspx">Category2</a></h3><li>

    <li><h3><a href="/Category3.aspx">Category3</a></h3><li>

    <li><h3><a href="/Category4.aspx">Category4</a></h3><li>

</ul>

 

But  on products page of homaxproducts.com under each category there is “Featured:” h4 tag and product.

 

Here is this HTML one of categories:

 

<li id="liOther">

               <h3><a href="/catalog/Rhodes American Steel Wool.aspx">Rhodes American Steel Wool</a></h3>

            <h4>Featured:</h4>

            <a href="/product/c33a7842-365c-46ee-9e43-a2a84ca46048.aspx">Steel Wool, Assorted, 12 pads</a><span>$5.29</span>

            <img src='/media/438/10121114.gif' alt='Steel Wool, Assorted, 12 pads' height="100" />

            <a href="/catalog/Rhodes American Steel Wool.aspx">View All Products</a>

</li>


 

My question is how u made it? Do u create each product, that present category manually or u create some mechanism to attach some product as face of category and create macros to present "advanced" category list? Can u explain and may be post this macros here?

Coordinator
Aug 10, 2009 at 6:35 PM

We simply create a macro which wraps the ProductBox.ascx user control and add parameters for the ProductPicker and CategoryPicker types - then we simply get the product data based on the selected product and category.  That's it!  Super simple and follows the Umbraco conventions.

The macro insertion looks like this:

    <umbraco:Macro umbProductId="579" umbCategoryId="119" Alias="ProductBox" runat="server"></umbraco:Macro>

The ProductBox.ascx looks like this:

<h3><a href="/catalog/<%=CategoryName %>.aspx"><%=CategoryName %></a></h3>
    <h4>Featured:</h4>
    <a href="/product/<%=productGUID %>.aspx"><%=ProductName%></a><span><%=RetailPrice.ToString("c") %></span>
    <img src='<%=ImageFile%>' alt='<%=ProductName%>' width="73" height="130" />
    <a href="/catalog/<%=CategoryName %>.aspx">View All Products</a>

and the code like this:

public partial class ProductBox : System.Web.UI.UserControl
    {
        protected string ProductName;
        protected decimal RetailPrice;
        protected string ImageFile = "";
        protected string CategoryName = "";
        protected string productGUID;

        private Commerce.Common.Product product = null;
        private Commerce.Common.Category category = null;

        // umbraco properties
        private int _umbProductId;

        public int umbProductId
        {
            get { return _umbProductId; }
            set { _umbProductId = value; }
        }

        private int _umbCategoryId;

        public int umbCategoryId
        {
            get { return _umbCategoryId; }
            set { _umbCategoryId = value; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (_umbProductId != 0)
                {
                    product = ProductController.GetProductDeep(_umbProductId);
                }

                // make sure we have a product
                TestCondition.IsTrue(product.IsLoaded, "Invalid url/product id");

                // set the category
                if (_umbCategoryId != 0)
                {
                    CategoryController.Load();
                    category = CategoryController.Find(_umbCategoryId);
                    CategoryName = category.CategoryName;
                }

                // set the page variables
                ProductName = product.ProductName;
                RetailPrice = product.RetailPrice;
                // get the image URL from the Umbraco Node id
                Media m = new Media(int.Parse(product.DefaultImage));
                ImageFile = m.getProperty("umbracoFile").Value.ToString();
                productGUID = product.ProductGUID.ToString();

            }
            catch (Exception)
            {
                // set up the safe display
                CategoryName = "Coming Soon";
                ProductName = "Coming Soon";
                RetailPrice = 0;
            }

        }
    }

 

-Paul

 

Aug 10, 2009 at 6:37 PM

Thanks, Paul.

Aug 11, 2009 at 3:13 AM

In this way we need to put macros manually into template after we add every new category. is there some way to automate it? For example to create macros, that will return list of categories and also one product ( perfect if we can change the face of category). Can u cuggest me what to do? May be there is possible to add Product Picker in category  and identify it as "Sample product" and make some changes in macros [commerce]XsltCategoryList...