{"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   Afficher les fournisseurs sur les pages produits | Astuce Prestashop 1.6  
views 3063<\/div><\/a>\n\t\t\t\t\t\t\t\tCe tuto va vous expliquer comment ins\u00e9rer les fournisseurs dans la page\u00a0produit dans la version Prestashop 1.6\r\n\r\n\r\nA) Mettre le nom du fournisseur avec le lien sur votre page produit\r\n\r\nAjouter les lignes suivantes dans le fichier product.tpl\u00a0qui se situe dans votre th\u00e8me \u00e0 l'endroit \u00e0 vous d\u00e9sirez que le fournisseur apparaisse :\u00a0\r\n\r\nR\u00e9sultat :\u00a0\r\n\r\n\r\nB) Mettre le logo du fournisseur\u00a0avec le lien ...<\/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   10 palettes de couleurs sur le th\u00e8me du bleu pour agr\u00e9menter vos site web  
views 2773<\/div><\/a>\n\t\t\t\t\t\t\t\tSelon, Trinity Advise, le bleu et ses nuances sont \u00e9troitement li\u00e9s \u00e0 la sagesse, \u00e0 la s\u00e9r\u00e9nit\u00e9 et au r\u00eave. C'est une couleur de communication, il cr\u00e9e une sensation de confiance, de v\u00e9rit\u00e9 et de s\u00e9curit\u00e9, ce qui explique pourquoi de nombreux sites de banques et de conseil l\u2019utilisent. Couleur pr\u00e9f\u00e9r\u00e9e des occidentaux, il est aussi \u00e9cho de la vie, de l\u2019intuition et de la d\u00e9couverte, et peut avoir ...<\/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   Ins\u00e9rer une page cms sur une page produit |  Astuce Prestashop 1.6  
views 3963<\/div><\/a>\n\t\t\t\t\t\t\t\tJe vais vous montrer comment ins\u00e9rer une page cms sur une page produit.\r\n\r\nAstuce Prestashop 1.6\r\n\r\n\r\n1) Si on d\u00e9sire que le contenu soit affich\u00e9 sur toutes les pages produits\u00a0\r\nPour cela on va ouvrir le fichier product.tpl qui se situe dans \/themes\/lenomdevotreth\u00e8me\/product.tpl\r\n\r\nIns\u00e9rer le code suivant \u00e0 l'endroit o\u00f9 vous d\u00e9sirez que le contenu de votre page cms apparaisse.\r\n\r\nIci le \"1\" corres...<\/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   Pourquoi il ne faut pas rechercher ses mots cl\u00e9s Adwords sur Google  
views 203<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie explique pourquoi il ne faut pas de saisir sur Google, \u00a0ses requ\u00eates sur laquelle nous avons plac\u00e9 une ench\u00e8re.\r\n\r\n\r\n<\/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   Manque d\u2019inspiration : 10 exemples de fiches produits  
views 6031<\/div><\/a>\n\t\t\t\t\t\t\t\tLe th\u00e8me de la fiche produit fait couler beaucoup d'encre sur les blogs ou les sites de conseils webmarketing. Pour cause, elle est un \u00e9l\u00e9ment important dans le taux de conversion.\r\n\r\nExiste t-il une fiche produit \u00ab\u00a0parfaite\u00a0\u00bb valable pour tous les sites e-commerce ?\r\n\r\nLa r\u00e9ponse est non ,\u00a0chaque site \u00e0 besoin de ses propres informations \u00a0et de les adapter en fonction du client. Une fiche produit...<\/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}]}}