Cambiar de imagen cuando se pasa el cursor sobre un producto Prestashop (Onmouseover)

2:02:00 p.m. Unknown 0 Comments

En este tutorial explicaremos como implementar el efecto Onmouseover en los productos listados de una tienda Prestashop. Después de realizar este cambio, podremos observar cómo cambia de imagen el producto cuando pasamos con el cursor sobre él.
Para empezar hay que tener en cuenta que debemos tener acceso total a los archivos de la tienda. Los archivos a modificar serán: 
  • Link.php: ubicado en la carpeta classes.
  • product-list.tpl: ubicado en la carpeta de la plantilla a modificar 
Es recomendable hacer una copia de estos archivos antes de modificarlos, con el fin de recuperar el funcionamiento de la tienda si se presenta algún error de código o si se desea volver a tener el funcionamiento original.

En el archivo Link.php se debe agregar una función que logre hallar la url de la segunda imagen asociada a cada producto, esta por orden se ubicará después de la funcion getImageLink que es la que encuentra la url de la imagen por defecto y la llamaremos getImageLink2. A continuación se presenta el código de la función.

public function getImageLink2($name, $ids, $type = null)
    {
   if(isset($ids))
   {
    $over_image = Db::getInstance()->getRow('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.(int)($ids).' AND position = 2');

    if($over_image)
     $id_image = array_shift($over_image);
    else
     return '0';
   }   
   
   if ($this->allow == 1) {
                $uri_path = __PS_BASE_URI__.($id_image).($type ? '-'.$type : '').$theme.'/'.$name.'.jpg';
            } else {
                $uri_path = _THEME_PROD_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').$theme.'.jpg';
            }
   
        return $this->protocol_content.Tools::getMediaServer($uri_path).$uri_path;
    }


Para la modificación del archivo product-list.tpl, Se debe ubicar el div class="product-image-container" dentro encontraremos un fragmento de código como este

       <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" />


El cual debemos reemplazar por el siguiente código que hace el llamado tanto de la función getImageLink como getImageLink2

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" onmouseover="this.src='{$link->getImageLink2($product.link_rewrite, $product.id_image , 'home_default')}';" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.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" />



Con estos cambios basta para aplicar el efecto onmouseover sobre los productos, en el siguiente video te puede dar una guía mas gráfica de lo que se debe hacer el paso a paso.

Cuéntanos si este tutorial te sirvió y pregúntanos con toda confianza si necesitas ayuda.

You Might Also Like