Mettre une version plus récente de jquery

[Hedrad]

Bonjour,

Prestashop tourne actuellement avec la version 1.2.6. de jquery.

J'aurais besoin, pour le développement d'un module, d'utiliser une version supérieure de jquery.

La question que je me pose est : est-ce-que cela aura des conséquences sur le fonctionnement global de Prestashop ?
Je suppose, mais je voudrais une confirmation avant de faire des bêtises, que les versions supérieures de jquery gère les fonctionnalités des versions précedentes... Peut-être que le jquery utilisé par Prestashop a été modifié... Si quelqu'un a quelques suggestions a me donner !

[VinzFDC]

Bonjour,

J'ai moi même rencontré le même problème, j'avais besoin de la dernière version de jQuery (1.3.2) pour faire tourner un plugin correctement.

J'ai procédé à la mise à jour avec succès mais non sans déboires. J'ai testé la majorité de la boutique et tout semble fonctionner correctement.

Je vais prendre le temps de faire un petit tuto pour ceux qui désireraient updater leur version de jQuery.
J'utilise Prestashop 1.2.5
(Update : cette méthode n'est pas encore très au point, et il est nécessaire de conserver la version de jQuery originale pour un bon fonctionnement du back-office. Personnellement je continue d'employer cette méthode mais je languis une mise à jour sur les prochaines version de Prestashop :-) )

1 - Effectuer une sauvegarde complète de votre boutique : dupliquer le dossier et sauvegadez votre base de données (on ne touche pas à la base mais sauvegadez-là au cas où)

2 - Télécharger la version de jQuery qui vous intéresse sur le site officiel : http://docs.jquery.com/Downloading_jQuery
Ici, jquery.min.1.3.2.js
copiez le fichier dans /votreboutique/js/jquery/
et supprimer l'ancienne version de jQuery : jquery-1.2.6.pack.js

Télécharger également jQuery UI Effects 1.7.2 ici : (on verra pourquoi plus tard)
http://ui.jquery.com/latest/ui/effects.core.js
Puis copiez le fichier dans /votreboutique/js/jquery/

Puis jQuery UI Effects Transfer 1.7.2 : (on verra pourquoi plus tard)
http://jquery-ui.googlecode.com/svn/tags/latest/ui/effects.transfer.js
Puis copiez le fichier dans /votreboutique/js/jquery/

3 - Allez dans votre theme (votreboutique/themes/votretheme/) et ouvrez : header.tpl

ligne 28 : trouver :
{$content_dir}js/jquery/jquery-1.2.6.pack.js

et remplacer par :
{$content_dir}js/jquery/jquery-1.3.2.min.js

En dessous ajouter dans des balises SCRIPT les 2 autres fichiers téléchargés
{$content_dir}js/jquery/effects.core.js
{$content_dir}js/jquery/effects.transfer.js

4 - Dans votre dossier jQuery, vous allez supprimer les fichiers suivants :
ifxtransfer.js
iutil.prestashop-modifications.js

De même, allez dans votreboutique/module/blockcart/blockcart.tpl et supprimez les deux balises qui chargent ces fichiers.

Ces deux fichiers s'occupent de l'effet de transfert lorsque vous ajoutez un produit au panier (add to cart). Nous allons le remplacer par jQuery UI Effects Transfer qui est compatible avec la derniere version de jQuery.

5 - Allez dans : votreboutique/module/blockcart/ajax-cart.js

ligne 176 (environ), trouvez :

elementToTransfert.TransferTo({
                           to: $('#cart_block').get(0),
                           className:'transferProduct',
                           duration: 1000,
                           complete: function () {
                               ajaxCart.updateCart(jsonData);
                               //reactive the button when adding has finished
                               if (addedFromProductPage)
                                   $('body#product p#add_to_cart input').removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
                               else
                                   $('.ajax_add_to_cart_button').removeAttr('disabled');
                           }
               });

et remplacez par :

elementToTransfert.effect("transfer", {
                           to: $('#cart_block').get(0)
                           }, 1000, function () {
                               ajaxCart.updateCart(jsonData);
                               //reactive the button when adding has finished
                               if (addedFromProductPage)
                                   $('body#product p#add_to_cart input').removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
                               else
                                   $('.ajax_add_to_cart_button').removeAttr('disabled');
               });

