Predictive Search Results Design and Styling

Jason D asked on September 30, 2016 01:11

Hi, I can see where to style the SmartSearchPredictiveResults transformation, but how do I apply a hierarchical transformation so I can apply styles and links to the header titles in the predictive search results. Right now, I can only style the items, and not the header titles. Screen shot of what I'm trying to do.

Image Text

Correct Answer

Aaron Kent answered on October 3, 2016 18:29

You will need to modify the RenderResults Method within following file: ~\CMS\CMSWebParts\SmartSearch\SearchBox.ascx.cs

In my instance, the portion that you need to modify is line 930 and has the following:

// Render each index category
        foreach (var categories in indexCategories)
            // Display categories
            if (PredictiveSearchDisplayCategories)
                SearchIndexInfo indexInfo = SearchIndexInfoProvider.GetSearchIndexInfo(categories.Key);
                string categoryName = indexInfo == null ? String.Empty : indexInfo.IndexDisplayName;
                repSearchResults.HeaderTemplate = new TextTransformationTemplate("<div class='predictiveSearchCategory nonSelectable'>" + categoryName + "</div>");

            // Fill repeater with results
            repSearchResults.ItemTemplate = CMSDataProperties.LoadTransformation(this, PredictiveSearchResultItemTransformationName);
            repSearchResults.DataSource = categories.Value;
            repSearchResults.RenderControl(new HtmlTextWriter(stringWriter));

Here you see the div class being created and this is what you will need to change in order to apply CSS to it. That being said, you are modifying a file that will be over-written when applying any hotfixes and upgrades so our recommendation is to actually clone the web part, rename it and make the changes to the clone so that when you upgrade of apply a hotfix, this web part clone is not affected and so your changes will persist.

0 votesVote for this answer Unmark Correct answer

Recent Answers

Jason D answered on October 3, 2016 18:34

Thanks Aaron. I'll give this a try-- makes sense!

0 votesVote for this answer Mark as a Correct answer

Mariya fox answered on September 13, 2017 13:27

Hi Jason,

I anderstand how complex is this for you but you can use schema for this issue, I had a same problem & i have been implement for my web design company in Toronto

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.