This guide will cover the options for Rating/Review indexing as well as where to locate the elements necessary for display customization within Template JS

 Ratings and Review data can can be used by Klevu to:

• Display Rating “stars” and Review “count” in the result set display
• Allow the visitor to refine/filter results by the number of Rating “stars”
• Allow the visitor to SortBy Rating “stars”
• Enable Klevu Machine Learning to consider the Ratings in relevancy ranking

See : This Knowledge Base Guide on how to enable each of the above.

In order to allow Klevu the Rating and Review count data must first be indexed to Klevu in one of the following ways:

• Within the Feed XML file
• Within the Klevu Indexing API
• Using one of the supported 3rd party connectors
• Custom field mapping using one of Klevus supported platform Apps/plugins
  • Please contact Klevu support for further details on this option



Indexing

The Rating and Review Count data must be supplied at the product level during catalog indexing.

XML FEED example

    <item>
   . . .
        <rating>4.5</rating>
        <rating_count>10</rating_count>
   . . .
    </item>

See : XML FEED Example for Ratings



API Reference

See : Klevu API Documentation for Data Indexing





Customizing

CSS

The “star” images used in the default Template JS layout are 2 different images. They are overlapped and displayed at a width percentage that is appropriate for the rating value of the record

• Gray Star : https://js.klevu.com/klevu-js-v1/img-1-1/star-gray.png
• Yellow Star : https://js.klevu.com/klevu-js-v1/img-1-1/star-yellow.png

The following class selectors can be overridden to consider different images or other desired effects:

.kuFilterTagsContainer .klevuFacetStars {
  height: 15px;
  display: inline-block;
  vertical-align: bottom;
  background: transparent url(https://js.klevu.com/klevu-js-v1/img-1-1/star-gray.png) top left repeat-x;
  width: 65px;
}
.kuFilterTagsContainer .klevuFacetStars .klevuFacetRating {
  background: transparent url(https://js.klevu.com/klevu-js-v1/img-1-1/star-yellow.png) top left repeat-x;
  height: 15px;
}

See : Styling CSS for further details on overriding Template JS default CSS

Sorting

The Template JS SortBy feature can be modified to include Rating Ascending/Descending order.

See : SortBy Options guide for examples of modifying Template JS default Sorting options

See : Klevu API Documentation for all available Sorting Options



Filtering

Filtering by Rating “stars” is accommodated like all Template JS facets.

The key value pairs are as follows:

See : Klevu API Documentation for Applying Facets

Template JS Override

There are three default templates that can be accessed should you choose to override for Ratings customizations

• klevuLandingProductRating - used for product block display
• klevuLandingTemplateFilters - used for filter section
• kuFilterTagsTemplate - used for active filter tags

See : Custom Overrides for details on preparing for Klevu JS overriding

Within the JSON response object the Ratings are defined with a type value of "RATING". This value is used during template display logic to render specific elements for Ratings and Review Count.

JSON response example

  "filters": [
 . . .
        {
            "key": "rating",
            "label": "Customer Reviews",
            "type": "RATING",
            "options": [
                {
                    "count": 28,
                    "name": "5",
                    "value": "4.51 - 5.5",
                    "selected": true
                }
            ]
        },
  . . .



Template Override Example

This example overrides the klevuLandingProductRating template to display some custom text based on the items Rating value.

See : Custom Overrides for details on preparing for Klevu JS overriding

<script type="text/javascript">
// Defer initialization (powerUp) of the Klevu components
    klevu({
		powerUp: {
			landing: false
		}
    });
    
// OVERRIDE :  LANDING PAGE
    klevu.coreEvent.build({
        name: "myLandingPageOverride",
        fire: function () {
            if (klevu.getSetting(klevu,"settings.flags.setRemoteConfigLanding.build", false)) {
                return true;
            }
            return false;
        },
        maxCount: 150,
        delay: 100
    });

    // Listen in to our custom event, to make our overrides
    klevu.coreEvent.attach("myLandingPageOverride", {
        name: "attachToMyLandingPageOverride",
        fire: function () {
        
            // Override with a custom template
            klevu.search.landing.getScope().template.setTemplate(
                klevu.dom.helpers.getHTML("#klevuLandingProductRatingOverride"),
                "klevuLandingProductRating",
                true
            );
            
            
            //  power up
            klevu({
                powerUp: {
                    landing: true
                }
            });
            
        }
    });
</script>
    
    
<script type="klevu/template" id="klevuLandingProductRatingOverride">
    <%  if(
            typeof dataLocal.rating != "undefined" && 
            dataLocal.rating !== "" &&
            dataLocal.rating > 0
        ) { %>""
    
// CUSTOM text based on Rating value  
        <% if (dataLocal.rating >= 5) { %>
        <span class="topRated">TOP RATED!</span>
        <% } %>
    
        <div class="klevu-stars-small-l2">
            <div class="klevu-rating-l2" style="width:<%=(20*Number(dataLocal.rating))%>%;"></div>
        </div>
        <%=helper.render('klevuLandingProductRatingCount',scope,data,dataLocal) %>
    <% } %>
</script>