Estructura y ficheros de la plantilla en Prestashop 1.7

Aunque en la documentación oficial de Prestashop en referencia a los ficheros de la plantilla tenéis información sobre este aspecto, en la web del usuario Rocky de la Comunidad de Prestashop tenéis disponible un resumen de la estructura de la plantilla por defecto de Prestashop 1.7 con el nombre de los ficheros y una pequeña descripción de ellos.

Interesado en ver la documentación sobre la plantilla de Prestashop 1.7
Interesado en ver la documentación sobre la plantilla de Prestashop 1.7

Además, tenéis comentados otros aspectos de la plantilla que os pueden interesar, como unas variables de colores que vienen predefinidas.

Al principio, iba a traducir la documentación, pero he visto que, con Google Traductor, lo podéis entender más o menos, ya que es una literatura bastante entendible.

Podéis ver la información aquí:

http://www.nethercottconstructions.com/content/190-prestashop-17-classic-theme

https://translate.google.com/translate?sl=en&tl=es&js=y&prev=_t&hl=es&ie=UTF-8&u=http%3A%2F%2Fwww.nethercottconstructions.com%2Fcontent%2F190-prestashop-17-classic-theme&edit-text=&act=url

De todos modos, guardo una captura de seguridad de la información por si la web desapareciera en algún momento: 

Descargar información en formato captura.
Descargar información en PDF.

Categorías con productos en la página principal en Prestashop 1.7

Por este blog tenemos reseñado varios módulos que simulaban una función simular, como este: Visualizar categorías en la página principal de Prestashop.

En esta ocasión vamos hablar de un módulo desarrollado por Kaviarasan K K disponible en su repositorio de github.

El módulo permite mostrar en la página principal bloques de productos por categorías.

Bloque de categorías con productos en la página principal de Prestashop 1.7

A diferencia del módulo de productos destacados donde solo mostraba un bloque en base a la categoría que configurábamos para mostrar los productos en dicho bloque, este módulo permite configurar la visualización de tantos bloques como categorías tengamos añadidas en la tienda.

Subida e instalación del módulo desde la pestaña módulos -> módulos y servicios

Módulo instalado

El módulo trae las siguientes opciones de configuración:

Opciones de configuración del módulo
  • Number of products to be displayed -> Número de productos a mostrar en los bloques de productos por categorías.
  • Categorías -> Por cada categoría que seleccionemos el módulo mostrara un bloque distinto en la página principal.
  • Number of products to be displayed -> Mostrar aleatoriamente los productos de los bloques de las categorías.

¿Dónde puedo descargar la última versión del módulo?

https://github.com/Kingsman-The-Secret-Service/prestashop-17-category-wise-products-display (al subir un módulo descargado desde gitbub, recordar este post: Error al subir módulo)

Descargar una versión antigua del módulo por si falla el enlace fuente en algún momento.

Documento construido en base a Prestashop 1.7.3.0 con la versión “1.0.7” del módulo.

Mostrar bloque de monedas de Prestashop 1.7 con el modo catálogo

Bloque de monedas de Prestashop 1.7

El modo catálogo (parámetros de la tienda -> configuración de productos) a día de hoy Prestashop 1.7 (hasta Prestashop 1.7.3.0) no oculta los precios de los productos, aunque si oculta correctamente el proceso de compra. En versiones anteriores de Prestashop ocultaba también el precio de los productos automáticamente, puede ser que este catalogado como un bug y se “solucione”, o que realmente se quede de ese modo.

Modo catálogo Prestashop 1.7

Lo que si he comprobado es que sigue funcionando correctamente la gestión de los grupos en Prestashop 1.7 a la hora de visualizar u ocultar precios en Prestashop, por lo tanto cuando vamos a la pestaña Parámetros de la tienda -> Ajustes de los clientes -> Grupos y editamos un Grupo y señalamos Mostrar Precios -> NO

Mostrar precios -> no

La cuestión es que día de hoy activando solo el “modo catálogo” en Prestashop 1.7 solo oculta el proceso del pedido, pero no los precios, y desaparece también el bloque de monedas situado en la parte superior de la tienda (hook -> displayNav2).

El bloque de monedas desaparece porque si vamos a la clase del módulo correspondiente al bloque de monedas, es decir al fichero:

