{"id":897,"date":"2015-05-25T21:21:46","date_gmt":"2015-05-25T21:21:46","guid":{"rendered":"http:\/\/www.majory-cubizolles.fr\/blog\/?p=897"},"modified":"2017-12-07T16:22:32","modified_gmt":"2017-12-07T16:22:32","slug":"rollover-deuxieme-image-prestashop","status":"publish","type":"post","link":"https:\/\/www.majory-cubizolles.fr\/blog\/rollover-deuxieme-image-prestashop\/","title":{"rendered":"Comment faire apparaitre une deuxi\u00e8me photo de vos produits au survol des images"},"content":{"rendered":"

Voici un petit tutoriel qui va vous permettre de faire apparaitre la deuxi\u00e8me image de votre produit au passage de la souris.<\/p>\n

UPDATE : j’ai trouv\u00e9 ce module qui est gratuit : <\/span>cliquez-ci\u00a0<\/span><\/a><\/strong><\/p>\n

Cette astuce Prestashop est valable pour la version 1.6<\/strong><\/strong><\/p>\n

1) Cr\u00e9ez un fichier nomm\u00e9 \u00ab Category.php\u00a0\u00bb dans le dossier \u00ab\u00a0override\/classes\u00a0\u00bb et ajoutez-le code suivant:<\/p>\n

<\/p>\n

<?php\r\n\/**\r\n*\r\n*add function for image2 for for class product.php\r\n*\r\n**\/\r\nclass Category extends CategoryCore\r\n{\r\n\tpublic static function getProductsImgSupp($product_id)\r\n\t{\r\n\t\t\t$sql = '\r\n\t\t\tSELECT id_image, id_product from `'._DB_PREFIX_.'image`\r\n\t\t\tWHERE id_product=\"'.$product_id.'\"\r\n\t\t\tORDER BY `position` ASC\r\n\t\t\tLIMIT 1,1\r\n\t\t\t';\r\n\t\t\t$result = Db::getInstance()->ExecuteS($sql);\r\n\t\t\treturn $result[0]['id_product'].'-'.$result[0]['id_image'];\r\n\t}\r\n}<\/pre>\n
1) Cr\u00e9ez un fichier nomm\u00e9 \u00ab Product.php\u00a0\u00bb dans le dossier \u00ab\u00a0override\/classes\u00a0\u00bb et ajoutez-le code suivant:<\/p>\n
<?php\r\n\r\n\/**\r\n*\r\n*add var image2 for roll over on line 131\r\n*\r\n**\/\r\nclass Product extends ProductCore\r\n{\r\n\r\n\tpublic static function getProductProperties($id_lang, $row, Context $context = null)\r\n\t{\r\n\t\tif (!$row['id_product'])\r\n\t\t\treturn false;\r\n\r\n\t\tif ($context == null)\r\n\t\t\t$context = Context::getContext();\r\n\r\n\t\t\/\/ Product::getDefaultAttribute is only called if id_product_attribute is missing from the SQL query at the origin of it:\r\n\t\t\/\/ consider adding it in order to avoid unnecessary queries\r\n\t\t$row['allow_oosp'] = Product::isAvailableWhenOutOfStock($row['out_of_stock']);\r\n\t\tif (Combination::isFeatureActive() && (!isset($row['id_product_attribute']) || !$row['id_product_attribute'])\r\n\t\t\t&& ((isset($row['cache_default_attribute']) && ($ipa_default = $row['cache_default_attribute']) !== null)\r\n\t\t\t\t|| ($ipa_default = Product::getDefaultAttribute($row['id_product'], !$row['allow_oosp']))))\r\n\t\t\t$row['id_product_attribute'] = $ipa_default;\r\n\t\tif (!Combination::isFeatureActive() || !isset($row['id_product_attribute']))\r\n\t\t\t$row['id_product_attribute'] = 0;\r\n\r\n\t\t\/\/ Tax\r\n\t\t$usetax = Tax::excludeTaxeOption();\r\n\r\n\t\t$cache_key = $row['id_product'].'-'.$row['id_product_attribute'].'-'.$id_lang.'-'.(int)$usetax;\r\n\t\tif (isset($row['id_product_pack']))\r\n\t\t\t$cache_key .= '-pack'.$row['id_product_pack'];\r\n\r\n\t\tif (isset(self::$producPropertiesCache[$cache_key]))\r\n\t\t\treturn array_merge($row, self::$producPropertiesCache[$cache_key]);\r\n\r\n\t\t\/\/ Datas\r\n\t\t$row['category'] = Category::getLinkRewrite((int)$row['id_category_default'], (int)$id_lang);\r\n\t\t$row['link'] = $context->link->getProductLink((int)$row['id_product'], $row['link_rewrite'], $row['category'], $row['ean13']);\r\n\r\n\t\t$row['attribute_price'] = 0;\r\n\t\tif (isset($row['id_product_attribute']) && $row['id_product_attribute'])\r\n\t\t\t$row['attribute_price'] = (float)Product::getProductAttributePrice($row['id_product_attribute']);\r\n\r\n\t\t$row['price_tax_exc'] = Product::getPriceStatic(\r\n\t\t\t(int)$row['id_product'],\r\n\t\t\tfalse,\r\n\t\t\t((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),\r\n\t\t\t(self::$_taxCalculationMethod == PS_TAX_EXC ? 2 : 6)\r\n\t\t);\r\n\r\n\t\tif (self::$_taxCalculationMethod == PS_TAX_EXC)\r\n\t\t{\r\n\t\t\t$row['price_tax_exc'] = Tools::ps_round($row['price_tax_exc'], 2);\r\n\t\t\t$row['price'] = Product::getPriceStatic(\r\n\t\t\t\t(int)$row['id_product'],\r\n\t\t\t\ttrue,\r\n\t\t\t\t((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),\r\n\t\t\t\t6\r\n\t\t\t);\r\n\t\t\t$row['price_without_reduction'] = Product::getPriceStatic(\r\n\t\t\t\t(int)$row['id_product'],\r\n\t\t\t\tfalse,\r\n\t\t\t\t((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),\r\n\t\t\t\t2,\r\n\t\t\t\tnull,\r\n\t\t\t\tfalse,\r\n\t\t\t\tfalse\r\n\t\t\t);\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\t$row['price'] = Tools::ps_round(\r\n\t\t\t\tProduct::getPriceStatic(\r\n\t\t\t\t\t(int)$row['id_product'],\r\n\t\t\t\t\ttrue,\r\n\t\t\t\t\t((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),\r\n\t\t\t\t\t2\r\n\t\t\t\t),\r\n\t\t\t\t2\r\n\t\t\t);\r\n\r\n\t\t\t$row['price_without_reduction'] = Product::getPriceStatic(\r\n\t\t\t\t(int)$row['id_product'],\r\n\t\t\t\ttrue,\r\n\t\t\t\t((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),\r\n\t\t\t\t6,\r\n\t\t\t\tnull,\r\n\t\t\t\tfalse,\r\n\t\t\t\tfalse\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\t$row['reduction'] = Product::getPriceStatic(\r\n\t\t\t(int)$row['id_product'],\r\n\t\t\t(bool)$usetax,\r\n\t\t\t(int)$row['id_product_attribute'],\r\n\t\t\t6,\r\n\t\t\tnull,\r\n\t\t\ttrue,\r\n\t\t\ttrue,\r\n\t\t\t1,\r\n\t\t\ttrue,\r\n\t\t\tnull,\r\n\t\t\tnull,\r\n\t\t\tnull,\r\n\t\t\t$specific_prices\r\n\t\t);\r\n\r\n\t\t$row['specific_prices'] = $specific_prices;\r\n\r\n\t\t$row['quantity'] = Product::getQuantity(\r\n\t\t\t(int)$row['id_product'],\r\n\t\t\t0,\r\n\t\t\tisset($row['cache_is_pack']) ? $row['cache_is_pack'] : null\r\n\t\t);\r\n\r\n\t\tif ($row['id_product_attribute'])\r\n\t\t{\r\n\t\t\t$row['quantity_all_versions'] = $row['quantity'];\r\n\t\t\t$row['quantity'] = Product::getQuantity(\r\n\t\t\t\t(int)$row['id_product'],\r\n    \t\t\t$row['id_product_attribute'],\r\n\t\t\t   isset($row['cache_is_pack']) ? $row['cache_is_pack'] : null\r\n\t\t\t);\r\n\t\t}\t\r\n\r\n\t\t$row['id_image'] = Product::defineProductImage($row, $id_lang);\r\n\t\t$row['id_image2'] = Category::getProductsImgSupp((int)$row['id_product']);\r\n\t\t$row['features'] = Product::getFrontFeaturesStatic((int)$id_lang, $row['id_product']);\r\n\r\n\t\t$row['attachments'] = array();\r\n\t\tif (!isset($row['cache_has_attachments']) || $row['cache_has_attachments'])\r\n\t\t\t$row['attachments'] = Product::getAttachmentsStatic((int)$id_lang, $row['id_product']);\r\n\r\n\t\t$row['virtual'] = ((!isset($row['is_virtual']) || $row['is_virtual']) ? 1 : 0);\r\n\r\n\t\t\/\/ Pack management\r\n\t\t$row['pack'] = (!isset($row['cache_is_pack']) ? Pack::isPack($row['id_product']) : (int)$row['cache_is_pack']);\r\n\t\t$row['packItems'] = $row['pack'] ? Pack::getItemTable($row['id_product'], $id_lang) : array();\r\n\t\t$row['nopackprice'] = $row['pack'] ? Pack::noPackPrice($row['id_product']) : 0;\r\n\t\tif ($row['pack'] && !Pack::isInStock($row['id_product']))\r\n\t\t\t$row['quantity'] = 0;\r\n\r\n\t\t$row = Product::getTaxesInformations($row, $context);\r\n\r\n\t\tself::$producPropertiesCache[$cache_key] = $row;\r\n\t\treturn self::$producPropertiesCache[$cache_key];\r\n\t}\r\n\r\n}<\/pre>\n
3) Ouvrez le fichier product-list.tpl qui se situe dans votre th\u00e8me<\/p>\n
Remplacez le code suivant \u00a0qui se situe au d\u00e9but<\/p>\n
<a class=\"product_img_link\"\thref=\"{$product.link|escape:'html':'UTF-8'}\" title=\"{$product.name|escape:'html':'UTF-8'}\" itemprop=\"url\">\r\n\t\t\t\t\t\t\t<img class=\"replace-2x img-responsive\" src=\"{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}\" alt=\"{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{\/if}\" title=\"{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{\/if}\" {if isset($homeSize)} width=\"{$homeSize.width}\" height=\"{$homeSize.height}\"{\/if} itemprop=\"image\" \/>                          \r\n\t\t\t\t\t\t<\/a><\/pre>\n
Par<\/p>\n
<a href=\"{$product.link|escape:'htmlall':'UTF-8'}\" class=\"product_img_link\" title=\"{$product.name|escape:'htmlall':'UTF-8'}\">\r\n\t\t\t\t\t<!--1st image add class and style for roll over-->\r\n\t\t\t\t\t<img  class=\"img_first\" style=\"display:\" src=\"{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}\" alt=\"{$product.legend|escape:'htmlall':'UTF-8'}\" {if isset($homeSize)} width=\"{$homeSize.width}\" height=\"{$homeSize.height}\"{\/if} \/>\r\n\t\t\t\t\t<!--2nd image for roll over-->\r\n\t\t\t<img class=\"img_second\" style=\"display:none\" src=\"{$link->getImageLink($product.link_rewrite, $product.id_image2, 'home_default')}\" alt=\"{$product.legend|escape:'htmlall':'UTF-8'}\" {if isset($homeSize)} width=\"{$homeSize.width}\" height=\"{$homeSize.height}\"{\/if} \/>\r\n\t\t\t\t<\/a><\/pre>\n
3) Ouvrez le fichier footer.tpl\u00a0qui se situe dans votre th\u00e8me<\/p>\n
Juste avant la balise <\/body>, ins\u00e9rez<\/p>\n
<script type=\"text\/javascript\">\r\n\t$(\".product_img_link\").hover(\r\n\tfunction () {\r\n\t\t$(this).find('.img_second').toggle();\r\n\t\t$(this).find('.img_first').toggle();\r\n\t\t},\r\n\tfunction () {\r\n\t\t$(this).find('.img_second').toggle();\r\n\t\t$(this).find('.img_first').toggle();\r\n\t\t}\r\n\t);\r\n<\/script><\/pre>\n
4) N’oubliez pas il sera peut-\u00eatre n\u00e9cessaire de vider le cache de Prestashop (Param\u00e8tres avanc\u00e9s > Performances)<\/p>\n
Voici le r\u00e9sultat :\u00a0<\/strong><\/p>\n
\"secon-image-hover\"<\/a><\/p>\n
MODULES PAYANTS :\u00a0<\/strong><\/span><\/p>\n
Si vous n’avez pas envie de vous emb\u00eater, l’agence Kiwik a cr\u00e9e un module pour traiter ce type demande avec un prix tout \u00e0 fait correct (35,99 \u20ac<\/span> TTC).\u00a0Je n’ai pas test\u00e9 le module mais \u00e0 ce jour sur 10 avis il a 5 \u00e9toiles donc je suppose qu’il fonctionne tr\u00e8s bien.<\/p>\n
Voir le module :\u00a0http:\/\/addons.prestashop.com\/fr\/20254-images-au-survol-hover.html<\/a><\/p>\n
 <\/p>\n
Articles similaires<\/h2><\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Les Fran\u00e7ais, le e-commerce et les tablettes  
views 110<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie, r\u00e9alis\u00e9e par Content Square, met en avant les comportements de navigation et d\u2019achats des fran\u00e7ais sur tablette, en France.\r\n\r\nLes chiffres viennent d'une \u00e9tude r\u00e9alis\u00e9e d\u2019ao\u00fbt 2013 \u00e0 septembre 2014, sur 50 millions de visites sur tablette et plus de 100 sites e-commerce leaders fran\u00e7ais, multisectoriels.\r\n\r\nA noter : 5% du chiffre d'affaires du e-commerce Fran\u00e7ais se font sur s...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Greffer le menu haut horizontal dans displayNav |  Astuce Prestashop 1.6  
views 4556<\/div><\/a>\n\t\t\t\t\t\t\t\tCe tutoriel va vous permettre de greffer le module \"menu haut horizontal\" dans displayNav\r\n\r\nCette astuce Prestashop est valable pour la version 1.6\r\n\r\n--------------------------\r\n\r\nOn va dans un premier temps greffer le module au hook displayNav :\r\n\r\n1) Modules > Position > Greffer un module (en haut \u00e0 droite). Greffer le module \"Menu Haut Horizontal sur displayNav.\r\n\r\n\r\n\r\n\r\n\r\n2) Cliquez su...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Supprimer la redirection Home du bloc Newsletter |  Astuce Prestashop 1.6  
views 570<\/div><\/a>\n\t\t\t\t\t\t\t\tVous l'avez peut-\u00eatre remarqu\u00e9 mais si le client s'inscrit \u00a0\u00e0 la newsletter, il est obligatoirement renvoy\u00e9 \u00e0 la page d'accueil de votre site.\r\n\r\nSi vous d\u00e9sirez que le client reste sur la m\u00eame, suivez\u00a0ce petit tuto :\r\n\r\n\r\nComment puis-je supprimer cette redirection dans Prestashop ?\u00a0\r\n\r\n \tOuvrez le fichier th\u00e8mes\/lenomduvotretheme\/modules\/blocknewsletter\/blocknewsletter.tpl\r\n\r\nRemplacer le code s...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Optimisez le sitemap de votre boutique |  Astuce Prestashop 1.6  
views 3022<\/div><\/a>\n\t\t\t\t\t\t\t\tQu'est ce qu'un sitemap ?\u00a0\r\nUn sitemap est un fichier qui contient une liste enrichie d'URLs internes \u00e0 un site web. Ce fichier est au format XML. Il permet de fournir aux principaux moteurs de recherche des informations sur les URLs d'un site web qu'ils ne pourraient pas d\u00e9couvrir par eux-m\u00eames\r\nComment cr\u00e9er un sitemap depuis le back-office de Prestashop\u00a0\r\nIl faut aller dans Modules et Services ...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Afficher le champ adresse sur plusieurs lignes | Bloc contact infos \u2013  Astuce Presta...  
views 1129<\/div><\/a>\n\t\t\t\t\t\t\t\tCette astuce Prestashop est valable pour la version 1.6\r\n\r\nVous l'avez s\u00fbrement remarqu\u00e9, en bas de page, l'adresse de votre magasin est sur une seule ligne.\r\n\r\n\r\n\r\nCe rapide tutoriel va vous permettre d'afficher le champ adresse sur plusieurs lignes\r\n\r\n\r\n\r\nValable pour Prestashop 1.6 et 1.5\r\n\r\n-----------------------------------\r\n\r\n1) Pour ins\u00e9rer les informations de votre boutique, il faut aller...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n<\/div>  ","protected":false},"excerpt":{"rendered":"
Voici un petit tutoriel qui va vous permettre de faire apparaitre la deuxi\u00e8me image de votre produit au passage de la souris. UPDATE : j’ai trouv\u00e9 ce module qui est gratuit : cliquez-ci\u00a0 Cette astuce Prestashop est valable pour la version 1.6 1) Cr\u00e9ez un fichier nomm\u00e9 \u00ab Category.php\u00a0\u00bb dans […]<\/p>\n","protected":false},"author":1,"featured_media":899,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/897"}],"collection":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/comments?post=897"}],"version-history":[{"count":0,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/897\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media\/899"}],"wp:attachment":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media?parent=897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/categories?post=897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/tags?post=897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}