This is a blog post in the series “How to set up a product-centric website in SharePoint Server 2013”.  In this series, I'll use data from a fictitious company called "Contoso" to show you how to use search features to set up a website based on product catalog data.
Note: Most of the features described in this series are not available in SharePoint 2013 Online.

For an overview of the blog posts in this series, go to How to set up a product-centric website in SharePoint Server 2013.

 

Quick overview

In previous blog posts, I showed you how to add a Content Search Web Part to a page, and how to configure the query for a catalog page. The next step is to do the same for the catalog item page.

In this blog post we'll learn:

 

 

Start stage 10

Defining how catalog items should be displayed on our Contoso site

The various products featured in the Contoso catalog are all available in different colors. For example, by looking in our catalog list, you’ll see that the Northwind Traders 50W Car Radio is available in five different colors. The color versions of a product are grouped under a common Group Number.

Catalog entries

When displaying a product on our Contoso site, visitors should easily see that the product exists in other colors. For example, when visitors browse to a silver colored version of the Northwind Traders 50W Car Radio, they should easily see which other color options are available for that item. They should also be able to quickly view details about the product in another color, without having to go back to the category page.

So, on our catalog item page we want to display items that have the same Group Number. To do this, we’ll have to use the Content Search Web Part (CSWP).

Note: The item details page that was automatically created when we connected our publishing site to our catalog contained several Catalog Item Reuse Web Parts (CIRWP). There are scenarios where using CIRWPs to display item detail content would be appropriate. However, because the CIRWP is only able to display one item at a time, we can't use this Web Part for our Contoso scenario. 

For information about how to customize the automatically created catalog item page using CIRWPs, see How to: Customize page layouts for a catalog-based site in SharePoint 2013.

 

How to add a Content Search Web Part to a catalog item page

Browse to the catalog item page. In our scenario, click the item "Northwind Traders 50W Car Radio" in the "Audio" category.

Click item on catalog page

This page doesn't show any content. This is because we didn't add any Web Parts to the page when we created it.

Our catalog item page only has one Web Part zone. To add a CSWP to our catalog item page, repeat the steps from How to add a Content Search Web Part to a page, and add the Web Part to Zone 1.

CSWP added to catalog item page

As was the case when we added a CSWP to our category page, the Web Part displays some content (Audio, Cameras and Computers) -- but not the content we want to display. To make the Web Part display Contoso catalog content, we'll need to configure the query in the Web Part. To configure the query, we’ll use what’s known as a query variable. However, before we move on, let me first explain what query variables are, and how they’re used when configuring a query.

 

About query variables

A query variable is a placeholder that is replaced with a value when a query is run.

I completely understand if you thought that definition was as clear as mud, so let me try to explain it in the context of our Contoso scenario. 

You might not have been aware of it, but in Stage 9 when we configured the query in the CSWP on the catalog page, we used a query variable. Here’s what we did: When we selected Restrict by current and child navigation terms, a query variable was added to our query. That query variable was a placeholder for the navigation value in the URL (audio, camera, mp3 etc.). Whenever a visitor clicked a category, the query variable in the Web Part was replaced with the navigation value in the URL. As a result, the Web Part issued a query for catalog items that had been tagged with "audio", "camera", "mp3" etc.

Coming back to our catalog item page, we want to display items that have the same Group Number. Remember how in Stage 3 we added Group Number as one of the list columns to be used as a Catalog Item URL Field. We did this so that the value of Group Number would be used in the URL.

The image below shows our final Contoso site. Notice that the group number, 5637145950, is used as the second to last value in the URL.

Car radio item

If we browse to another product, we’ll see that the group number for this product, 5637145875, is also used as the second to last value in the URL.

Camcorder item

So, when configuring the query for the CSWP on our catalog item page, we should use a query variable that will represent the second to last value in the URL.

Query variables are contained within curly brackets like this: {QueryVariable}. I don't know about you, but I always get a bit edgy whenever I see these kinds of brackets, because they usually mean we are moving into something complex.  But not to worry, it's not as scary or as complex as it looks.

As I mentioned above, when we configured the query in the CSWP on the catalog page, we used a query variable. However, we never had to deal with any scary looking curly brackets, because the nice-looking radio button, Restrict by current and child navigation terms, took care of that for us.  To configure the query for our item catalog page, we’ll have to add a query variable with curly brackets. Luckily, we’ll have some friendly pull-down menus to help us along. So let's dive into the task of configuring the query.

 

How to configure a query in a Content Search Web Part on a catalog item page

  1. In the Web Part, click the Web Part Menu --> Edit Web Part.
  2. In the Web Part tool pane, click Change query. This opens a dialog box.
  3. In the dialog box, from the Select a query list, select your catalog result source. In our scenario, it's catalog - Products Results.

catalog result source

  1. Click Switch to Advanced Mode.

Switch to Advanced Mode

In Advanced Mode, in the Query text field, you’ll see some text. This is the query text that represents our result source catalog - Products Results (we saw the same query text in Stage 9 when we learned about How to view details of the query configuration).

Result Source in Query text field

  1. In the Property filter list box, select Show all managed properties.

 Show all managed properties 

  1.  In the Property filter list box, select ProductCatalogGroupNumberOWSTEXT, Contains and Value of a token from URL.

 Set query in CSWP

 ProductCatalogGroupNumberOWSTEXT is the managed property name of the site column Group Number (remember how I showed you the naming convention for this column in an earlier blog post). Contains and Value of a token from URL will create the query variable we want to use.

  1. Click Add property filter.

Query added to CSWP

Notice that ProductCatalogGroupNumberOWSTEXT:{URLToken.1} has been added to the Query text field. So without having to know about query syntax or type in a curly bracket, we’ve added a query variable.

So now you might be thinking "OK, that was easy, but what does ProductCatalogGroupNumberOWSTEXT:{URLToken.1} actually mean?"  Well, let me break it down :

  • ProductCatalogGroupNumberOWSTEXT is the managed property that represents the Group Number column in our catalog.
  • The colon : means "contains"
  • {URLToken.1} represents a value from the URL of the current page.  The integer, in this case 1, represents the value in the URL as counted from right to left. So, for example, in the URL http://www.contoso.com/cameras/camcorders/563714875/6637146586, the query variable {URLToken.1} represents the value 6637146586.

If we put the entire query together, this query means the following:

From the result source catalog - Products Results, search for items where the value of the managed property ProductCatalogGroupNumberOWSTEXT contains the value that is currently used as the first value in the URL, counting from right to left.

In Stage 3, we defined that the item URL should contain both Group Number and Item Number as catalog Item URL Fields. This means that the first value in the URL, counting from right to left, is Item Number. We want to search for items that have the same Group Number, so we need to make a small change to the query variable.

  1. In the Query text field, change the number in the query variable to 2.

URLToken.2

Now the query in the Web Part will search for items where the value of the managed property ProductCatalogGroupNumberOWSTEXT contains the value that is currently used as the second value in the URL, counting from right to left.

  1. To test that this query returns the correct results, click Test query.

Test query

Notice that five items are displayed under RelevantResults. This verifies that the query is correct, because we know that that the Northwind Traders 50W Car Radio is available in five different colors.

  1. Click OK and save the page.

Query results in CSWP

Even though this looks far from our desired outcome (three products are displayed instead of only one, we still don’t have a "Contoso look"), believe me, this is progress. The query in the Web Part has now been configured. In the next blog post, I’ll show you how to add display templates that will give our items the Contoso look.

 

 

Next blog post in this series
Stage 11: Upload and apply display templates to the Content Search Web Part

 

 

Additional resources