Intégration de javascript dans le CMS

De Wiki.

(Redirigé depuis Intégration)


Le CMS intègre de manière automatique dans tous projets la bibliothèque jQuery (jquery-1.4.2.min.js) ainsi que le plugin Fancybox (jquery.fancybox-1.3.1.pack.js).

Ceci implique qu’il ne faut pas avoir l’appel à ces javascripts ailleurs dans le code de l’application car ceci entrainerait des erreurs javascript du type «$object is not a function». Ceci indique un conflit entre les différents javascipt. L’appel d’une autre version également va entrainer des erreurs.

Dans le cadre de la fancybox vous avez 2 solutions pour faire l’appel au plugin fancybox :

1er cas : votre popup est présente sur l’ensemble des pages du site :

Vous pouvez mettre le code d’appel au niveau du fichier fojsutils.js :

Ex :

$(document).ready(function() {
//Appel de la box conditions générales de vente / mentions légales...
$("a[rel^='cgv']").fancybox({
'width': 600,
'height': 450,
'scrolling': 'auto',		
'autoDimensions': false,
'showNavArrows': false,
'type': 'iframe'
});	
});

2nd cas : votre popup est spécifique à une page :

Mettre le code d’appel directement dans le code de la page ou des pages concernées. Si vous le mettez dans le fojsutils.js il ya aura une erreur au niveau des pages qui ne possèdent pas dans leur code l’objet que vous souhaitez faire apparaitre ou sur lequel vous souhaitez lier l’action d’apparition de la popup.


Intégration d’un diaporama :

Il existe de nombreux scripts pour réaliser un diaporama. Ici nous allons prendre le plugin cycle basé sur jQuery.

Pour ajouter le js propre au plugin (jquery.cycle.all.min.js) nous avons 2 options :

1er cas : ajout via le BO dans la partie fonction admin de l’entrée Menu Backoffice -> JSscripts.

2nd cas : ajout directement dans le code de la page ou nous avons le diaporama.

Ex : <script type="text/javascript" src="/backoffice/cms/js/ jquery.cycle.all.min.js">


Ensuite vous pouvez mettre votre code d’appel spécifique au diaporama soit directement dans le code de la page soit dans le fichier fojsutils.js.

Ex :

$(document).ready(function() {
// Fonction pour le diaporama
$('.diaporama').cycle({
fx: 'fade',
random:  1,
speed: 4000
});	
});


En résumé il faut faire attention à faire en sorte que l’appel aux différentes bibliothèques et plugin que l’on souhaite utiliser soient appelés de manière unique dans le site afin d’éviter les conflits. Il faut prendre en compte que le BO intègre déjà la bibliothèque Jquery et le plugin Fancybox.

Ensuite l’ajout de js peut se faire spécifiquement pour certaines pages ou l’ensemble des pages du site via le BO dans la partie fonction admin de l’entrée Menu Backoffice -> JSscripts.

Et nous avons plusieurs solutions pour ajouter le code spécifique à chaque évènement (appel popup , diaporama…) :

- soit dans fojsutils.js

- soit dans le code directement.


Ressources et exemple de plugin :

Bibliothèque jQuery : http://api.jquery.com/ --- http://api.jquery.com/jQuery.noConflict/

Plugin Fancybox : http://fancybox.net/

Plugin Cycle : http://jquery.malsup.com/cycle/

Plugin coin slider (pour faire un diaporama) : http://workshop.rs/projects/coin-slider/