Booting products ratings JS

jquery.ratings.js

(function () {
  var RATINGS_URL = 'http://bootic-ratings-service.herokuapp.com';
/* Rate something
     Arguments:

       `account_key`: account key for this site
       `rating`: 1-5 rating for a given item
       `uid`: unique identifier for an item, possibly a URL
       `fn`: success callback

    Example:

      $.rate('some account key', 'some UID', 4)
  ------------------------------------------------*/
  $.rate = function (account_key, uid, rating, fn) {
    fn = fn || $.noop
    $.ajax({
      type: 'POST',
      url: [RATINGS_URL, account_key, 'ratings'].join('/'),
      data: {
        rating: rating,
        uid: uid
      },
      success: fn,
      dataType: 'json'
    });
  }
  /* Get ratings for all elements
     Arguments:
     
       `account_key`: account key for this site
       `fn`: callback to be executed for each matching element
     
     Example:
     
       var account_key = 'abc123';
       $('[data-rating]').ratings(account_key, function (rating) {
         $(this).addClass("stars_" + rating.rating") // "stars_1", "stars_2", etc.
       })
    ----------------------------------------*/
  $.fn.ratings = function (account_key, fn) {
    // Gather UIDs for all elements in the page with data-rating attribute
    var uids = $.map($(this), function (e) {
      return $(e).data('rating')
    })
  
    // Get ratings for all UIDs from ratings API
    $.getJSON([RATINGS_URL, account_key, 'ratings'].join('/'),{uids:uids.join(',')}, function (ratings) {
    $.each(ratings, function (i, rating) {
      // Find the DOM element for this rating
      var element = $('[data-rating="' + rating.uid + '"]');
      // Execute user callback in the context of the element, passing rating object.
      fn.call(element, rating)
    })
  })
  }
})(jQuery)

products.html

<style>
.stars {
  background: url(stars.png) left top no-repeat
}
.stars_2 .stars { background-position: left -20px; }
.stars_3 .stars { background-position: left -40px; }
.stars_4 .stars { background-position: left -60px; }
.stars_5 .stars { background-position: left -80px; }
</style>

{% for product in products %}
<div class="product" data-rating="{{ product.url }}">
  <h2><a href="{{ product.url }}">{{ product.title }}</a></h2>
  ...
  <div class="stars">

  </div>
</div>
{% endfor %}

Ratings-api.mkd

Crear rating

Request

POST /:account_key/ratings

{"uid": "http://site.bootic.net/products/foobar", "rating": 4}

(También puede ser GET con JSONp)

Response

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8

Buscar ratings para varios items

Request

GET /:account_key/ratings

{
  "uids": [
    "http://site.bootic.net/products/foobar",
    "http://site.bootic.net/products/barfoo",
    "http://site.bootic.net/products/ipod"
  ]
}

Response

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8

[
  {"uid": "http://site.bootic.net/products/foobar", "rating": 3, "ratings_count":3},
  {"uid": "http://site.bootic.net/products/barfoo", "rating": 4, "ratings_count":20},
  {"uid": "http://site.bootic.net/products/ipod", "rating": 5, "ratings_count":4}
]