Web 2.0 and Jahia: Using jQuery in Jahia

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 Website 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>

</li>
</ul>
</div>

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 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”*>
<template:container id=*”moduleBox”* actionMenuNamePostFix=*”box”* actionMenuNameLabelKey=*”box.update”* cache=*”false”* >
<template:box displayTitle=*”true”* id=*”columnBox”* onError=“${jahia.requestInfo.normalMode ? ‘hide’ : ‘default’}”/>
</template:container>
</template:boxList>

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>

<script type=*”text/javascript”*>
 $(document).ready(**function**(){
$(‘.’).uirateit({
barwidth: ~<~template:~field~ name=“moduleWidth”/~>~
}~,~ **function**(){
});

});
</script>
</template:container>

</template:containerList>

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: