Modificar el ancho de la plantilla por defecto en Prestashop 1.6

03 noviembre, 2014 |

Si te gusta, compártelo ;)

En el tutorial de hoy vamos a ver cómo modificar el ancho de la plantilla por defecto de Prestashop 1.6. Supongamos que queremos cambiar el ancho del contenido de la plantilla por defecto de Prestashop 1.6. Para ello tendríamos que modificar la regla CSS correspondiente a las etiquetas con la clase .container. En este caso y más allá de complicaciones bastará con buscar con el Inspector de elemento de nuestro navegador la etiqueta adecuada:

Clase container en Inspector de elemento

Como vemos en la imagen anterior la clase .container tiene una anchura de 1050px. Originariamente tiene una anchura de 1170px, así es como la tengo yo ahora.

Si decidimos cambiar la anchura siquiera en un solo píxel nos encontraremos con una inesperada y desagradable sorpresa. Veámoslo mejor con una imagen:

Miniatura de producto en Prestashop 1.6

Como vemos en esta imagen, al pasar el cursor sobre la miniatura de un producto en la página de inicio de nuestra tienda, aparece sobre la miniatura un "marco" superpuesto con diversas funcionalidades, pues bien, si cambiamos el ancho de la clase .container, este "marco" ya no aparecerá. Pero esto tiene muy fácil solución.

La solución consiste en editar el archivo prestashop/themes/nuestro-tema/js/global.js. Buscar esta función dentro del código:

function blockHover(status)
{
 $(document).off('mouseenter').on('mouseenter', '.product_list.grid li.ajax_block_product .product-container', function(e){

  if ('ontouchstart' in document.documentElement)
   return;
  if ($('body').find('.container').width() == 1050)
  {
   var pcHeight = $(this).parent().outerHeight();
   var pcPHeight = $(this).parent().find('.button-container').outerHeight() + $(this).parent().find('.comments_note').outerHeight() + $(this).parent().find('.functional-buttons').outerHeight();
   $(this).parent().addClass('hovered');
   $(this).parent().css('height', pcHeight + pcPHeight).css('margin-bottom', pcPHeight * (-1));
  }
 });

 $(document).off('mouseleave').on('mouseleave', '.product_list.grid li.ajax_block_product .product-container', function(e){
  if ($('body').find('.container').width() == 1050)
   $(this).parent().removeClass('hovered').removeAttr('style');
 });
}

Cambiar los valores que vemos en las líneas resaltadas para que se correspondan con el que le habíamos dado a la clase .container. De forma que, si a .container le hemos dado un valor de 1050, en esta función le demos tambíen este valor. Problema resuelto.

3 comentarios:

  1. Muy buen artículo, es justamente lo que estaba buscando.

    ResponderEliminar
  2. Hola no logro encontrar la carpeta container estoy navegando por el navegador de archivos podrías indicarme la ruta si sos tan amable. El post esta bárbaro.

    ResponderEliminar