6 - Ajouter cette classe dans votre CSS pour que l'effet soit visible :
.ui-effects-transfer { border: 2px solid black; }

7 - Profitez en pour mettre à jour idTabs et remplacer Thickbox par une version plus récente ou plus sympa (fancybox par exemple).

8 - Allez sur votre site et testez toutes les pages pour vérifiez que tout fonctionne correctement.

J'espère que ceci aura pu vous être utile, surtout n'hésitez pas à poster si vous avez des problèmes suite aux différentes manips.

VinZ
celavi.fr

P-S : j'ai fait ce post rapidement donc je ne peux pas vous garantir que tout va marcher comme sur des roulettes.
P-S 2 : Thanks to pixemedia that help me to update successfully with his precedent post on the English Forum.

[Hedrad]

Super merci ! Finalement, j'avais bidouillé le plugin qui me posait problème pour le rendre compatible avec la version 1.2.6 de jquery...

Question pour l'équipe Prestashop : ne serait-ce pas une mise à jour intéressante ? car la plupart des nouveaux plugins tournent avec ces nouvelles versions de jquery et jquery UI... Et la version 1.3.x est compatible avec les plugins utilisant la version 1.2.6. ce qui devrait donc ne pas empêcher de fonctionner tous les modules actuels.

[VinzFDC]

Bonne question. Ca m'étonne d'ailleurs que prestashop tourne encore avec cette version...
En tous cas, ce CMS est une vraie tuerie !

[VinzFDC]

Pour ceux qui ont, ou qui veulent utiliser ma méthode pour mettre à jour jQuery, n'oubliez pas de modifier le chemin du fichier dans :

votreboutique/admin/header.inc.php

ligne 35
Remplacer le chemin de l'ancien fichier dans la balise SCRIPT par le bon :
jquery/jquery-1.3.2.min.js

[Hedrad]

J'ai mis à jour la version de jquery, mais en procédant un peu différemment.
- Je n'ai pas supprimé le jquery-1.2.6.pack.js
- J'ai installé jquery-1.3.2.min.js effects.core.js et effects.transfer.js dans le dossier js du theme.
- J'ai correctement modifié le header.tpl

Ceci permet, je pense, de ne pas avoir, plus tard, de problème lors d'une éventuelle mise à jour de Prestashop.
Je n'ai pas modifié "votreboutique/admin/header.inc.php" qui gère, il me semble, le back-office. Ainsi, le back-office tourne avec la version 1.2 de jquery (pas bien génant...) et le front-office avec la version 1.3.2. Le tout sans souci d'incompatibilité avec une future mise à jour.


Par contre, j'ai quelques soucis avec la mise à jour du panier...
Les scripts "ifxtransfer.js" et "iutil.prestashop-modifications.js" sont toujours appelés dans "blockcart.tpl", alors que l'on doit, avec ta méthode, les supprimer au préalable. Il faudrait, par souci de clarté les dégager de ce tpl.

Les scripts "effects.core.js" et "effects.transfer.js" sont lancés dans le "header.tpl". Je les ai laissé là. Mais s'ils ne servent qu'au bloc panier, il est possible de les placer dans "blockcart.tpl", là où il y avait le lancement des scripts précédemment supprimé...

Donc, en respectant les manips du second message de ce post, mon panier ne se met plus à jour dynamiquement et il n'y a aucun effet... Une idée ?

[VinzFDC]

Salut hedrad,

Je fais une réponse rapide mais je vais éditer mon premier post pour mettre à jour mes oublis.

Premièrement tu as raison de ne pas toucher à header.inc.php, parce qu'il semble que certaines choses ne fonctionnent pas dans le back office avec la dernière version de jQuery (notamment l'édition des déclinaisons produits). Il serait vraiment idéal d'avoir la mis à jour sur les prochaines version de Prestashop. IL FAUT DONC CONSERVER LA VERSION ORIGINALE DE jQUERY POUR L'ADMIN.

Ensuite, concernant le fichier "blockcart.tpl" (modules/blockcart/) tu as tout à fait raison, il faut supprimer les 2 balises SCRIPT, puisque ces fichiers ne nous intéressent plus.

