THIS IS ARCHIVED DOCUMENTATION

Displaying Results Differently According to the Item Template Using the Coveo for Sitecore Legacy Search UI Framework

This is for:

Developer System Administrator

Coveo for Sitecore 4.1 (November 2018)

This tutorial is a follow up to the Changing the Default Result Template tutorial. You’ll need to complete the previous tutorial before you complete this one.

The result template can be customized according to the item template. As such, it’s possible to alter the results template to display flights differently than destinations. This tutorial demonstrates how to achieve this by adding destinations in the search results and changing the template for these results.

You’re required to index Country Items to successfully complete this exercise. From the Content Editor, select Destinations under Home\Plan&Book and use the Re-Index Tree option (Developer menu > Re-Index Tree).

Requirements

This tutorial assumes that:

Steps

  1. Open the Sitecore Content Editor.

  2. Open your Coveo Search Component properties.

  3. Add a new condition to your existing filtering rule: or where the item template is Country Item.

  4. Preview your Coveo-powered search page. Currently, flight destinations shouldn’t display properly.

  5. Open your Coveo Search Component sublayout in a text editor (typically located at Website/layouts/Coveo/CoveoSearch.ascx).

  6. Locate the result-template block. It should contain the following script:

     <script class="result-template" type="text/x-underscore-template">
     <div class='coveo-title'>
         <span class="CoveoResultTitleContent"># {{= raw['<%= ToCoveoFieldName("Flight Number", false) %>'] }} : {{= raw['<%= ToCoveoFieldName("DepartureAirportCity", false) %>'] }} ({{= raw['<%= ToCoveoFieldName("DepartureAirportCode", false) %>'] }}) to 
         {{= raw['<%= ToCoveoFieldName("ArrivalAirportCity", false) %>'] }} ({{= raw['<%= ToCoveoFieldName("ArrivalAirportCode", false) %>'] }})</span>
     </div>

     <table class='CoveoFieldTable'>
         <tr>
             <th class="CoveoCaption">Total Price</th>
             <td class="total-price">
                 <strong>{{= Globalize.format(raw['<%= ToCoveoFieldName("Price") %>'.substr(1)], 'c')}}</strong>
             </td>
         </tr>
         <tr>
             <th class="CoveoCaption">Departure</th>
             <td class="departure-date">
                 <strong>{{= new Date(raw['<%= ToCoveoFieldName("Departure time", false) %>']).toLocaleString().replace(/:\d+ (\w\w)$/, '$1') }}</strong>
             </td>
         </tr>

         <tr>
             <th class="CoveoCaption">Arrival</th>
             <td class="arrival-date">
                 <strong>{{= new Date(raw['<%= ToCoveoFieldName("Arrival time", false) %>']).toLocaleString().replace(/:\d+ (\w\w)$/, '$1') }}</strong>
             </td>
         </tr>
         <tr>
             <th class="CoveoCaption">Flight duration</th>
             <td class="departure-date">
                 <strong>{{= number(raw['<%= ToCoveoFieldName("flightduration", false) %>'] / 60, "n0")}} h</strong>
             </td>
         </tr>
     </table>
 </script>

  7. Replace the coveo-title div element with the following code to display the destination titles correctly:

     <div class='coveo-title'>
     {{ if(raw['<%= ToCoveoFieldName("_templatename", false) %>'] == 'Flight'){ }}                                    
     <span class="CoveoResultTitleContent"># {{= raw['<%= ToCoveoFieldName("Flight Number", false) %>'] }} : {{= raw['<%= ToCoveoFieldName("DepartureAirportCity", false) %>'] }} ({{= raw['<%= ToCoveoFieldName("DepartureAirportCode", false) %>'] }}) to 
     {{= raw['<%= ToCoveoFieldName("ArrivalAirportCity", false) %>'] }} ({{= raw['<%= ToCoveoFieldName("ArrivalAirportCode", false) %>'] }})</span>
     {{ } else { }}
         <span class="CoveoResultTitleContent">{{= raw['<%= ToCoveoFieldName("Name", false) %>'] }}</span>
     {{ } }}
 </div>

    By adding a conditional statement on the _templatename field, you can alter the rendering behavior for each item result template. In this case, you’re displaying the departure and arrival airports for flights and the location of destinations.

  8. Replace the CoveoFieldTable table with the following code to display the destination descriptions:

     <table class='CoveoFieldTable'>
     {{ if(raw['<%= ToCoveoFieldName("_templatename", false) %>'] == 'Flight'){ }}
         <tr>
             <th class="CoveoCaption">Total Price</th>
             <td class="total-price">
                 <strong>{{= Globalize.format(raw['<%= ToCoveoFieldName("Price") %>'.substr(1)], 'c')}}</strong>
             </td>
         </tr>
         <tr>
             <th class="CoveoCaption">Departure</th>
             <td class="departure-date">
                 <strong>{{= new Date(raw['<%= ToCoveoFieldName("Departure time", false) %>']).toLocaleString().replace(/:\d+ (\w\w)$/, '$1') }}</strong>
             </td>
         </tr>
         <tr>
             <th class="CoveoCaption">Arrival</th>
             <td class="arrival-date">
                 <strong>{{= new Date(raw['<%= ToCoveoFieldName("Arrival time", false) %>']).toLocaleString().replace(/:\d+ (\w\w)$/, '$1') }}</strong>
             </td>
         </tr>
         <tr>
             <th class="CoveoCaption">Flight duration</th>
             <td class="departure-date">
                 <strong>{{= number(raw['<%= ToCoveoFieldName("flightduration", false) %>'] / 60, "n0")}} h</strong>
             </td>
         </tr>
     {{ } else { }}
     <tr>
         <th class="CoveoCaption">Overview</th>
         <td>{{= raw['<%= ToCoveoFieldName("Destination Overview", false) %>'].substr(0, 200) + "..." }}
         </td>
     </tr>
     {{ } }}
 </table>

    Once again, conditional statements are used to change the look of the result template. For flights, the price, the departure and arrival times, and the approximate flight duration are displayed. For other items, such as destinations, the overview is displayed. Furthermore, since the overview can span through several lines, the amount of characters displayed in the template is limited to 200.

  9. Validate that flights and destinations are displayed correctly by searching for specific flights and destinations.