How can I show "Related Products" in horizontal orientation?

[KenPalmer]

We would like to show the related products on the Product page below the product description, in a horizontal orientation. The result would be similar to the Amazon.com "Related Items" display.

Looking at the RelatedProducts.ascx control, it has a datalist with the RepeatDirection set to Horizontal. But when the control is rendered on the screen it displays in a vertical orientation. There are Left and Right sidebar controls in the admin console, under Website > Layouts > Add Layout, where the Related Products control can be applied. I see how to put the "Related Products" control into one of those sidebars. But both of those are vertically oriented. Is there a similar bottom or top sidebar that can be enabled?

How can I display related items in a horizontal format at the bottom of the product page? Thanks.

[jmestep]

Did you try setting RepeatColumns="1" to something else? I see that in the colib, but don't have anything to test it on yet.

[KenPalmer]

Thanks for the tip Judy. That didn't resolve it, but would have been an issue down the road. The "Related Products" control is still 1 column wide. But, after changing RepeatColumns from 1 to 5, it shows the related products horizontally. Two products appear, and the rest bleed off to the right out of sight. Probably because I've still got that appearing in the right column.

Maybe I need to make the adjustment you recommended, and then add one of those ConLib commands, as appears under the Website > Web Pages > Edit Webpage dialog. The featured products control, for instance, gets added like so: [[ConLib:FeaturedProductsGrid]].

[KenPalmer]

That's it. I'll need to make adjustments to the product page. I threw this on the edit Basic Product page, and it shows up at the bottom.
[[ConLib:ProductPage]]
[[ConLib:RelatedProducts]]

I'll just need to make a few more adjustments to tweak it as needed. Thanks!

[KenPalmer]

Just wanted to follow up on this and provide part of my implementation, if it will help someone else. We're displaying the RelatedProducts.ascx control at the bottom of the product page, in a horizontal orientation.

Two enhancements that I added include randomizing displayed products, and dynamically re-sizing the widths of the product columns.

This is added to the style.css file for the theme. The first 3 lines get used in the code-behind of RelatedProducts.ascx.cs. That last line fixes the height of the product description text, providing 3 lines of visible text for the product description.

Code: Select all

.itemListing .tableNode25 {text-align:center; width:25%; }
.itemListing .tableNode33 {text-align:center; width:33%; }
.itemListing .tableNode50 {text-align:center; width:50%; }
.relatedProductsWidget .itemName {height: 48px; overflow:hidden; }

This is added to RelatedProducts.ascx.cs. Styles above get applied in Page_Load() to set column widths. The getRandomProducts() method replaces the original related product collection code.

Code: Select all

      protected void Page_Load(object sender, EventArgs e)
      {
         phCaption.Text = this.Caption;
         int productId = AbleCommerce.Code.PageHelper.GetProductId();
         Product product = ProductDataSource.Load(productId);
         if (product != null)
         {
            IList<RelatedProduct> relatedProducts = product.RelatedProducts;
            IList<Product> products = new List<Product>();
            products = getRandomProducts(relatedProducts, 4);

            /* 10/5/2012 [Ken] Replaced this with getRandomProducts().
            // GET ALL CHILD PRODUCTS AND ADD TO THE COLLECTION
            foreach (RelatedProduct relatedProduct in relatedProducts)
            {
               if (relatedProduct.ChildProduct.Visibility == CatalogVisibility.Public)
                  products.Add(relatedProduct.ChildProduct);
            }
            */

            if (products != null && products.Count > 0)
            {
               // 10/5/2012 [Ken] Dynamically set the RepeatColumns value and column widths.
               if (products.Count < ProductList.RepeatColumns) Columns = products.Count;
               if (products.Count == 2) ProductList.ItemStyle.CssClass = "tableNode50";
               if (products.Count == 3) ProductList.ItemStyle.CssClass = "tableNode33";
               if (products.Count > 3) ProductList.ItemStyle.CssClass = "tableNode25";
               
               ProductList.RepeatColumns = Columns;
               ProductList.DataSource = products;
               ProductList.DataBind();
            }
            else phContent.Visible = false;
         }
         else phContent.Visible = false;
      }

      /// <summary>Return a randomized list of products. Total products returned is the productLimit,
      /// or the number of related products when the related product count is less than the productLimit.
      /// </summary>
      /// <remarks>
      /// 10/5/2012 [Ken] Created
      /// </remarks>
      private IList<Product> getRandomProducts(IList<RelatedProduct> relatedProducts, int productLimit)
      {
         if (relatedProducts == null || relatedProducts.Count == 0) return null;

         // Only present related products that are allowed to be visible.
         IList<Product> visibleRelatedProducts = new List<Product>();
         foreach (RelatedProduct relatedProduct in relatedProducts)
         {
            if (relatedProduct.ChildProduct.Visibility == CatalogVisibility.Public)
               visibleRelatedProducts.Add(relatedProduct.ChildProduct);
         }
         if (visibleRelatedProducts.Count == 0) return null;

         int productCount = visibleRelatedProducts.Count;
         if (productCount < productLimit) productLimit = productCount;

         // Put X unique random numbers in productIndex, where X is the productLimit.
         // Based on http://stackoverflow.com/questions/5561742/generate-distinct-random-numbers-in-c-sharp
         Random rand = new Random();
         List<int> productIndex = new List<int>();
         HashSet<int> check = new HashSet<int>();
         for (Int32 i = 0; i < productLimit; i++)
         {
            int curValue = rand.Next(0, productCount);
            while (check.Contains(curValue))
            {
               curValue = rand.Next(0, productCount);
            }
            productIndex.Add(curValue);
            check.Add(curValue);
         }
         check = null;

         // Populate randomProducts with visibleRelatedProducts that match the random entries in productIndex.
         IList<Product> randomProducts = new List<Product>();
         foreach (int index in productIndex)
         {
            Product product = visibleRelatedProducts[index];
            randomProducts.Add(product);
         }
         productIndex = null;
         visibleRelatedProducts = null;
         
         return randomProducts;
      }

What's nice about this is the interface randomly picks related products, and displays them in a random order. In our case it only loads up to 4 related random products. In the future we may extend this with a jQuery carousel control, like the Fred Carousel (http://caroufredsel.frebsite.nl/).