Dernière chose (que j'avais complètement oublié), tu dois mettre une classe dans ton CSS :

.ui-effects-transfer { border: 2px solid black; }

... pour que ton effet fonctionne.

Sinon, pour aller un peu plus loin, tu peux faire passer l'image du produit directement en background de la DIV qui gère l'effet de transfert. Voici le code à mettre dans "effects.transfer.js" pour que ça fonctionne :

/*
* jQuery UI Effects Transfer 1.7.2
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Effects/Transfer
*
* Depends:
*    effects.core.js
*
* MODIFIED FOR PRESTASHOP (by VinZ)
* to add product image in transfer effect
*/
(function($) {
$.effects.transfer = function(o) {
// find the product image 
var imgSrc = $('#image-block').find('img').attr('src');

   return this.queue(function() {
       var elem = $(this),
           target = $(o.options.to),
           endPosition = target.offset(),
           animation = {
               top: endPosition.top,
               left: endPosition.left,
               height: target.innerHeight(),
               width: target.innerWidth(),
               opacity: 0
           },
           startPosition = elem.offset(),

           // add product image in the transfer effect
           transfer = $("")
               .appendTo(document.body)
               .addClass(o.options.className)
               .css({
                   top: startPosition.top,
                   left: startPosition.left,
                   height: elem.innerHeight(),
                   width: elem.innerWidth(),
                   position: 'absolute'
               })
               .animate(animation, o.duration, o.options.easing, function() {
                   transfer.remove();
                   (o.callback && o.callback.apply(elem[0], arguments));
                   elem.dequeue();
               });
   });
};

})(jQuery);

P-S : cette astuce ne fonctionne qu'avec l'ajout panier de la page produit
P-S2 : pour ajouter l'effet à tous les boutons "ajout panier" il faudrait que chaque image produit soit dans un div avec une id spécifique à chaque produit : (ex :

) et s'arranger ensuite pour que l'effet s'applique pour chaque DIV (si j'ai du temps je ferai peut être un post là dessus ... un jour)

[Hedrad]

Salut,

La petite ligne dans le css change tout... Ca fonctionne. Il faut cependant bien supprimer l'appel des 2 scripts dans “blockcart.tpl” sans quoi il y a quelques soucis...

Enfin, ca marche partout... sauf à un endroit ! Sur les fiches produit, le fait de cliquer sur le bouton "ajouter au panier" ne fait aucun effet et lance la page "order.php" (on accède facilement à cette page en cliquant sur le bouton "panier" du bloc panier). Le fait de supprimer un article du panier sur la page produit fait la même chose, la petite flèche du bloc panier qui permet de le réduire/agrandir ne fonctionne pas non plus... En fait, l'ajax d'une manière générale ne marche pas sur la page produit...

Quelqu'un a une idée ?

[VinzFDC]

Salut,

Perso, je n'ai pas eu de problème de ce genre, seulement je bosse sur une version 1.2.5 bricolée par mes soins.

Ce que je sais c'est que chez moi (en local), j'ai viré les fichiers thickbox.js et idTabs.js... Or ces deux mêmes fichiers sont spécifiquement chargé dans product.php (voir plus bas) pour la fiche produit...

Les deux n'étant pas récent, essaye de supprimer leur chemin et test à nouveau, voir si ce n'est pas ça qui pose problème ...

Sinon, si tu n'as pas mieux j'essaierai de refaire la MAJ de jQuery vers 1.3.2 à partir d'une version originale de Prestashop, voir si je n'ai pas oublié un détail.

++

product.php :

$js_files = array(
   __PS_BASE_URI__.'js/jquery/thickbox-modified.js',
   __PS_BASE_URI__.'js/jquery/jquery.idTabs.modified.js',
   __PS_BASE_URI__.'js/jquery/jquery.scrollto.js',
   __PS_BASE_URI__.'js/jquery/jquery.serialScroll.js',
   _THEME_JS_DIR_.'tools.js',
   _THEME_JS_DIR_.'product.js'
);

[Hedrad]

Salut,

J'ai refait un test depuis le départ...

- Configuration : Windows Vista / XAMPP

- Création d'une boutique nommée "boutique" avec Prestashop 1.2.5.0 finale
Ajax sur la page d'accueil : ok
Ajax sur une page produit : ok