/modules/ps_currencyselector/ps_currencyselector.php

Dentro de la función renderWidget  comprueba si la tienda está en modo catálogo o si la tienda no tiene más de una moneda activa.

Condicional

Cuando se cumple “una” de las dos condiciones, cortamos.

Queda claro que con: Configuration::isCatalogMode() es para comprobar si la tienda está en modo catalogo y con Currency::isMultiCurrencyActivated() comprobamos si existe más de una moneda activa en la tienda, que realmente lo que hace el condicional es negar este último caso, para que cuando se cumpla “que la tienda está en modo catalogo o que no tiene más de 1 moneda activa” no mostramos el módulo.

Documento construido bajo Prestashop 1.7.3.0 y la versión “2.0.0″ del módulo.

Mostrar peso del producto en la ficha en Prestashop 1.7

En este TIP haremos posible que el peso del producto que configuramos en la ficha del producto se visualice justo debajo de la descripción corta del producto.

Peso producto
Peso producto
Peso del producto
Peso del producto

Si editamos el fichero: /themes/classic/templates/catalog/product.tpl y buscamos el bloque donde se muestra la descripción corta del producto.

{block name=’product_description_short’}

Podemos añadir debajo la siguiente instrucción:

Código para mostrar el peso del producto

Condicional para comprobar que el peso no está vacío y que sea distinto de 0

Literal que vamos a poder traducir para los distintos idiomas de la tienda en la pestaña Internacional -> Traducciones -> Modificar traducciones

Literal

Peso del producto formateado para mostrar solo 2 decimales

Peso del producto

Por si queréis saber como usar string_format, revisar la documentación de Smarty:
https://www.smarty.net/docs/en/language.modifier.string.format.tpl

Unidad del peso (Kg)

Unidad del peso
Unidad del peso

Una opción es colocar la línea que he mencionado en el mismo bloque de la descripción corta. Hacer clic sobre la misma imagen y veréis a que me refiero.

Código modificado

Por cierto, recordar que para traducir/cambiar el literal “Peso del producto: ”  para los distintos idiomas de la tienda se “debe” realizar desde la pestaña Internacional -> Localización -> Traducciones -> Modificar Traducciones

Por otro lado, recordar que antes de “modificar ficheros base”, lo conveniente es hacer estas modificaciones sobre una plantilla hija depende modificar los ficheros base.

Continúa leyendo Mostrar peso del producto en la ficha en Prestashop 1.7

Prestashop 1.7.3.0 final disponible para descargar

Prestashop ha publicado a día 28 de febrero de 2018 la versión 1.7.3.0 para funcionar en producción.

Nueva variante de Prestashop 1.7
Prestashop 1.7.3.0

A diferencia de las anteriores versiones de 1.7.3.0 que habían salido (es decir, Prestashop 1.7.3.0 beta, Prestashop 1.7.3.0 RC1) para testeo y reporte de errores, la versión actual se supone que es para funcionar en producción.

En su momento, estuvimos comentando algunas de las novedades que traía Prestashop 1.7.3.0 RC1 (recordar post)

De todos modos, decir que se han corregido una barbaridad de errores en comparación con versiones anteriores, además de añadir nuevas funcionalidades. Por lo tanto, quien estuviera trabajando con Prestashop 1.7, es conveniente que piense en actualizar a Prestashop 1.7.3.0. Respecto a aquellas personas que estén usando Prestashop 1.6, mi recomendación es que esperen un poquito y sean un poco pacientes.

  • PrestaTrust -> Funcionalidad que autentifica el código de los módulos y registra la información de ellos de forma segura en la base de datos blockchain.
  • Compatibilidad para los idiomas con escritura de derecha a izquierda (comúnmente conocido como RTPL), útil para idiomas  como el árabe y el hebreo.
  • Los datos de demostración que se muestran en la demo (productos, categorías) cambian.
  • Se migran 3 nuevas páginas a Symfony, que posibilitan nuevas funciones a los desarrolladores.
  • Editar stock en bloques.
  • Generación individual de alertas por email en base a un umbral de stock definido de forma individual por productos.
  • Posibilidad de configurar la hora de entrega y del cumplimiento de la legislación europea.

