Display template renderer for managed navigation terms

Question

We have a cross-site publishing set up. It is working and bringing across our catalog of items and the terms we used to setup a managed navigation on our publishing/user side.

We are showing catalogs of items and using managed navigation from the termset used to mark up the catalog of items. The user can nagivate through the catalog and see lists of items in certain categories and then when the user clicks on an item we show a detail page with all the information about the item. That part is working well.

The users can also get to the details page by performing a search and clicking on the result on our search results page. That leads to the same reuse details page.

On the details page we want to show all the terms that an item is marked with and make them links that would be the same as clicking the managed navigation term of the same value.

The basic idea is that we want to say "This item is blue, if you are interested in other blue things, click this word blue." (not in as many words.) In this case the item has been tagged with managed metadate with the value of blue and blue has been pinned to the managed navigation so there is a friendly url of the sort:

mysitecollection/managedpath/site/parentterm/colors/blue-items

The details page is made with a page layout and snippets. We have the snippet that allows us to show the word "blue" but it is just a static word it isn't tied into the navigation.

Following this tutorial here we have figured out how to create a custom renderer that allows me to get at the data and I can retrieve the term

GP0|#c1b19505-038a-4386-981c-9eeea4e9843a
L0|#0c1b19505-038a-4386-981c-9eeea4e9843a|Blue
GTSet|#569a5bfe-7c14-4fe8-b341-6bab0fab576a
GPP|#ef604edb-0265-4aa4-93fb-c78e8f059798

These are the four values that are hidden behind the term "Blue." The GTSet value is the guid of the termset, the GPP value is the guid for the parent term "Color" and the other two are the guid for "blue" -- one is for the case of tagged with "blue" and the other is for any children of "blue" (which there are none in this case).

So the custom renderer runs in a display template like setting. It is all html with commented out javascript bits that gets uploaded and generates an .aspx page.

Does anyone know how to turn that kind of data into a navigation element using display template technology?

Answer 1

It has been more than a year, but I finally figured out a solution. Our actual problem also has several different managed properties that could be used to tag the catalog items.

First on the catalog side, I map several different properties -- color, flavor,etc. -- into one RefinableString. I wait the 20 minutes for our crawl to populate the newly mapped properties.

Then on the publishing side on my details page (catalogItem) I create a custom renderer that takes the values from the RefinableString property and creates links to a category page providing the tag's value in the URL. Like this...

~sitecollection/path/MyRelatedContent.aspx?currentTag=bitter

Then category page (based on catalogitem reuse) includes a content search webpart that has a query that retrieves the currentTag from the url and searches for that value in the RefinableString.

Don't know if there is an easier way to do this -- there really should be -- but this is how I eventually solved this.

Answer 2

Just to confirm, if you are on a item page, you would like to show a link back to the corresponding color page.

In case that is true, your URL for items will look like this I think:

mysitecollection/managedpath/site/parentterm/colors/blue/item

So the URL you need to include will be:

mysitecollection/managedpath/site/parentterm/colors/blue

First what you need to do is to retrieve the managed property in the display template, but you already done this. So the next thing to do is create a new anchor tag like this:

<a href='./' title='_#= color.getRenderedValue() =#_'>_#= color.getRenderedValue() =#_</a>

By including this in the template, you go one level up, so back to the colors page. Another way could be to retrieve the path of the page, and remove everything after you color category:

var categoryValue = color.getRenderedValue().toLowerCase();
var path = ctx.CurrentItem.Path.toLowerCase();
path = path.substring(0, path.indexOf(categoryValue) + categoryValue.length);

Use the path value to show the link in HTML:

<a href='_#= path =#_' title='_#= color.getRenderedValue() =#_'>_#= color.getRenderedValue() =#_</a>