- Copie de "jquery-1.3.2.min.js", "effects.core.js" et "effects.transfer.js" dans /boutique/js/jquery

- Dans "header.tpl", remplacement de la ligne "type="text/javascript" src="{$content_dir}js/jquery/jquery-1.2.6.pack.js" (+ balises script) par "type="text/javascript" src="{$content_dir}js/jquery/jquery-1.3.2.min.js" (+ balises script)
Ajax sur la page d'accueil : pas ok
Ajax sur une page produit : pas ok

- Dans "header.tpl", rajout sour la ligne précédemment citée de :
"type="text/javascript" src={$content_dir}js/jquery/effects.core.js" (+ balises script)
"type="text/javascript" src={$content_dir}js/jquery/effects.transfer.js" (+ balises script)
Ajax sur la page d'accueil : pas ok
Ajax sur une page produit : pas ok

- Dans "modules/blockcart/blockcart.tpl",
suppression de la ligne 6 : "type="text/javascript" src="{$content_dir}js/jquery/iutil.prestashop-modifications.js" (+ balises script)
suppression de la ligne 8 : "type="text/javascript" src="{$content_dir}js/jquery/ifxtransfer.js" (+ balises script)
Ajax sur la page d'accueil : ok mais pas d'effet de transfert
Ajax sur une page produit : pas ok

- Dans "module/blockcart/ajax-cart.js", remplacement de quelques lignes comme expliqué dans le premier post.
Ajax sur la page d'accueil : ok mais pas d'effet de transfert
Ajax sur une page produit : pas ok

- Dans "themes/prestashop/css/global.css", rajout tout en bas de ".ui-effects-transfer { border: 2px solid black; }"
Ajax sur la page d'accueil : ok
Ajax sur une page produit : pas ok

- Dans "product.php", suppression des lignes 85 à 88 :
__PS_BASE_URI__.'js/jquery/thickbox-modified.js',
__PS_BASE_URI__.'js/jquery/jquery.idTabs.modified.js',
__PS_BASE_URI__.'js/jquery/jquery.scrollto.js',
__PS_BASE_URI__.'js/jquery/jquery.serialScroll.js',
Ajax sur la page d'accueil : ok
Ajax sur une page produit : pas ok

Il doit donc manquer un petit truc quelque part...

[Hedrad]

Double post... Désolé...

Quand je désactive "product.js" de "product.php", l'ajax refonctionne sur la page produit...

Pas moyen de trouver ce qui cloche dans ce script par contre...

[aDy]

Message à l'équipe Prestashop :

Qu'en-est-il au niveau de la mise à jour de jQuery ? Est-ce prévu pour la prochaine version ?

[__fabrice]

salut,


J'ai testé le passage en jquery 1.3.2, j'ai fait le tuto décrit tot en haut de ce post, mais j'ai cette erreur :

Node cannot be inserted at the specified point in the hierarchy" code: "3

Fabrice

[__fabrice]

A premiere vue, c'est un soucis dans mon plugin. Sinon, la manip de VinzFDC fonctionne

merci
a+

F.

[Hedrad]

Je confirme, j'avais désactivé serial et serialscroll.js. En les remettant, la manip fonctionne.

A noter, y'a la version 1.4 de jquery qui est sortie. Bien que le gain de performance soit remarquable ; la syntaxe ajax a changé. J'ai réussi à retirer les erreurs de parsing, mais pas à réactiver l'effet de transfert.

[volute]

Hello

Je viens d'intégrer une version 1.3.2 de jquery sur prestashop 125, suivant la méthode de VinZ, pas de soucis majeur chez moi, ça fonctionne très bien.

J'ai mis le ajax-cart.js en local dans le module du thème, afin que ces modifications de version n'impactent pas mes autres thèmes. ( -> changer le chemin dans blockcart.tpl)

A noter quand même qu'il semble y avoir une incompatibilité entre jquery 132 et jquery.idTabs.modified.js. Pour que ça tourne, j'ai dû remplacer ce jquery.idTabs.modified.js par la version 2.2 de idTabs, qui elle même semble compatible avec jquery 126. Donc on peut modifier le product.php (dans core) tout en restant compatible avec les thèmes utilisant jquery 126 ou jquery 132.

