Modificar una plantilla de Prestashop 1.6

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

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/

Resumen
Título del artículo
Modificar una plantilla de Prestashop 1.6
Descripción
Cambiar el aspecto de una tienda online hecha con de una plantilla de Prestashop 1.6
Autor
Publicado por
Likonet.es
Logo editor
Es tán fácil compartir...Pin on PinterestShare on FacebookShare on Google+Tweet about this on Twitter

8 comentarios en “Modificar una plantilla de Prestashop 1.6

Deja un comentario