Activar JqZoom en los listados de los productos en Prestashop

Por defecto en Prestashop podemos activar el JqZoom, en la pestaña Preferencias/Productos, pero solo se activa en la ficha del producto, pero y si quisiéramos que esto se aplicara también a los listados de los productos.

Pues solo debemos modificar el fichero:

/themes/tutema/product-list.tpl

Y añadir las siguientes líneas, después de la siguiente instrucción:

{if isset($products)}

Debemos insertar lo siguiente:

<script type="text/javascript" src="{$content_dir}js/jquery/jquery.jqzoom.js"></script>
<link media="screen" type="text/css" rel="stylesheet" href="{$content_dir}/css/jqzoom.css"/>
<script type="text/javascript">
{literal}
var jqZoomEnabled = true;
//To do after loading HTML
$(document).ready(function()
{
$('img.jqzoom').jqueryzoom({
xzoom: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 21 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
});
});
{/literal}
</script>

Después en el mismo fichero debemos buscar la siguiente línea:

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

Y dejarla así:

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" class="jqzoom" alt="{$link->getImageLink($product.link_rewrite, $product.id_image, 'thickbox')}" />

De todos modos, también adjunto el fichero en cuestión ya modificado:

Descargar:  JqZoom en los listados de los productos en Prestashop