[Romain]

Je confirme, j'avais désactivé serial et serialscroll.js. En les remettant, la manip fonctionne.

A noter, y'a la version 1.4 de jquery qui est sortie. Bien que le gain de performance soit remarquable ; la syntaxe ajax a changé. J'ai réussi à retirer les erreurs de parsing, mais pas à réactiver l'effet de transfert.

je remonte ce thread car j'ai actuellement un soucis avec la nouvelle version de jquery, tout fonctionne grace aux indications de Vinz mais en revanche j'ai des erreurs de parsing tout comme toi hedrad, et je n'arrive pas a les debloquer, comment as tu fait ?
d'avance merci

[Hedrad]

Bonjour,

J'ai perdu les traces de mon panier sans erreur de parsing. C'est une histoire de syntaxe à modifier sur énormément de lignes mais je ne sais plus... Cela ne fonctionnait pas tout de même avec les déclinaisons. Je suis preneur si quelqu'un a la solution...

[Romain]

merci pour ta reponse hedrad, ça a pas l'air simple comme histoire ça ....

[Romain]

pour infos, j'ai trouve un article qui explique bien clairement le soucis de parsing et jquery 1.4 et json
http://www.eolians.fr/jquery/jquery-1-4-attention-incompatibilite-json.html

je me doutais que c'etait un truc comme ça mais je trouvais un article bien ecris. bon ben aller, en avant pour modifier tout ça ....

[Romain]

bon voila, ça marche, j'ai remplace dans le fichier blockcart.php

public function hookAjaxCall($params)
   {
       global $smarty;
       $this->smartyAssigns($smarty, $params);
       return $this->display(__FILE__, 'blockcart-json.tpl');
   }

par

public function hookAjaxCall($params)
   {
       global $smarty;
       $this->smartyAssigns($smarty, $params);
       return str_replace("'","\"",$this->display(__FILE__, 'blockcart-json.tpl'));
   }

[Hedrad]

Merci !

Je viens de tester avec Jquery 1.4.3, je n'ai pas aperçu de problème...

[Romain]

tu veux dire qu'avec jquery 1.4.3 tu n'avais pas les problemes de parsing ?

[Hedrad]

Non non... J'ai testé ta modification de blockcart.php, et avec jquery 1.4.3. (Je précisais la version de jquery car on parle surtout de la version 1.4.2 sur ce post... j'voulais éviter les confusions mais du coup j'en ai créé !)

Pour ceux qui passe de la jquery 1.3.2 à 1.4.x, pensais à mettre à jour également votre version de jquery ui...

[Romain]

ok, nickel alors

[mike031]

Bonjour, j'ai voulu mettre à jour mon Jquery notamment pour utiliser nivoslider sur prestashop mais en suivant scrupuleusement les indications bah j'ai plus rien qui marche, le site est complètement planté. Plus d'effet d'ajout au panier, plus de catégories, certains modules de fonctionnent plus (MGC carousel par exemple) etc...

Je ne comprends pas pourquoi, j'ai retourné le problème dans tout les sens, bien mis a jour jquery et jquery ui en 1.4.4 (la dernière), modifié le blockcart.php, j'ai relu plusieurs fois voire si j'avais manqué un truc mais rien à faire.

J'utilise prestashop 1.3.1.1 peu être que ca viens de la?

En tout cas ce serai bien que les développeurs fassent une MAJ, je vois beaucoup de plaintes des utilisateurs par rapport à ca mais personne ne se bouge du côté de presta et pendant ce temps nous bah on bricole sans trop maitriser...

Une idée pour mon problème?

PS : J'ai vu qu'il y avait une version de nivoslider qui fonctionne avec jquery 1.2.6 mais moins fluide, fait un peu ramer le site et moins d'effets..

[Hedrad]

Bonjour,

Certains modules, comme le blockcart (panier), ne sont peut-être pas adapté à la nouvelle version de jquery. C'est peut-être le cas de MGC Carousel.
Pour ma part, j'ai remarqué que le module de livraison de TNT (pas celui de prestashop que je n'ai pas utilisé mais les scripts fournis par TNT) ne fonctionne qu'avec la version 1.26 (bug sinon dans le choix des villes pour le mode relais).

Pour ma part, j'utilise une version 1.3 de prestashop également et cela fonctionne (si ce n'est que je remet la version 1.2.6 sur le passage "order" à cause de TNT).

As-tu bien verifié le chemin de tes scripts ?
As-tu mis en "false" dans smarty.config.inc la variable "$smarty->force_compile" pour qu'il remette à jour le cache de tes fichier tpl ?
Bonne chance...

[mike031]

Oui au niveau du chemin j'ai choisi de faire comme toi et de les mettre dans le theme (est-ce que le nom du fichier effect a une importance?) et de mettre les effets directement dans le blockcart. J'ai avancé un peu car j'avais un module qui chargeait un autre jquery et faisait conflit (moving boxes dont je ne me sert plus).

Apres l'avoir supprimé le carousel remarche a nouveau, ainsi que le menu lavalamp et les catégories.
Par contre le panier ne marche toujours pas, la lightbox non plus (j'ai mis un nouveau module pour ca également et qui utilise jquery...) j'ai le module m4flip qui fonctionne à moitié etc... Egalement tant que j'y pense, le module "dans la meme catégorie" qui doit poser problème car j'ai plus rien à nouveau quand je vais dans une ficher produit.

C'est vraiment compliqué tout ca, je crois que l'on arrivera jamais à rien parce que à chaque nouveau module il faudra se retordre la tête si jamais y'a du jquery, tout simplement parce que ceux qui développent font avec l'existant, soit jquery 1.2.6...

Edit : Oui j'ai changé la variable smarty
Edit2 : Je pense avoir trouvé ce qui cloche sur les fiches produits, jquery.idTabs.modified.js qui faudra peu être mettre à jour comme l'a dis Vinc, met je ne sais pas ou le trouver.

[Hedrad]

idtabs : http://www.sunsean.com/idTabs/
Pour ma part, je n'utilise plus ce script...

Vu que tu charges maintenant jquery ui, regarde de près, cette bibliothèque permet pas mal d'effets sympa. Il faut changer la thickbox par autre chose aussi, là, y'a que l'embarras du choix avec un peu de recherche (les fichiers de thickbox sont chargés dans product.php pour les fiches produits.

[mike031]

Bon je l'ai mis à jour mais ca ne viens pas de là apparemment, pourtant en désactivant les modules qui l'utilisent ca fonctionne bien (enfin le l'effet d'ajout au panier).

Oui la thickbox je l'avais changé, j'ai trouvé un module lightbox qui utilise jquery, mais évidemment, ca marche plus avec la dernière version 1.4.4.

Je crois que je vais laisser tomber tout ca, retourner sur la version de prestashop de base de jquery, et essayer d'adapter le module nivoslider (qui au passage ne fonctionne toujours pas même avec la dernière version de jquery...) à cette version. Non parce que sinon à chaque module qui utilisera jquery, ca va être tout une histoire pour réadapter a cette version là. Je pense qu'il vaut mieux adapter les modules à l'existant (jquery) plutôt que l'inverse.

Merci quand même de ton aide.

[chettbi]

Hello!

Je viens de suivre ce tuto pour mettre à jour la version de jQuery et donc pour passer à la 1.5 (avec prestashop 1.3.5).
Alors pour tous ceux qui souhaitent passez à jQuery 1.4.1 et supérieur, il vous faudra modifier le fichier /modules/blockcart/blockcart-json.tpl.
La raison, le JSON générer n'est pas valide et depuis cette version, le parseur JSON de jQuery est plus pointilleux.
Donc il faut changer tous les ' en ", sauf ceux des instructions smarty.

Pour plus d'info :
Notre cher Wikipédia : http://en.wikipedia.org/wiki/JSON
Le parseur JSON de jQuery : http://api.jquery.com/jQuery.parseJSON/
Un validateur de JSON : http://www.jsonlint.com/


Bien sûr, si vous n'utilisez pas le blockcart, ces modifications ne sont pas nécessaires, mais c'est toujours mieux au cas où un jour vous changiez d'avis.


Bonne soirée

edit : je n'avais pas lu tous les posts (pas bien ) donc je n'avais pas vu que vous aviez déjà soulevé le problème et résolu celui-ci