Descargar Prestashop 1.7.3.0 
Log de cambios
https://www.prestashop.com/es/versiones-anteriores

Información adicional por aquí en el blog de desarrolladores: http://build.prestashop.com/news/prestashop-1-7-3-0-available/

* Actualización del articulo -> Nosotros habíamos dejado la noticia el 28 de febrero de 2018 y después de unas semana Prestashop ha publicado en su blog más información sobre la versión, por lo que dejo link:

https://www.prestashop.com/es/blog/ya-esta-disponible-prestashop-1-7-3-0-1

Mostrar descripción de las categorías en el móvil en Prestashop 1.7

En resoluciones pequeñas al acceder al listado de productos por categorías en Prestashop 1.7, se oculta la descripción y la imagen de la categoría.

Listado de productos por categoría

La idea es mostrar la descripción de la categoría, tal como podemos visualizar en la siguiente captura:

Descripción de las categorías en Prestashop 1.7

Vamos al fichero:

/themes/classic/templates/catalog/listing/category.tpl

Y dentro de:


<div class="text-sm-center hidden-md-up">

Vemos que solo se imprime el título de la categoría.

Título categoría

Podemos añadir debajo la impresión de la descripción de la categoría:

{if $category.description}
<div id="category-description" class="text-muted">{$category.description nofilter}</div>
{/if}

Quedando del siguiente modo (recordar que si pulsáis sobre la imagen la podéis ver ampliada):

Código modificado
Código modificado

Quizás es un poco confuso, pero fijaros que en el fichero que estamos editando, vemos dentro del:  <div class=”block-category card card-block hidden-sm-down”> que se muestra el título, la descripción y la imagen de la categoría.

Resolución normal

Que es lo correspondiente a lo que estamos visualizando en una resolución normal.

Resolución normal

Y el código que vemos dentro de:  <div class=”text-sm-center hidden-md-up”> es el que vemos en resoluciones pequeñas.

Resoluciones pequeñas
Título pequeño

Por otro lado, recordar que hemos editado directamente la plantilla, pero recordar que en Prestashop 1.7 podemos trabajar con las plantillas hijas (child theme) que aunque nadie te ponga una pistola para trabajar de esa forma, es recomendable, por el blog tenemos un post de Junio de 2017, donde se trataba dicho tema (revisar enlace).

Documento construido bajo Prestashop 1.7.2.5 con la plantilla por defecto.

Mover módulo de posición sin añadirlo a un hook en Prestashop 1.7

Esta entrada es simplemente recordatoria.

En mayo del año 2017, estuvimos comentando el nuevo sistema de Widget que incorpora Prestashop 1.7 en los módulos, para aquellos que no lo recuerden, vuelvo a dejar el enlace: Entendiendo el funcionamiento de los widget en Prestashop 1.7

En junio del año 2017 estuvimos mostrando un ejemplo de como mostrar el formulario de contacto en otras secciones de la tienda, si no lo recordáis, vuelvo a dejar enlace Formulario de contacto en los contenidos en Prestashop 1.7

Si bien es cierto que actualmente podemos mover los módulos (al menos la mayoría de los nativos de Prestashop) desde la pestaña Diseño -> Posiciones (ejemplo básico) a casi todos los hooks porque implementan la interfaz WidgetInterface, sin necesidad de añadir la función del hook como hacíamos en versiones anteriores, también podemos indicar que queremos mostrar un determinado módulo en una determinada zona sin tener que asignar un hook a esa zona, esto es lo que habíamos explicado a inicios del año pasado (2017) en el blog.

Por lo tanto, a modo recordatorio, os recomiendo visitar las siguientes entradas del blog:

Entendiendo el funcionamiento de los widget en Prestashop 1.7 (mayo 2017)
Formulario de contacto en los contenidos en Prestashop 1.7 (junio 2017)

Y también viene bien repasar aquella guía que se hizo sobre la creación de un módulo para Prestashop 1.7 sobre abril del 2017 donde comentábamos también el tema del widget: Crear módulo Prestashop 1.7 (marzo 2017)

Me gusta indicar fechas, porque son entradas que están publicadas en el blog en esas fechas y siempre pueden existir variaciones conforme van saliendo nuevas variantes de Prestashop, aunque sean de la misma rama.

 

Cambiar etiquetas “h1” de los listados de productos en Prestashop 1.7

En Prestashop 1.7 (hasta la versión 1.7.3.0 RC1) vemos que en los listados de productos el título del producto esta englobado en un “h1”.

Veamos desde inspeccionar elemento.

Etiqueta H1 en los listados de productos
Etiqueta H1 en el título de los listados productos

Para cambiar la etiqueta “h1” en los listados de productos por otra etiqueta (h2/h3/ etc.. lo que nos interese) editamos el fichero:

/themes/classic/templates/catalog/_partials/miniatures/product.tpl

¿Por qué ese fichero?

Al acceder al fichero (correspondiente a la plantilla de visualización del módulo de productos destacados):

/themes/classic/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl

Vemos un include a:

/themes/classic/templates/catalog/_partials/miniatures/product.tpl
(con un bucle foreach para imprimir los productos)

Bucle + include

Al acceder al fichero: /themes/classic/templates/catalog/listing/product-list.tpl  que corresponde al listado de productos por categoría o el que se usa de plantilla cuando buscamos un producto y arrojamos los resultados etc.. vemos otro include hacia el fichero:

/themes/classic/templates/catalog/_partials/products.tpl

Include

Al acceder al fichero:

/themes/classic/templates/catalog/_partials/products.tpl veremos que hace un include al fichero:

/themes/classic/templates/catalog/_partials/miniatures/product.tpl

Include
 Por lo tanto, los cambios los vamos a realizar en el fichero:


/themes/classic/templates/catalog/_partials/miniatures/product.tpl

Buscamos el bloque ->  {block name=’product_name’}

{block name=’product_name’}

Y nos encontramos dentro la etiqueta “h1” junto con la variable que imprime el nombre del producto.

Etiqueta h1

Por ejemplo, la cambiamos por “h3”

Cambiar etiqueta h1 por h3

Cuando accedemos a los listados de productos, veremos un “h3” en los nombres de los productos.

Etiqueta cambiada

Si queremos que el cambio solo se aplique a la página principal y no al resto de listados, podemos usar un condicional con la variable:

 {$page.page_name}

Por ejemplo,

Si estamos en la página principal cambiamos los h1 de los títulos de los productos por h2, en el resto de sitios donde aparezcan los listados de productos colocamos otra etiqueta, por ejemplo el h3.

Etiqueta de título según sección en Prestashop

Fijaros que con:  {$page.page_name} hemos construido un condicional para comprobar en que sección estábamos.

Si accedemos ahora a la tienda, veremos que los títulos de productos tienen la etiqueta “h3” en la página principal.

h3 en los listados de productos de la página principal

Si accedemos a otra sección de la tienda que no sea el listado de productos de la página principal.

Por ejemplo los listados de productos por categoría, veremos la etiqueta “h2” en los listados de productos.

Listado de productos por categoría

Podéis más información sobre cómo construir condicionales en la documentación de Smarty:
https://www.smarty.net/docsv2/es/language.function.if.tpl
https://www.smarty.net/docs/en/language.function.if.tpl

El valor de la variable: {$page.page_name} lo podemos identificar fácilmente desde inspeccionar elemento donde el body tiene asignado mediante un id el valor de dicha variable.

ID sección categoría

Por ejemplo, cómo podemos ver en la captura, cuando estamos situados en la sección de los listados de productos por categoría el valor de {$page.page_name} es “category” mientras que cuando estamos en la página principal el valor es “index

Obviamente a que tener cuidado tocando el fichero: 

/themes/classic/templates/catalog/_partials/miniatures/product.tpl

Ya que afecta a todas las partes de la tienda (sean módulo u otras secciones) que realicen ese include, una forma de diferenciar donde estamos es con el: {$page.page_name}, otra es definiendo un include diferente para cada sección copiando la estructura general del que ya existe.

Dicho esto, en mi caso particular he aplicado los cambios del “ejemplo” editando sobre la misma plantilla, pero lo más conveniente es crear una plantilla hija y hacer solo los cambios pertinentes en la plantilla hija.

Documento construido en base Prestashop 1.7.3.0 RC1 y la plantilla por defecto.

