Want to learn how to implement a jQuery plugin as a module in Jahia? First, we’ll add the same module twice in a page but passing different parameters to each module to change the appearance of both. Then we’ll implement AJAX in one module. Let’s imagine we are building a site in Jahia to sell products. The common things we find in a product page are product images, product descriptions, advertisements, etc.  For our product page we are adding a rating module that will allow us to show our score of the product, scores from another source (e.g. Other Web Site or Magazine) and let users rate the product and show their score too.We built a jQuery plugin that will allow us to display rating results. Plus letting the website visitor to rate the product in a simple way.In the image below we see how the plugin can show information, and how it lets the user rate the product using the slider. It is simple to show the rating module like in the second example.

To make the plugin work you need the following:

Include jQuery, uirateit plugin js and its css file.

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="uirateit.js"></script>

<link rel="stylesheet" type="text/css" href="uirateit.css" />

Then build the html with the next structure.

<div class="ratemodule" style="width:300px; height:133px; ">

<ul class="score">

<li class="bigscore">

<span>MySite.com Score</span>

<span>8.5</span>

<span>Awesome</span>

</li>

<li class="smallscore">

<span>8</span>

<span>Critic Score</span>

<span>32 review</span>

</li>

<li class="smallscore">

<span>8.5</span>

<span>User Score</span>

<span>32 review</span>

</li>

<li class="yourscore">

<span>NA</span>

<span>User Score</span>

<span>please slide to rate</span>

and finally

<script type="text/javascript">

$(document).ready(function({barwidth: 191}){

$('. ratemodule ').uirateit();

});

</script>

Now we’ll implement the same plugin as a module in Jahia, so Content Editors can add the module to product pages customizing the view with different parameters.

In your definitions.cnd file add the next lines:

<ajax = 'oshyn.com/jahia/ajax/nt/1.0'>

[name_of_templates:rateModule] > jnt:container

    smallText siteMessage

    smallText siteRate

    smallText firstHeadline

    smallText firstMessage

    smallText firstRate

    smallText secondHeadline

    smallText secondMessage

    smallText secondRate

    smallText userHeadline

    smallText userMessage

    smallText moduleWidth

    smallText webSiteName

    smallText nameClass

[name_of_templates:moduleBox] > jnt:box

      containerList rateModuleList (ajax:rateModule)

[name_of_templates:home] > jnt:page

      containerList columnBox (jnt:box[availableTypes="jnt:IframeBox,ajax:moduleBox"])

[name_of_templates:rateModule] > jnt:container will[km1]  be our new module that inherits from container. We declare all the fields that the editor would be able to modify in the template.

After that we add the module container to our template

<template:boxList name="columnBox" id="columnBox" actionMenuNamePostFix="boxes" actionMenuNameLabelKey="boxes">

Finally we must create a display for our module following the Jahia naming convention.

Create a file under common/box/display/moduleBoxDisplay.jsp with next code.

<template:containerList name="rateModuleList" id="rates" actionMenuNamePostFix="rates" actionMenuNameLabelKey="rates">

<template:container id="rateModule" cache="off" actionMenuNamePostFix="rate" actionMenuNameLabelKey="rate.update">

<div class='<template:field name="nameClass"/>' style="width:300px; height:133px; position:relative; font-family:Arial, Helvetica, sans-serif;margin-bottom:20px;">

<ul class="score">

<li class="bigscore">

<span><template:field name="webSiteName"/></span>

<span><template:field name="siteRate"/></span>

<span><template:field name="siteMessage"/></span>

</li>

<li class="smallscore">

<span><template:field name="firstRate"/></span>

<span><template:field name="firstHeadline"/></span>

<span><template:field name="firstMessage"/></span>

</li>

<li class="smallscore">

<span><template:field name="secondRate"/></span>

<span><template:field name="secondHeadline"/></span>

<span><template:field name="secondMessage"/></span>

</li>

<li class="yourscore">

<span>NA</span>

<span><template:field name="userHeadline"/></span>

<span><template:field name="userMessage"/></span>

</li>

</ul>

</div>

 $(document).ready(function(){

$('.').uirateit({

barwidth: <template:field name="moduleWidth"/>

}, function(){

});

</script>

As soon as you deploy the templates on Jahia, you will be able to add the new module.

and have something like this on your site: