Adding availability status in Doofinder layer

or send an email to support@doofinder.com

How to add availability status into the Doofinder layer

Integrating the availability status into the Doofinder layer is quite simple and will let your customers know at first sight while searching if you have the product in stock or out of stock.

Here we will explain how to integrate a green/red dot depending on the availability status of your products.

How?

First of all, you need to have the availability status in your product data feed : In stock / Out of stock; 1 / 0; true / false…

As you may already know, to modify the information displayed in the Doofinder layer, we will need to use the mustache results template:

This should look like this:

<script type="text/x-mustache-template" id="df-my-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}}">
        {{#image_link}}
          <figure class="df-card__image">
            <img src="{{#remove-protocol}}{{image_link}}{{/remove-protocol}}" 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>

When you define a custom template, as in this case, you need to instance it from your doofinder script, both for desktop and mobile, as follows:

"display": {
  "results": {
    "template": document.getElementById('df-my-template').innerHTML
  }
}

Here we need to add the availability status into this template to display the information within the Doofinder layer.

In this case we will display it next to the price:

{{#price}}
  <div class="df-card__pricing">
    <span class="df-card__availability {{availability}}">{{availability}}</span>
    <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}}

In our example, the availability status is defined in the field “availability” and is set as the following:

  • in stock: available products
  • out of stock: unavailable products

This depends on the information you have in your product data feed and can vary from one ecommerce to another. Just adapt the following format to your situation.

Now you should have the following result:

availability text

Finally, we will transform the text into a green or red dot, depending on the availability status. To do so, you only need to add these rules to your stylesheet:

<style type="text/css">

.df-card__availability{
  border-radius:100%;
  display:inline-block;
  text-indent:-10000px;
  width:13px;
  height:13px;
  vertical-align:middle
}
.df-card__availability.in.stock {
    background: lime;
}
.df-card__availability.out.of.stock {
      background: red;
}

</style>

If everything went well, this is what you should have:

availability dots