Include App Item Information in Search Results

Overview

Sometimes you want to show more than just the title, description and link for items in the search results. 

In this example we're going to include one of the primary images of a gallery item if it shows in the search results.

How it will be done

The search results array contains a limited amount of information for each result item. This is done intentionally for efficiency reasons. In most cases only the link, description and title for each item are used. 

For each item there is some app specific information that can we can use. See the Result List section on the Search Result Content Template page. 

As we loop through each item in the search result array we're going to test and see if the item is part of the gallery app. If so then we will do an API call to the gallery app to get more information about the item.

Relevant links

Here are some links to other documentation pages that are relevant to this example.

Search result content template

Search results app page

Gallery item filter API

"setApi" variable modifier

"first" variable modifier

"unset" variable modifier

Search results content template code

Below is a simple example of the search results content template. This example is just showing the part of the content template where the results are shown. You will most likely also include code to display what was searched for and pagination.

Note the logic for each item to see if it's part of the gallery app. 

{loop items="#results" value="result"}
  <p>
    <a href="{#result.url}">{#result.title}</a>
    {if #result.app == 'gallery'}
      {#gallery|setApi call="gallery.itemFilter" instanceKey="{#result.appInstanceKey}" attr[id]="{#result.itemId}"}
      {#gallery|first saveAs="gallery" key="primaryImages"}
      {if #gallery.small.tag}
        <br />{#gallery.small.tag}
      {/if}
      {#gallery|unset}
    {/if}
  </p>
{/loop}

  1. When looping through the results the "app" value is tested to see if the item's app value is "gallery".
    {if #result.app == 'gallery'}{/if}
  2. If that is the case then an API call is made the to gallery app to get the information for the item. 
    {#gallery|setApi call="gallery.itemFilter" instanceKey="{#result.appInstanceKey}" attr[id]="{#result.itemId}"}
    The "instanceKey" parameter is necessary if you have multiple gallery app instances to make sure that the correct instance is queried.
    The "attr[id]" parameter tells the API to only get the gallery item that has the corresponding id value. 
  3. The result from the gallery itemFilter API is an array of gallery items. In this example only one item is returned but it's still part of the array of items. We need to get the first value of the array so we use the "first" variable modifier
    {#gallery|first saveAs="gallery" key="primaryImages"}
    The "key" parameter is used to only get the "primaryImages" array within the gallery item array. The result is resaved to the "gallery" variable so that it will now only contain the array of primary images for the gallery item.
    If you're confused at this point it might make sense in your code to debug the "gallery" variable right after the API call and you'll see what we mean. 
    {#gallery|debug}
  4. In this example we want to use the small image for the gallery item. We do a quick test to see if it exists and if so output it.
    {if #gallery.small.tag}
      <br />{#gallery.small.tag}
    {/if}
  5. Lastly we unset the "gallery" variable so that future API calls in the next loop iteration are not appending to the variable.
    {#gallery|unset}