PosData: Si no veis los cambios pulsar el botón de limpiar (vaciar) la cache en la pestaña Parámetros Avanzados -> Rendimiento

 

Prestashop 1.7.2.5 disponible para descargar

El día 21 de febrero de 2018 Prestashop ha publicado la versión 1.7.2.5.

Se trata una actualización de seguridad para todas las versiones anteriores de Prestashop 1.7.

Actualmente se detectaron 2 vulnerabilidades que afectaban al backoffice (panel de administración) y una de ellas es crítica.

Más información sobre dichas vulnerabilidades aquí:

http://build.prestashop.com/news/prestashop-1-7-2-5-maintenance-release/

Información

Descargar Prestashop 1.7.2.5

https://www.prestashop.com/es/versiones-anteriores

Log de cambios

Hooks de la ficha del producto en Prestashop 1.7

En el año 2013 estuvimos comentando en un artículo algunos de los hooks disponibles en la ficha del producto para Prestashop 1.5, en esta ocasión vamos hablar sobre lo mismo pero aplicado a Prestashop 1.7 en base a la plantilla por defecto.

Solo vamos a intentar hablar de los hooks de visualización (los display, no los actions, referente a los actions en la ficha del producto lo explicaremos en otro post)

Al acceder al fichero:

/themes/classic/templates/catalog/product.tpl

Si buscamos la palabra “hook” encontraremos inicialmente dos referencias:

hook -> displayReassurance

displayReassurance

hook -> displayFooterProduct

displayFooterProduct

Que corresponde visualmente a lo que señalamos en rojo en la siguiente captura:

displayFooterProduct y displayReassurance
displayFooterProduct y displayReassurance

En el hook -> displayReassurance tenemos inicialmente instalado el módulo: blockreassurance (Información de seguridad y confianza para el cliente) que podemos ver en la misma captura.

Por otro lado, en está captura,  no vemos ningún módulo instalado en el hook -> displayFooterProduct, pero por ejemplo el módulo de ventas cruzadas (ps_crossselling) suele quedar anclado en ese hook o el típico de productos de la misma categoría.

Volvemos al fichero:

/themes/classic/templates/catalog/product.tpl

Y encontramos otro include:

Otro include

Al acceder al fichero:

/themes/classic/templates/catalog/_partials/product-additional-info.tpl

Vemos que tenemos disponible el hook -> displayProductAdditionalInfo

Hook -> displayProductAdditionalInfo

Un ejemplo, es que en este hook por defecto se esta imprimiendo el módulo de las redes sociales en una instalación limpia de Prestashop. Es decir, la zona situada debajo del botón de “Añadir al carrito” y encima del hook displayReassurance

displayProductAdditionalInfo

Si seguimos avanzando en el fichero:

/themes/classic/templates/catalog/product.tpl

Vamos a ver varios “includes

Por ejemplo, el referente a las miniaturas que aparecen debajo de la imagen grande del producto.

thumbnails
Include

Al acceder al fichero:

/themes/classic/templates/catalog/_partials/product-cover-thumbnails.tpl

Vemos que debajo de las “miniaturas” tenemos otro hook denominado: displayAfterProductThumbs.

displayAfterProductThumbs

Que se visualizara debajo de las miniaturas.

displayAfterProductThumbs

Volvemos al fichero:

/themes/classic/templates/catalog/product.tpl

Y encontramos otro include correspondiente el bloque de precios de la ficha del producto

Otro include

Al acceder al fichero:

/themes/classic/templates/catalog/_partials/product-prices.tpl

Nos encontramos el hook -> displayProductPriceBlock

displayProductPriceBlock
displayProductPriceBlock

PosData:

Los antiguos hooks displayProductTab  y displayProductTabContent de las pestañas “están “muertos” por el momento hasta que Prestashop decida añadirlos por defecto en las próximas variantes.

Tabs Prestashop 1.7

Include: /themes/classic/templates/catalog/_partials/product-details.tpl

De todos modos, yo pienso posiblemente lo puedan añadir en un futuro/presente por defecto, sino pues simplemente creáis vuestros hooks: Crear hooks en Prestashop

Documento válido hasta Prestashop 1.7.3.0 RC1