[Tuto] double images en page catégorie hover over 1.6

[meandre]

Bonjour j'ai trouvez se tuto sur un bon site espagiol

 

http://pelechano.es/efecto-rollover-listados-prestashop-1-5-y-1-6/

 

pour prestashop 1.6

OverrideTools.php

Création d'un fichier Tools.php avec se code et téléchargé le dans votre dossier override/classes/ tools.php

<?php

class Tools extends ToolsCore
{
	public static function getProductsImgs($product_id)
	{
		$sql = '
		(SELECT * from `'._DB_PREFIX_.'image`
		WHERE id_product="'.$product_id.'" and cover=1)

		 union
				 (SELECT * from `'._DB_PREFIX_.'image`
		WHERE id_product="'.$product_id.'" and cover=0 	ORDER BY `position` LIMIT 0,1 )

		LIMIT 0,2
		';
		$result = Db::getInstance()->ExecuteS($sql);
		return $result;
	}
}

product-list.tpl

ouvrez votre fichier product-list.tpl dans votre dossier thèmes

chercher se code

<div class="product-image-container">
	<a class="product_img_link"	href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
		<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" />
	</a> 

et changer le par se code ligne 52 

<div class="product-image-container">
	<a class="product_img_link"	href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">							
	      {assign var='productimg' value=Tools::getProductsImgs($product.id_product)}							
	      {if isset($productimg[0]) && isset($productimg[1])}
		    <img  class="replace-2x img-responsive img_0"  src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[0].id_image, 'home_default')}" 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" />					 							 			
		    <img class="replace-2x img-responsive img_1" src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$productimg[1].id_image, 'home_default')}" 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}  />					 			
	      {else}
		    <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" />
	      {/if}
	</a> 

ouvrir le fichier product_list.css--   thémes / css / product_list.css

poser le code en fin de code

ul.product_list .product-image-container a:hover img.img_0{
	display: none;
}
ul.product_list .product-image-container a img.img_1{	
	display:none;
}
ul.product_list .product-image-container a:hover img.img_1{	
	display: block;	
} 

en suite on peux remercier Enrique Gómez (

 

il à aussi coder une version 1.5 sur sont site

 

[meandre]

Attention se code bug avec la 1.6.0.13