Sitefinity Ecommerce - Related products using RadRotator

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>
<style type="text/css">

.horizontalRotator
{
   
    margin-left: auto;
    margin-right: auto;

    clear: both;
}
</style>
<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>

<div id="RelatedProducts">
<div><h2>Related Products</h2></div>
    <telerik:RadRotator ID="MyRotator" runat="server" RotatorType="Buttons"
        Width="700px" ItemWidth="220" Height="300px" ItemHeight="300" 
        WrapFrames="true" FrameDuration="2000" CssClass="horizontalRotator">
        <ItemTemplate>
            <h2>
                <li class="sfproductListItem">
                    <div class="sfproductTmbWrp">
                        <asp:HyperLink id="imageLink" runat="server"><asp:Image id="thumbnailLink" runat="server" /></asp:HyperLink>
                    </div>
                    <h2 class="sfproductTitle"> 
                        <asp:HyperLink id="detailsLink" runat="server" />
                    </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>
            </h2>
        </ItemTemplate>
    </telerik:RadRotator>
</div>

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;
using Telerik.Sitefinity.Modules.Libraries;
using Telerik.Sitefinity;
using Telerik.Sitefinity.Web.DataResolving;

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
                if (relatedSource.Count() == 0)
                {
                    MyRotator.Visible = false;
                }
                else
                {
                    MyRotator.DataSource = relatedSource;
                    MyRotator.Visible = true;
                    MyRotator.ItemDataBound += new Telerik.Web.UI.RadRotatorEventHandler(MyRotator_ItemDataBound);
                    MyRotator.DataBind();
                }
            }

        }

        void MyRotator_ItemDataBound(object sender, Telerik.Web.UI.RadRotatorEventArgs e)
        {
            var item = e.Item.DataItem;
            if (item != null)
            {
                var product = item as Product;
                var tmbLnk = e.Item.FindControl("thumbnailLink") as Image;
                var titleLnk = e.Item.FindControl("detailsLink") as HyperLink;
                var imageLink = e.Item.FindControl("imageLink") as HyperLink;
                
                tmbLnk.ImageUrl = product.ThumbnailUrl;
                titleLnk.NavigateUrl = DataResolver.Resolve(product, "URL", null);
                imageLink.NavigateUrl = DataResolver.Resolve(product, "URL", null);
                titleLnk.Text = product.Title;
            }
        }
    }
}

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>
        /// MyRotator control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::Telerik.Web.UI.RadRotator MyRotator;
    }
}