In our TechNews Joomla! template release we included a new feature designed specifically to make TechNews a viable consumer review site template; the review score shortcode. This allowed users of the template to create blocks containing animated review scores, with subscores and an overall score.
The GK Rating Plugin
Since many sites can benefit from adding occasional reviews into their content, especially when a product particular to their niche is released, we have also released the GK Rating plugin for Joomla!, which gives Joomla! websites access to the same review score functionality seen in TechNews, with some additional features that make it more flexible.
Installing the Plugin
Installing the plugin is no different from any other Joomla! package. Head over to the Plugin Download Page; you’ll see that there is just one file in this section, plg/content/gkrating.zip, which contains the core Joomla 3-compatible plugin files. Download this file.
Next, we’ll need to run a normal install process; login to your Joomla! administrator area and click on Extensions → Manage to open the install page, then click on the Upload Package File tab. Now hit the Choose File button and select your newly-downloaded package, then click the Upload & Install button to start the installation; after a few seconds you’ll see a confirmation message that the package was installed.
There’s just one more step before you will be ready to start adding review score blocks to your content; we need to activate the plugin. To do so, click on Extensions → Plugins in your administrator panel main menu to be taken to the list of plugins:
You’ll find the GK Rating plugin in the list under "C", called Content – GK Rating. When you find this item you should notice that it currently has a red "X" next to its name, which means that the plugin is not active. Click on this red "X", and it will change to a green arrow; the plugin is now activated and ready to use.
The Available Plugin Options
The core options for the plugin once it is activated may be found in the new Rating (GavickPro) tab that appears in the Articles: Edit screen in the Joomla! Content Manager:
This allows you to modify the review scores that you want to display within each article, rather than creating the content separately from the editor. Let’s take a look at the available options:
- Show Overall Rate – This options enables/disables the “Overall” score, which is automatically calculated as an average of the subscores and added to the left of the scores block.
- Property – This field is where you can enter the label of a subscore category, such as “Design” or “Functionality”.
- Rating – Add the total score you want to give in the subscore category defined in the Property field here.
- Add – The add button is used to add a subscore to the review score block once you’ve defined the label and score in the Property and Rating fields.
As subscore categories are added they will appear in a list under the Rating field; you can delete any existing property by clicking the Remove text next to its name, and change the order that the subscores will appear in using drag & drop.
Adding a Review Block to an article
Once the subcategories and scores have been set you may insert the scores block anywhere in your article content using the following shortcode:
{rating}
This will automatically generate the block according to the options; bear in mind that each article can have its own particular review score settings, so you’ll need to add the subcategory fields and scores whenever you wish to insert a block into a new article.
Additional Plugin Options
There are two additional options available for more advanced users, available in the plugin configuration which can be reached by clicking on Extensions → Plugins in the Joomla admin menu, then click on Content – GK Rating in the list of plugins to open the configuration menu. The two options in this section are:
- Use progressbar.js library – progressbar.js is the JavaScript library used in the GK Rating plugin to create the animated circular borders around each score/subscore. When disabled the borders are removed, allowing for your own border to be defined in the CSS/scripting if needed.
- Load Default CSS – This option sets whether the default CSS for the plugin should be loaded; if this option is set to off the review scores will not be resized and styled, making them unusable, but you will be able to add your own custom CSS so that you may style the elements to match your site branding.