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 lineas, 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 linea:

<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

Print Friendly
Hosting Prestashop

Un pensamiento en “Activar JqZoom en los listados de los productos en Prestashop

  1. Para limitar la descripción a mostrar, busca en el fichero lo siguiente:

    {$product.description_short|truncate:130:’…’|strip_tags:’UTF-8′}

    el 130 es el numero de caracteres a lo que esta limitado a mostrar, si colocas 60 estará limitado a mostrar 60 caracteres.

Los comentarios están cerrados.