En mi anterior entrada sobre modificar una pantilla de Prestashop (1.4) expliqué lo más básico para poder conocer y editar los archivos necesarios para que nuestra tienda online adquiera el aspecto que queramos.

Me detendré en las diferencias desde aquella entrada: de Prestashop 1.4.3 a 1.6.0.6 – también abordaremos el trabajo con más conocimientos de programación y documentándonos más en foros y en el dashboard.

Primeras impresiones de la nueva versión

logo-prestashop

La instalación sigue siendo sencilla y rápida. El .rar descargado de la página oficial sigue siendo bastante liviano. Sin problemas para instalar en local.

Herramienta de personalización: Esto es una cosa que siempre faltaba en todas las versiones. Puede ser m

uy útil para probar distintas combinaciones de color en la plantilla antes de decidirse por una. La herramienta está un poco limitada por los pocos colores que ofrece y lo limitado de las fuentes, aunque muy bien escogidas.

ambios en la plantilla del Back-Office: No hay más que ver la plantilla para intuir algunas mejoras en la organización y el diseño, con un menú lateral (que siempre he preferido al horizontal) con efecto hover desplegable para los submenús. Un apunte sobre las estadísticas: el enlace a la cuenta de Google Analytics.

Mejora del acceso rápido: Lo de «añadir esta página» es simplemente muy útil.

Multitienda:  Esta versión de Prestashop admite multitienda, algo que hemos de tener en cuenta en el caso en que necesitemos importar tablas bases de datos de otras versiones a la nueva versión. Algunas tablas incorporan un campo id_shop o una tabla más con el sufijo _shop para mejor gestión entre tiendas. Por ejemplo, podemos mencionar las tablas relativas a las características de productos, o features.

Y muchas otras cosas que no nos da tiempo a comentar… relativas a la nueva distribución de archivos y carpetas, a rendimiento o al SEO.

En esta ocasión trataremos de no realizar todos los cambios directamente en el archivo gobal.css, sino que haremos los cambios usando la carpeta override y/o módulos extra para cargar el nuevo estilo. Pero antes tenemos que tener una copia a salvo del tema original. Así que vamos a crear un tema personalizado de Prestashop 1.6 a partir del tema default-bootstrap que viene instalado por defecto.

Crear el tema nuevo

Desde
el B.O. > Preferencias > Temas, elegimos la opción Añadir Tema de
la parte superior. Esto nos permite crear un tema a partir de otro
existente (haciendo scroll hacia abajo lo podremos ver), que es
realmente lo que nos interesa.

Borrar la caché

Parámetros avanzados > Rendimiento.
A veces es aconsejable reiniciar un módulo que no funcione bien
después de un cambio de tema o de una intalación de un tema nuevo – por
ejemplo, a mi menú horizontal le fallaba el CSS después de instalar un
neuvo tema personalizado, y se solucionó así.

Usar Override

(Contenido original: http://prestadb.com/prestashop-override-controllers-tutorial/)

Módulo Configurador de Temas

Este
módulo viene instalado por defecto y nos ayuda a modificar las imágenes
del tema. El tema incorpora unas imágenes fijas que quedan bastante
bien en el diseño por defecto, pero que es muy probable que queramos
cambiar o quitar. Desde el módulo Configurador de Temas podemos incluso asignar una imagen a cada idioma instalado. También tendremos una sencilla manera de agregar o quitar el banner superior, amén de otras opciones que merece la pena revisar.

Algunos tweaks y fixes

Es decir, pequeños retoques rápidos a la plantilla para modificar detalles del aspecto de la tienda. Algunos de ests retoques no están orientados al diseño de producción final, sino sólo a una vista previa provisional mientras se decide el aspecto final del tema.

Quitar pestañas «populares» y «nuevos» del módulo homefeatured

– http://www.prestashop.com/forums/topic/342514-como-eliminar-barra-nuevos-populares/

– Cambiar la línea del CSS:

#home-page-tabs {
padding: 10px 0;
margin: 0 0 0 -18px;
display: none;
}

Cambiar número de productos por fila en homefeatured

Resumen de los pasos a seguir para lograr cambiar el número de productos por fila de la página de inicio. Puede servir como pequeña guía para lograr el msimo efecto en otras páginas de productos – como categorías o productos más vistos.

1 – Crear un estilo css como el que sigue:

.col-md-23 {
width: 20%;
}

Un 20% nos permitirá mostrar 5 productos por fila. Lo insertamos entre .col-md-2 y .col-md-3
Para mostrar 4 productos por fila en categorías, no necesitamos más CSS del que ya está especificado en la plantilla.

2- Editar product-list.tpl

{if $page_name !=’index’ && $page_name !=’product’}
{assign var=’nbItemsPerLine’ value=4}
{assign var=’nbItemsPerLineTablet’ value=2}
{assign var=’nbItemsPerLineMobile’ value=3}
{else}
{assign var=’nbItemsPerLine’ value=5}
{assign var=’nbItemsPerLineTablet’ value=3}
{assign var=’nbItemsPerLineMobile’ value=2}
{/if}

3- Cambio del tamaño de las imágenes

En Preferencias > Imágenes cambiamos el tamaño de las imágenes home_default de 250 x 250 a 200 x 250. Regeneramos las miniaturas correspondientes en la misma sección.

4- Uso de la clase css que hemos creado (en product-list.tpl)

Original:

<li class=»ajax_block_product{if $page_name == ‘index’ || $page_name == ‘product’} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}

Modificado:

<li class=»ajax_block_product{if $page_name == ‘index’ || $page_name == ‘product’} col-xs-10 col-sm-4 col-md-23{else} col-xs-12 col-sm-4 col-md-3{/if}

5- Notas relativas al sistema grid:

Prestashop 1.6 usa un sistema de rejills (grid) en la que el ancho máximo es de 12 columnas. Las clases para index.php son

col-xs-12 col-sm-4 col-md-3

Esto significa

col-sm-4 para tablets (= 3 columnas) => 3×4=12
col-md-3 para PC (= 4 columnas) => 4×3=12

Es necesario cambiar las clases para obtener un número de columnas distinto, o bien crear clases nuevas.

Fuente: https://www.prestashop.com/forums/topic/316622-how-to-add-more-columns-to-product-list-on-ps-16/