Digital Experience
Customizing Sitefinity SearchResults - displaying Product thumbnails and other Content type-specific data

Customizing Sitefinity SearchResults - displaying Product thumbnails and other Content type-specific data

by The Progress Team
Posted on November 06, 2012 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

Many of you have requested assistance in delivering various custom functionality in the Sitefinity SearchResults widgets.

From displaying the Page's description, showing custom messages depending on the type of the item, to displaying Product thumbnails.

By default the SearchResults widget operates with an IResultSet containing objects of type IDocument - these are the item representations in the Sitefinity search index, and are the same for all Sitefinity content, thus only general properties can be persisted.

Each IDocument carries the information for the item's ContentType  in the contain the "ContentType" field where you can obtain the correct information what kind of item you're dealing with.

Once you've resolved the type, you can then operate with this type's specific properties, however you first need to get the actual item (remember what you've been working with so far is the Lucene document, not the Sitefinity item). 

This is done by obtaining the item's ID. By default the field name where the original Sitefinity content ID is stored inside each Lucene document varies depending on how the particular module has configured its inbound pipe. The unified concept that we have adopted is that all Content types will use the "OriginalItemId" field.

Once we have information about the ContentType  and the OriginalItemId this allows us to determine which content manager we need to call, and which Id to pass, in order to retrieve the actual item. Form then on operating with the item is just as with any item of that type - you can get its properties and use them depending on your specific use case scenario.

So for the SearchResults widget we can easily create an external template based on the default one, that  will allow us to use code-behind, subscribe to the ResultsListItemDataBound  event in the template code-behind and do something like:

using System;
using System.Linq;
using System.Web.UI.WebControls;
using Telerik.Sitefinity.Ecommerce.Catalog.Model;
using Telerik.Sitefinity.Libraries.Model;
using Telerik.Sitefinity.Modules.Ecommerce.Catalog;
using Telerik.Sitefinity.Modules.Libraries;
using Telerik.Sitefinity.Modules.Pages;
using Telerik.Sitefinity.Pages.Model;
using Telerik.Sitefinity.Services.Search.Data;
using Telerik.Sitefinity.Utilities.TypeConverters;
using DotNetImageControl = System.Web.UI.WebControls.Image;
 
namespace SitefinityWebApp.CustomTemplates
{
    public partial class SearchResultsProducts : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.resultsList.ItemDataBound += ResultsListItemDataBound;
            this.catalogManager = CatalogManager.GetManager();
            this.libMan = LibrariesManager.GetManager();
            this.pageMan = PageManager.GetManager();
        }
 
        void ResultsListItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            var myitem = e.Item.DataItem as IDocument;
 
            if (myitem != null)
            {
                //You need to check for the type of the item you have gotten in your search results
                var type = myitem.GetValue("ContentType");
 
                //Documents enter the index with an Id field
                if (TypeResolutionService.ResolveType(type) == typeof(Document))
                {
                    var docItem = libMan.GetDocument(new Guid(myitem.GetValue("Id")));
                    var path = docItem.FilePath;
                }
 
                //Pages get in the index with OriginalItemId field
                //Here's how you can display a page property in your search results
                if (TypeResolutionService.ResolveType(type) == typeof(PageNode))
                {
                    var ID = new Guid(myitem.GetValue("OriginalItemId"));
                    //you can now get the item with its manager and access its properties,
                    //since you'll be working with an object of the correct type
                    //for example:
                    var page = pageMan.GetPageNode(ID);
                    if (page != null)
                    {
                        //check if the PageNode has PageData
                        if (page.Page != null)
                        {
                            //now you can simply get a control from your template and set the value to it,
                            //so it can be displayed
                            var literalControl = e.Item.FindControl("pageDescriptionLiteral") as Literal;
                            literalControl.Text = page.Page.Description;
                        }
                    }
                }
 
                //Products, and Content items also enter the index with OriginalItemId field
                if (TypeResolutionService.ResolveType(type) == typeof(Product))
                {
                    var ID = new Guid(myitem.GetValue("OriginalItemId"));
                    //get the control that will display our data on the template
                    var image = e.Item.FindControl("productThumbnail") as DotNetImageControl;
                    //get the actual Product item
                    var product = CatalogManager.GetManager().GetProduct(ID);
                    if (product != null)
                    {
                        //ste the property value to the control so it will be displayed on the frontend
                        image.ImageUrl = product.PrimaryImageUrl;
                    }
                }
            }
 
        }
 
        private CatalogManager catalogManager;
        private LibrariesManager libMan;
        private PageManager pageMan;
    }
}

 

For your convenience I'm attaching an archive of the control template above to this post.

In conclusion, you've probably realized that this post just scratches the surface on the amount of modifications that can be done when customizing your search results, hope it helps you achieve your desired functionality.

search widgets
progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Follow us viaRSS Feed
 
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
More From Progress
 
 
 
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation