[ CONTRIBUTION ] Rollover image sur le listing des produits

[nobock]

Une petite fonction que j'aurai bien aimer que prestashop possède par défaut, c'est un rollover sur les image dans le listing des produits. Pour l'instant je vous propose une contribution temporaire pour ajouter cette fonction à votre boutique.

Rendez vous sur le fichier prestashop/product-list.tpl et identifiez la balise de l'image, qui ce trouve à la ligne 7

getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />

Ajoutez :

 {assign var="image_rollover" value=$product.id_product|intval} {assign var="image_rollover" value="img/rollover/$image_rollover.jpg"} {if file_exists($image_rollover)} onmouseout="this.src='{$img_prod_dir}{$product.id_image}-home.jpg';" onmouseover="this.src='{$image_rollover}';"{/if}

Juste avant :

/>

Puis créer un dossier rollover dans le dossier img de votre prestashop. Récupérez l'identifiant de votre produits, pour ajouter un jpg correspondant à l'id de votre produit.

Si votre fichier possède l'id 42, alors uploader le fichier 42.jpg dans le dossier img/rollover.

J'en ferai une intégration complète au backoffice prochainement. Pour une installation fraiche de prestashop avec le template prestashop, la taille des images est de 129*129 pixels, ce qui correspond à la taille home.

[gh0st333]

Bonjour,
et merci de partager ce bout de code, c'est, je pense, ce que je cherchais.
J'ai donc essayé mais il n'y a rien qui change. Est ce bien adapté pour les produits phares en page d'accueil par exemple? ou les nouveaux produits en page d'accueil. J'ai une image qui s'intitule 1-50-home.jpg et qui se trouve dans le dossier img>p, j'ai donc créer un dossier rollover dans le dossier img>p avec le même nom de fichier mais une image différente. rien ne se passe, pas de roll over.
Ai-je mal saisi ce que tu expliquais?

[robkwal]

Do you have a demo of this... Please!

[nobock]

J'ai donc essayé mais il n'y a rien qui change.

En fait c'est assez compliqué car j'ai cru lire quelques part que les template de presta 1.3 et 1.3.1 changeai un tout petit peu.

Est ce bien adapté pour les produits phares en page d'accueil par exemple? ou les nouveaux produits en page d'accueil.

Pas testé, mais logiquement ça devrait marcher sans avoir à modifier le code rollover, juste le code tpl du module. Quoi que il y aura peut etre un problème de chemin et il faudra rajouter un ../ quelques part. Je vais essayer d'en faire un module, mais pour le moment la partie admin est incluse directement dans un php de presta ( le core ) et c'est pas pratique si il y a update.

J'ai une image qui s'intitule 1-50-home.jpg

Alors le rollover devra s'appeler 1.jpg et ce trouver dans le dossier rollover.

Do you have a demo of this... Please!

http://www.addicteesh.com/8-homme

[gh0st333]

hmm j'ai encore du mal a faire fonctionner tout ça

dans cette template il y a un roll over sur les images de produits : http://dgcraft.free.fr/themes-prestashop/

ça doit se passer dans le fichier product-list.tpl également mais je ne suis que graphiste, pas dev, je ne comprends donc rien :/

[nobock]

Oui j'utilise un de ses template sur la boutique d'un amis. En ayant un peu regardez le code ça utilise des fonctions en javascript. Ma contrib permet d'avoir une image alternative en rollover. Pour ajouter le bout de code il faut trouver l'endroit ou s'affiche l'image dans le listing des produits.

ps : elle sont très bien ses templates gratuites, mais rajoute environ 15 20h pour corriger toute les erreurs de mise en page

[gh0st333]

J'avais tenté d'utiliser cette template (moon) mais elle était finalement trop éloignée de la maquette, j'ai donc pris une template prestashop de base que j'ai modifiée. Mais effectivement cette fonctionnalité de roll over est vraiment bien. Problème : je n'arrive bien sûr pas à l'adapter à ma template!

[Cerise]

Merci pour ta contribution, ça m'a bien aidé !

A savoir que je suis en Presta 1.3 sur le site que je confectionne actuellement et que ça marche nikel pareillement sur la homepage dans le module.

[nobock]

Dès que j'ai un peu de temps je me penche sur un module. Mais le soucis c'est vraiment l'install j'ai pas envis de toucher au template.

[fherrard]

bonsoir peut on pas récupéré l'id photo suivante genre +1 dans le même dossier car avec 3500 produits ca va etre long a upload ...

[fherrard]

pourquoi pas tenter un truc de ce genre

{assign var="image_rollover" value=$product.id_image+1} 
            {assign var="image_rollover" value="img/p/$image_rollover.jpg"}
            {if file_exists($image_rollover)}

Mais faut ajouter +1 à product.id_image

Mais quand je le rajoute il me prend bien l'id du produit +1 sauf que du coup l'url c'est 1506 au lieu de 1505-057

[bugsylille]

Je pense que la fonctionnalité intéresse beaucoup de monde!

moi j'avais pensé à un code allant chercher directement, et SI elle existe, l'image 2 du produit.
le seul hic, c'est que je ne sait pas programmer! lol

