Sitefinity Ecommerce - Related products using RadList Control

ProductDetailViewCustom.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProductDetailViewCustom.ascx.cs" Inherits="SitefinityWebApp.ControlTemplates.ProductDetailViewCustom" %>
<%@ Import Namespace="System.ComponentModel" %>
<%@ Import Namespace="Telerik.Sitefinity.Ecommerce.Catalog.Model" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    TagPrefix="sfOrders" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    TagPrefix="sfCatalog" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"
    Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI"
    Assembly="Telerik.Sitefinity" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    TagPrefix="sfFields" %>

<sf:ResourceLinks id="resourcesLinks" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQueryFancyBox" />
</sf:ResourceLinks>
<sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css"
        Static="true" />
</sf:ResourceLinks>
<div id="widgetStatus" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
    <asp:Label ID="widgetStatusMessage" runat="server" />
</div>
<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    <templates>
        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="false" runat="server">
            <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:OrdersResources, ProductNotAvailable %>" />
        </sf:ConditionalTemplate>

        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="true" runat="server">
            <telerik:RadListView ID="SingleItemContainer" ItemPlaceholderID="ItemContainer" AllowPaging="False" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
                <LayoutTemplate>
                    <div class="sfproductDetails sfClearfix">
                        <asp:PlaceHolder ID="ItemContainer" runat="server" />
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="sfproductImgsWrp">
                        <div class="sfproductMainImgWrp">
                            <%-- This is so that we can have the rel="fancybox" without resorting to an Attributes.Add() call --%>
                            <a href='<%# Eval("PrimaryImageUrl") %>' rel="fancybox">
                                <img src='<%# Eval("Thumbnail.Url") %>' alt='<%# Eval("ThumbnailAlternativeText") %>' />
                            </a>
                        </div>

                        <div class="sfproductImgsListWrp">
                            <ul class="sfproductImgsList">
                                <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).Skip(1).ToList()) %>'>
                                    <ItemTemplate>
                                        <li class="sfproductImgWrp">
                                            <a href='<%# DataBinder.Eval(Container.DataItem, "Url") %>' rel="fancybox" class="sfproductImgLnk">
                                                <asp:Image ID="Image1" CssClass="sfproductImg" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ThumbnailUrl") %>' Width='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailWidth") %>' Height='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailHeight") %>' />
                                            </a>
                                        </li>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </ul>
                        </div>
                        <asp:PlaceHolder ID="socialContainer" runat="server"></asp:PlaceHolder>
                    </div>

                    
                    <div class="sfproductInfoWrp">
                        <h1 class="sfproductTitle">
                            <%# Eval("Title") %>
                        </h1>
                        <div class="sfproductPrice">
                            <sfCatalog:DisplayPriceField ID="DisplayPriceField1" runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
                        </div>

                        <sf:ProductDynamicFields id="productDynamicFieldsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />

                        <div class="sfproductDescription">
                            <%# Eval("Description") %>
                        </div>

                        <div class="sfproductOptions">
                            <sf:ProductOptionsControl id="productOptionsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
                        </div>
                        <sfOrders:AddToCartWidget ID="addToCartWidget" ProductId='<%# Eval("Id") %>' runat="server" />
                    </div>
                </ItemTemplate>
            </telerik:RadListView>
        </sf:ConditionalTemplate>
    </templates>
</sf:ConditionalTemplateContainer>
<div id="Div1" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
    <asp:Label ID="Label1" runat="server" />
</div>

<asp:Placeholder id="widgetBody" runat="server">
    <sf:ItemsPerPageSelector ID="itemsPerPageSelectorTop" runat="server" GroupingKey="Products" CssClass="sfitemsPerPageWrp" />

    <telerik:RadListView ID="productsListView" 
                         runat="server"
                         ItemPlaceholderID="ProductContainer" 
                         EnableEmbeddedSkins="false" 
                         EnableEmbeddedBaseStylesheet="false">
        <LayoutTemplate>
            <ul class="sfproductsList">
                <asp:PlaceHolder ID="ProductContainer" runat="server" />
            </ul>
        </LayoutTemplate>
        <ItemTemplate>
            <li class="sfproductListItem">
                <div class="sfproductTmbWrp">
                    <sf:DetailsViewHyperLink ID="thumbnailLink" runat="server" ImageUrl='<%# Eval("ThumbnailUrl") %>' Text='<%# Eval("ThumbnailAlternativeText") %>' ToolTip='<%# Eval("Title") %>' />
                </div>
                <h2 class="sfproductTitle">
                    <sf:DetailsViewHyperLink Text='<%# (Eval("Title").ToString()).TruncateString(56, SitefinityExtensions.TruncateOptions.IncludeEllipsis) %>' runat="server" CssClass="sfproductTitleLnk" />
                </h2>
                <div class="sfproductPrice">
                    <sfCatalog:DisplayPriceField id="displayPriceField" ObjectType="Product" ObjectId='<%# Eval("Id") %>' runat="server" />
                </div>
                <%--NOTE: Uncomment the next line to display custom product fields--%>
                <%--<sf:ProductDynamicFields id="productDynamicFields" runat="server"></sf:ProductDynamicFields>--%>
            </li>
        </ItemTemplate>
    </telerik:RadListView>

    <sf:ItemsPerPageSelector ID="itemsPerPageSelectorBottom" runat="server" GroupingKey="Products" CssClass="sfitemsPerPageWrp" />

    <sf:Pager id="pager" runat="server" DisplayCount="3" />
