Changing the Sift Results Layout

When you install Sift a _SiftDefaultResults partial view is added that provides a default layout for the search results. This partial view is rendered in the results <div> to display the search results. There is nothing to stop you updating this partial view to meet your requirements. However, I would recommend creating separate partial views for your filter results.

You specify which partial view to display by adding the data-sift-result-partial to the outer <div> of a sift block. Do not include the ".cshtml" extension.

@inherits Umbraco.Web.Mvc.UmbracoViewPage
 
<h1>Results Partial View Filter</h1>
 
<div class="sift"
     data-sift-result-document-type="cinemaCento"
     data-sift-result-partial="_SiftResultsPartialExample">
 
    <form class="sift-criteria">
 
        @Html.AntiForgeryToken()
 
        <label for="filmName">Name</label>
        <input type="text" id="filmName" name="filmName"
               class="sift-criterion"
               data-sift-match-property="nodeName" />
        <p></p>
 
        <input type="submit" value="Search" />
 
    </form>
 
    <div class="sift-result">
    </div>
 
</div>
 
<script src="~/Scripts/sift.js" type="text/javascript"></script>

The partial view should accept a SearchResultNodes object, which includes a Nodes property with a list of IPublishedContent references to the content found. It also contains the Criteria information and details on the number of results and number of pages returned.

Take a look at _SiftDefaultResults for an example of how this information can be used. The following results partial example displays the date and star rating for the films returned.

@model SiftLibrary.Models.SearchResultNodes
 
@foreach (var node in Model.Nodes)
{
    var formattedDate = node.Value<DateTime>("date").ToString("dd MMM yyyy");
    var numStars = node.Value("starRating") + " stars";
 
    <a href="@node.Url()">@node.Name()</a><br/>  
    @formattedDate<br/>
    @numStars
    <hr />
}

When rendered this looks like this.

Sift result partial view

<< Back to User Guide