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

Then build the html with the next structure.

<span>MySite.com Score</span>

<span>Awesome</span>

</li>

<span>Critic Score</span>

<span>32 review</span>

</li>

<span>User Score</span>

<span>32 review</span>

</li>

<span>User Score</span>

<span>please slide to rate</span>

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

and finally

$(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:

[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">

<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;">