</asp:Placeholder>

ProductDetailViewCustom.ascx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Sitefinity.Modules.Ecommerce.Catalog;
using Telerik.Sitefinity.Ecommerce.Catalog.Model;
using Telerik.Sitefinity.Model;
using Telerik.OpenAccess;

namespace SitefinityWebApp.ControlTemplates
{
    public partial class ProductDetailViewCustom : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var manager = CatalogManager.GetManager();
            //Get the detail item URL
            var itemUrl = this.GetUrlParameterString(true);
            string redirectUrl = "";
            //Get the actual product from the URL parameters in details page URL
            var product = manager.GetItemFromUrl(typeof(Product), itemUrl, out redirectUrl) as Product;
            if (product != null)
            {
                var assignedTags = product.GetValue<TrackedList<Guid>>("Tags");

                //Here we can get any other fields either directly through the property descriptors, using GetValue
                //e.g. product.GetValue<TrackedList<Guid>>("Departments");
                //Or product.Price, and then query for products with similar price etc.

                //Now we get the datasource for the list of products based on the above criteria
                //Please note that Departments, tags etc fields of type classification are actually lists of Guids
                //so you just have to check if an id is contained in the queried product's list:
                var relatedSource = manager.GetProducts().ToArray().Where(p => p.GetValue<TrackedList<Guid>>("Tags").Any(t => assignedTags.Contains(t)) && p.Id != product.Id);

                // So you query template should be something like 
                //var relatedSource = manager.GetProducts().ToArray().Where(p => p.GetValue<T>("FieldName").Contains("query criteria") && p.Id != product.Id);

                //Then we bind the listview
                //If no data is present, nothing will be displayed
                productsListView.DataSource = relatedSource;
                productsListView.DataBind();
            }

        }
    }
}

ProductDetailViewCustom.ascx.designer.cs

//------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated by a tool.
//
//     Changes to this file may cause incorrect behavior and will be lost if
//     the code is regenerated. 
// </auto-generated>
//------------------------------------------------------------------------------

namespace SitefinityWebApp.ControlTemplates {
    
    
    public partial class ProductDetailViewCustom {
        
        /// <summary>
        /// resourcesLinks control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::Telerik.Sitefinity.Web.UI.ResourceLinks resourcesLinks;
        
        /// <summary>
        /// resourcesLinks2 control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::Telerik.Sitefinity.Web.UI.ResourceLinks resourcesLinks2;
        
        /// <summary>
        /// widgetStatus control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.HtmlControls.HtmlGenericControl widgetStatus;
        
        /// <summary>
        /// widgetStatusMessage control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.WebControls.Label widgetStatusMessage;
        
        /// <summary>
        /// conditionalTemplate control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::Telerik.Sitefinity.Web.UI.ConditionalTemplateContainer conditionalTemplate;
        
        /// <summary>
        /// Literal1 control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.WebControls.Literal Literal1;
        
        /// <summary>
        /// SingleItemContainer control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::Telerik.Web.UI.RadListView SingleItemContainer;
        
        /// <summary>
        /// Div1 control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.HtmlControls.HtmlGenericControl Div1;
        
        /// <summary>
        /// Label1 control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.WebControls.Label Label1;
        
        /// <summary>
        /// widgetBody control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.WebControls.PlaceHolder widgetBody;
        
        /// <summary>
        /// itemsPerPageSelectorTop control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::Telerik.Sitefinity.Web.UI.ItemsPerPageSelector itemsPerPageSelectorTop;
        
        /// <summary>
        /// productsListView control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::Telerik.Web.UI.RadListView productsListView;
        
        /// <summary>
        /// itemsPerPageSelectorBottom control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::Telerik.Sitefinity.Web.UI.ItemsPerPageSelector itemsPerPageSelectorBottom;
        
        /// <summary>
        /// pager control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::Telerik.Sitefinity.Web.UI.Pager pager;
    }
}