InterDash Blogs

Sharing experience

Adding a javascript plug-in

There are many great javascript plug-ins and adding one to a Kooboo site is quite simple. In this example we are going to add the Jquery Star Rating Plug-in.

The package includes

Jquery is installed by default on Kooboo so we don’t need the jquery support files. You will need to copy the plug-in jquery.rating.js (or jquery.rating.pack.js), the two images delete.gif and star.gif, and the jquery.rating.css file into your Kooboo site.


Open Development -> Scripts and Upload the plug-in javascript.


Open Development -> Theme / Files and Upload the jquery.rating.css file.

Now create a ‘Files’ directory and copy the two .gif files into that directory. NOTE: In order to determine where the files resided I had to look inside the .css file where I could see the image files were expected to be in a sub-directory named Files. The css file directory is the reference directory used when resolving a relative link so Files/<image>.gif requires the two images be installed in that subdirectory.


That is it, you have installed the plug-in. Settings for the plug-in are demonstrated at the plug-in website if you are interested in finding out more.


Star Rating in comments list

In a prior post I explored adding an element to the Articles Comments.


The javascript star rating uses a series of radio buttons to create a nice star rating control. The radio button that represents the selected value must be checked. I want stars for 1-5 so I use a loop and here is a screenshot of the code. NOTE: I worked a little on the layout as well so I included the entire items div.


Star Rating on Comment



Seeing a single Star Rating control blown out for accepting input helps understand the Star plug-in. Below I demonstrate how value and title are used to setup a 5 star input control.


Adding to the ContentType

We need to provide a place to store the rating so access the Comment ContentType and add the field for Rating.



Navigate to the Articles Page, select an Article, add a comment with a rating, and see that it appears in the Detail.



In this post we added a javascript plug-in to our Website and allow Comments to be rated. By simply adding an existing javascript plug-in this is now a rating system. Think of Articles as Products and the Comments as Reviews. The underlying pattern doesn’t change. The names should be changed to make it easier to understand from the backside but you could run with it as is with a few label changes.

Updated: January 16, 2014 — 2:28 am

Leave a Reply

Your email address will not be published. Required fields are marked *

InterDash Blogs © 2014 Frontier Theme