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

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.