{"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   Vous d\u00e9sirez un logo parfait ? | Infographie  
views 551<\/div><\/a>\n\t\t\t\t\t\t\t\tLa cr\u00e9ation d'un logo est une \u00e9tape importante lors de la cr\u00e9ation de son entreprise.\r\n\r\nIl apparaitra partout : site web, enseigne boutique, signature mail, carte de visite....\r\n\r\nLe logo doit donc bien ressortir sur l'\u00e9cran de son ordinateur mais aussi sur papier. Vous devez pouvoir le redimensionner sans aucun souci.\r\n\r\n\r\nQu'est qu'un bon logo ?\u00a0\r\n\r\n \tun logo doit \u00eatre simple: ce n'est pas la p...<\/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   Les fonctionnalit\u00e9s de PrestaShop pour vos clients  
views 292<\/div><\/a>\n\t\t\t\t\t\t\t\tNativement PrestaShop propose une large palette de fonctionnalit\u00e9s qui permet \u00e0 vos clients d'avoir une exp\u00e9rience d'achat optimis\u00e9e, une pr\u00e9sentation compl\u00e8te de vos produits.\r\nVoici une liste de ces fonctionnalit\u00e9s:\r\n\r\nEXPERIENCE D\u2019ACHAT OPTIMISE\r\n\u2014 Navigation \u00e0 facettes (filtre les produits par caract\u00e9ristiques)\r\n\u2014 Outils de recherche int\u00e9gr\u00e9s puissants\r\n\u2014 Bas de page enrichi avec liens d'acc\u00e8s...<\/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   Liste des variables smarty : Prestashop 1.7  
views 13441<\/div><\/a>\n\t\t\t\t\t\t\t\tJe vais \u00e9num\u00e9rer dans ce tutoriel, les variables utlis\u00e9es dans Prestashop 1.7,\r\n\r\nPour les d\u00e9couvrir, vous avez deux methodes. Pour les deux m\u00e9thodes, il faut ouvrir le fichier header.tpl qui se situe dans themes\/nomdevotretheme\/templates\/_partials\/header.tpl. En haut de page, vous ins\u00e9rez soit\r\n\r\n1) {debug}, lorsque vous allez allez sur votre site vous allez avoir une fen\u00eatre qui va s'ouvrir avec...<\/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   O\u00f9 Changer le nom de sa boutique | Astuce Prestashop 1.6  
views 3761<\/div><\/a>\n\t\t\t\t\t\t\t\tSi vous d\u00e9sirez modifier le nom de votre boutique sur le cms Prestashop, suivez ce petit tuto\r\n\r\nComment modifier le nom de sa boutique depuis le back-office de Prestashop ?\r\n\r\n \tConnectez-vous au back-office de Prestashop\r\n \tAllez dans Pr\u00e9f\u00e9rences > Coordonn\u00e9es et Magasins\r\n\r\n\r\n\r\n3. Il faut scroller un peu jusqu'\u00e0 \"Coordonn\u00e9es\"\r\n\r\n\r\n\r\nCette partie propose plusieurs r\u00e9glages :\r\n- Nom de la bout...<\/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 4562<\/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<\/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}]}}