How to display the discount in results

or send an email to support@doofinder.com

Calculate and display the percentage discount in the Doofinder layer

Do you want to give more visibility to products that have a discounted price?

display discount

Well, you are in the right place! You will easily learn how to calculate this percentage and display it in the Doofinder layer so your users will directly see the best offers while using the search!

What you require in order to achieve this customization:

  • a price and sale_price field in your feed
  • a custom results template
  • a callback
  • some nice CSS rules

The first requirement is to have indexed a price and a sale_price field in your feed. As you may already know, the price field corresponds to the normal price and the sale_price field should contain the discounted price.

Notice: Remember that you need to index a "sale_price" only if there is a discounted price, otherwise leave it empty.

You will also need to use the following template in order to display this percentage discount within the Doofinder layer, you can just copy and paste it:

<script type="text/x-mustache-template" id="df-results-template">
{{#is_first}}
  {{#banner}}
    <div class="df-banner">
      <a {{#blank}}target="_blank"{{/blank}} href="{{link}}" data-role="banner" data-banner="{{id}}">
        <img src="{{#remove-protocol}}{{image}}{{/remove-protocol}}">
      </a>
    </div>
  {{/banner}}
{{/is_first}}
{{#total}}
  {{#results}}
    <div class="df-card" data-role="result">
      <a class="df-card__main" href="{{#url-params}}{{{link}}}{{/url-params}}" data-role="result-link" data-dfid="{{dfid}}" <a target="_blank">
            {{#discount}}
        <div class="df-discount"> -{{discount}}% </div>
        {{/discount}}
        {{#image_link}}
          <figure class="df-card__image">
            <img src="{{image_link}}" alt="{{title}}">
          </figure>
        {{/image_link}}
        <div class="df-card__content">
          <div class="df-card__title">{{title}}</div>
          <div class="df-card__description">{{{description}}}</div>
          {{#price}}
          <div class="df-card__pricing">
            <span class="df-card__price {{#sale_price}}df-card__price--old{{/sale_price}}">
              {{#format-currency}}{{price}}{{/format-currency}}
            </span>
            {{#sale_price}}
              <span class="df-card__price df-card__price--new">
                {{#format-currency}}{{sale_price}}{{/format-currency}}
              </span>
            {{/sale_price}}
          </div>
          {{/price}}
          {{#df_rating}}
          <div>
            <div class="df-rating" title="{{df_rating}}">
              <div class="df-rating__value" style="width: {{#rating-percent}}{{df_rating}}{{/rating-percent}}">
                <i></i><i></i><i></i><i></i><i></i>
              </div>
              <div class="df-rating__placeholder">
                <i></i><i></i><i></i><i></i><i></i>
              </div>
            </div>
          </div>
          {{/df_rating}}
        </div>
      </a>
    </div>
  {{/results}}
{{/total}}
{{^total}}
  {{#noResultsHTML}}{{{noResultsHTML}}}{{/noResultsHTML}}
  {{^noResultsHTML}}
    <p class="df-no-results">{{#translate}}Sorry, no results found.{{/translate}}</p>
  {{/noResultsHTML}}
{{/total}}
</script>

As you can see, we are displaying this new field next to the product image.

You might think that you don't have this field in your feed but don't worry, we will create it in the following step.

Remember that you need to invoke the template in your Doofinder script:

<script type="text/javascript">
var doofinder_script ='//cdn.doofinder.com/media/js/doofinder-classic.7.latest.min.js';
(function(d,t){var f=d.createElement(t),s=d.getElementsByTagName(t)[0];f.async=1;
f.src=('https:'==location.protocol?'https:':'http:')+doofinder_script;
f.setAttribute('charset','utf-8');
s.parentNode.insertBefore(f,s)}(document,'script'));

var dfClassicLayers = [{
  "queryInput": "#xxxxxxx",
  "hashid": "xxxxxxxxxxxxxxxxxx",
  "zone": "eu1",
  "display": {
    "lang": "xx",
    "width": "xx%",
    "results": {
      "template": document.getElementById('df-results-template').innerHTML
    }
  }
}];
</script>

As we said, we need now to generate this discount percentage using the callbacks. You can insert it in your script as follows:

<script type="text/javascript">
var doofinder_script ='//cdn.doofinder.com/media/js/doofinder-classic.7.latest.min.js';
(function(d,t){var f=d.createElement(t),s=d.getElementsByTagName(t)[0];f.async=1;
f.src=('https:'==location.protocol?'https:':'http:')+doofinder_script;
f.setAttribute('charset','utf-8');
s.parentNode.insertBefore(f,s)}(document,'script'));

var dfClassicLayers = [{
  "queryInput": "#xxxxxxx",
  "hashid": "xxxxxxxxxxxxxxxxxx",
  "zone": "eu1",
  "callbacks": {
    "loaded": function(instance) {
        var controller = instance.layer.controller;
        controller.processors.push(function(response) {
            response.results = response.results.map(function(result) {
                if (result.price != result.best_price) {
                    var price = result.price,
                        best_price = result.best_price;
                    result.discount = Math.ceil((price - best_price) * 100 / price);
                }
                return result;
            });
            return response;
        });
    }
  },
  "display": {
    "lang": "xx",
    "width": "xx%",
            "results": {
      "template": document.getElementById('df-results-template').innerHTML
    }
  }
}];
</script>

Now you will see the percentage discount appear within the Doofinder layer, you can customize it simply using some CSS code:

.df-classic .df-discount {
  position: absolute;
  text-align: center;
  top: 10px;
  left: 220px;
  background-color: #FF5000;
  padding-right: 20px;
  padding-left: 10px;
  color: white;
  font-size: 14px;
  border-radius: 21px;
  font-weight: 900;
}

Because we are using the CSS position:absolute, you need to modify the df-card__main CSS in order to set it as relative:

.df-classic .df-card__main{
    position: relative;
}

And that's all! Easy right?

If you have some difficulties or questions regarding this integration, feel free to contact us at support@doofinder.com