ca semble jouable facilement?

[Broceliande]

Pas mal du tout nobock ! je garde le lien sous le coude.

[Broceliande]

Je pense que la fonctionnalité intéresse beaucoup de monde!

moi j'avais pensé à un code allant chercher directement, et SI elle existe, l'image 2 du produit.
le seul hic, c'est que je ne sait pas programmer! lol

ca semble jouable facilement?

Facilement je ne crois pas.
Le code de nobock n'est pas intrusif puisque la modif n'intervient que sur le tpl.
Or aucune règle ne permet de déduire l'id d'une deuxième image image à partir de la première.
Vu que seul l'id de l'image par défaut est assigné avant l'affichage de product-list.tpl, il faudrait modifier tous les php type listiong comme category.php etc .... , pour avoir un tableau d'ids images et non l'image par défaut seule.

Tu peux contourner le problème toutefois :

tu crées un nouveau type d'images dans le BO par exemple home-hover,
Tu les génères, et ensuite tu les remplace à la mano par tes images rollover.
Dans ce cas il est possible d'avoir une image différente pour le hover, mais tu devras te taper le remplacement de chaque image type home-hover en ftp et non plus dans le BO

[Ether Création]

Bonjour,

 

Pour information, j'ai réussi à le faire en modifiant la class link.

Je passe un nouveau paramêtre pour mon over, qui est l'id produit, quand il est passez je vais non plus récupérer l'id_image de couverture mais la deuxième photo.

 

J'ajoute un onmouseover et onmouseout sur les images et le tour est réglé.

 

Voici brut de décoffrage mais mes modifs :

 

class/Link.php

public function getImageLink($name, $ids, $type = NULL, $idOver= NULL)

{

global $protocol_content;

 

/*AJOUT EC*/

 

if(isset($idOver)){

$result = Db::getInstance()->ExecuteS('SELECT id_image FROM ps_image WHERE id_product = '.$idOver.' AND position = 2');

foreach ($result as $row)

$id_image_over = $row['id_image'];

}else{

$id_image_over = 0;

}

 

/* FIN AJOUT */

 

// legacy mode or default image

if ((Configuration::get('PS_LEGACY_IMAGES')

&& (file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').'.jpg')))

|| strpos($ids, 'default') !== false)

{

if ($this->allow == 1)

$uri_path = __PS_BASE_URI__.$ids.($type ? '-'.$type : '').'/'.$name.'.jpg';

else

$uri_path = _THEME_PROD_DIR_.$ids.($type ? '-'.$type : '').'.jpg';

}else

{

// if ids if of the form id_product-id_image, we want to extract the id_image part

$split_ids = explode('-', $ids);

 

if($id_image_over != 0){

$id_image = $id_image_over;

}else{

$id_image = (isset($split_ids[1]) ? $split_ids[1] : $split_ids[0]);

}

 

if ($this->allow == 1)

$uri_path = __PS_BASE_URI__.$id_image.($type ? '-'.$type : '').'/'.$name.'.jpg';

else

$uri_path = _THEME_PROD_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').'.jpg';

}

 

return $protocol_content.Tools::getMediaServer($uri_path).$uri_path;

}

 

 

et mon product-list.tpl :

<img onmouseover="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium', $product.id_product)}'" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium')}'" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'medium')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($mediumSize)} width="{$mediumSize.width}" height="{$mediumSize.height}"{/if} />

[a-prods]

salut

Ca marche bien ton truc mais chez moi le deuxieme produit de la liste a la meme image en mouse over ou non

Les autres ca marche

[a-prods]

Ah non

en fait ça marche un produit oui un produit non

donc si il y a 5 produits dans la page, ça fonctionne pour les produits 1,3 et 5 et pas pour les produits 2 et 4

 

Une idée d’où ça vient?

[a-prods]

non encore

Il n'y a que deux produits qui pose soucis, mais je ne sais pas ou ca cloche

 

Toute aide est la bienvenu

[a-prods]

c'est bon j'ai trouve un autre bout de code qui fait ca tres bien

[LEDestock]

Ca ne fonctionne pas , en faite l'image "onmouseover" est strictement identique à celle "onmouseout" : /

[Anthony75]

Bonjour,

 

Quelqu'un a fini par trouver une solution?

 

Merci

[Vinc3nzo]

Bonjour,

 

Pour prestashop 1.5 avez vous une solution?

[DoubyWeb]

Bonjour,

 

J'aimerais aussi appliquer cette fonction pour Prestashop 1.5 ...

 

Quelqu'un a t-il une solution ?

 

Merci d'avance.

[laurens]

Bonjour, j'ai installer un rollover sur ma boutique (test pour le moment en local) en suivant ce topic , je suis en 1.4.7.3 est ça fontionne très bien

 

le rollover affiche la seconde image en BO, voici le lien ou je l'ai trouvé

 

Par contre j'ai posté ici car j'ai mis le lien des fabricants dans ma fiche produit,ça ouvre bien la page mais n'affiche pas les images , idem pour la navigation à facettes