Prestashop 1.7 | Guías y Trucos de Prestashop

Ocultar breadcrumb en la ficha del producto de Prestashop

Para ocultar el breadcrumb únicamente en la ficha del producto, dejándolo disponible en el resto de secciones, disponemos de varias opciones.

breadcrumb ficha del producto en Prestashop

Opción 1 -> Ocultar directamente el código

Fichero -> /themes/classic/templates/layouts/layout-both-columns.tpl

Buscamos el siguiente código:

{include file='_partials/breadcrumb.tpl'}

Este código lo que hace es hacer una llamada al fichero -> /themes/classic/templates/_partials/breadcrumb.tpl . Realmente podríamos haber editado el fichero del breadcrumb.tpl directamente depende el fichero layout-both-columns.tpl desde donde se hace llamada, pero en esta guía, vamos a tocar el fichero layout-both-columns.tpl .

Añadimos una condicional que diga -> “Muestra el breadcrumb en todas las secciones menos en la ficha del producto”

Y dejarlo del siguiente modo:

{if $page.page_name!='product'} {include file='_partials/breadcrumb.tpl'} {/if}

Si no veis los cambios aplicados, recordar limpiar la caché de Prestashop en la pestaña Parámetros Avanzados -> Rendimiento

Opción 2 -> Ocultarlo visualización del breadcrumb por CSS, pero no por código

En esta opción, ocultamos la visualización del breadcrumb, por lo que el usuario no lo “vera”, pero realmente sigue estando en el código de la tienda.

Para ocultar la visualización del breadcrumb en la sección de la ficha del producto, añadimos en el fichero:

/themes/classic/assets/css/custom.css

La siguiente instrucción:

Recordar que teníamos un tutorial donde cambiamos el fondo de la tienda por secciones, lo digo para que veáis de donde viene lo de “#product” (revisar guía de cambiar fondo por sección).

Continúa leyendo Ocultar breadcrumb en la ficha del producto de Prestashop

Cambiar orden de los productos en el buscador en Prestashop

Antes de empezar el artículo, dejo algunas entradas anteriores que tenemos en el blog referente al orden por defecto de los productos en la tienda.

El problema que se nos plantea es el siguiente:

Voy a la pestaña Parámetros de la tienda -> Configuración

Bloque paginación

Y señalo que muestre los productos ordenados por nombre de forma ascendente

Configurar orden de los productos por defecto en Prestashop

Me voy a la tienda, y veo que me muestra los productos ordenados por nombre de forma ascenderte.

Listado de productos ordenados alfabéticamente

¿Pero qué ocurre si realizo una búsqueda en el buscador que me proporciona Prestashop?

Vemos que no muestra los productos ordenados de forma alfabética.

¡Dios mío! ¿Qué ocurre?

Si vamos al controlador correspondiente al buscador, es decir al fichero:

/controllers/front/listing/SearchController.php

Vemos dentro la función -> getProductSearchQuery que tenemos un ordenamiento definido por defecto

Como podéis ver en la captura hablamos de la siguiente línea de código:

->setSortOrder(new SortOrder('product', 'position', 'desc'))

Si cambiamos ‘posicion’ por -> ‘name’ y ‘desc’ por ‘asc’ mostrara ordenados los productos por nombre de forma ascendente.

Si usamos ahora el buscador, aparecerán los productos ordenados por nombre de forma ascendente.

Consideraciones a tener en cuenta:

Evitar editar el controlador original y crear un override del mismo en el directorio -> /override/controllers/front/listing/
Esperemos que en un futuro Prestashop permite configurar el “orden” de los productos a la hora de visualizarlos en las búsquedas.

Documento creado bajo Prestashop 1.7.3.3

Cambiar enlace “Continuar comprando” en el carrito en Prestashop

Es posible que tengamos la necesidad de cambiar el enlace “Continuar comprando” presente en el resumen del carrito.

En este ejemplo, vamos a cambiar el enlace actual que nos lleva a la página principal de la tienda, por una de las páginas de contenido que hemos creado en la pestaña Diseño -> Páginas.

Si editamos el fichero:

/themes/classic/templates/checkout/cart.tpl

El código correspondiente al bloque del enlace es el siguiente:

{block name='continue_shopping'}
<a class="label" href="{$urls.pages.index}">
<i class="material-icons">chevron_left</i>{l s='Continue shopping' d='Shop.Theme.Actions'}
</a>
{/block}

Vamos a cambiar:

href="{$urls.pages.index}"

Por el enlace de unas de las páginas de contenido que hemos creado en la pestaña Diseño -> Páginas

Gestión páginas de contenido en Prestashop

Hablamos de la página de contenidos con ID -> 6

El enlace sería:

href="{url entity='cms' id=6 id_lang=null}"

Hemos usado la siguiente variable -> {url entity=’cms’ id=6 id_lang=null} para obtener la URL de la página de contenidos con ID 6.

El resultado final con la modificación quedaría del siguiente modo:

Recordar que es recomendable crear una plantilla hija para realizar los cambios depende editar directamente los ficheros de la plantilla base.

Continúa leyendo Cambiar enlace “Continuar comprando” en el carrito en Prestashop

Fondo según sección en Prestashop 1.7

Pequeño tutorial para cambiar el fondo de la tienda según la sección donde nos encontremos.

Fondo sección de contacto en Prestashop 1.7

Por el blog, tenemos un tutorial donde cambiamos el fondo general en Prestashop 1.7 -> Cambiar fondos generales en Prestashop 1.7

La idea de este tutorial es que, por ejemplo, podamos tener un fondo distinto en la página principal y en la sección de contacto de la tienda (por poner un ejemplo).

¿Cómo podemos cambiar el fondo solo de la sección de contacto sin que afecte a las otras secciones de la tienda?

Lo primero es identificar la sección de contacto u conocer algún aspecto que nos haga diferenciarlo del resto de secciones.

Entramos en la sección de contacto de la web, y pinchamos en el botón derecho del ratón -> inspeccionar elemento (en Chrome) y nos fijamos en el ID que tiene asignado el body.

Vemos que el body tiene asignado el id -> contact.

Este ID nos ayudara a identificar la sección. A continuación, vamos al fichero:

/themes/classic/assets/css/custom.css

Y añadimos lo siguiente:

Para cambiar el fondo de la cabecera en la sección de contacto.

#contact #header {
background: #b4f44d;
}

Color cabecera cambiado en la sección de contacto

He asignado una especie de color “verde” a la cabecera en la sección de contacto.

Para cambiar el color de fondo de la parte central (contenedor) de la sección de contacto:

Añadimos:

#contact #wrapper{
background: #b4f44d;
}

Para cambiar el fondo del pie de página en la sección de contacto, añadimos:

#contact #footer{
background: #b4f44d;
}

Fondo pie página en la sección de contacto

Si queréis cambiar el fondo del mismo formulario que se encuentra situado en la sección de contacto, es decir;

Borde fondo del formulario de contacto (añadimos en el fichero custom.css que habíamos editado antes)

#contact main .page-content {
background: #100f0f;
}

Fondo negro exterior formulario contacto

Fondo del propio formulario en la sección de contacto:

En el mismo custom.css que venimos editando, añadimos:

#contact .contact-form {
background: #f87d7d;
}

Si bien podíamos haber cambiado directamente el fondo del formulario de contacto en el fichero /themes/classic/assets/css/theme.css, he preferido cambiarlo en el fichero custom.css, debido a las siguientes razones:

Recuerdo que el formulario de contacto en Prestashop 1.7 es un widget y podemos añadirlo en distintas secciones de la tienda (añadir formulario de contacto en páginas de contenido), por lo cual si cambiamos una clase genérica en el CSS, variara en todas las partes donde este el formulario de contacto y en esta ocasión solo me interesa que los colores del formulario se encuentren cambiados en la sección de contacto, por eso hemos creado una regla especifica solo para sección de contacto y la hemos añadido en el custom.css
La parte externa del formulario de contacto, es decir, el fondo “negro” es una clase genérica utilizada en otras partes de la tienda.
theme.css

He preferido crear una regla especifica en el custom.css solo aplicable a la sección de contacto, depende modificar el fichero theme.css añadiéndole un fondo a la regla que podemos ver dentro de inspeccionar elemento.
Poder crear mis propias reglas sin tener que modificar el fichero /themes/classic/assets/css/theme.css, ya que Prestashop me proporciona un fichero denominado /themes/classic/assets/css/custom.css con ese fin.

Continúa leyendo Fondo según sección en Prestashop 1.7

Ocultar tabla de descuentos de la ficha del producto en Prestashop 1.7

Pequeño manual de Prestashop para ocultar la tabla de descuentos que se muestra en la ficha del producto.

Ficha edición del producto – Pestaña precio – Precios específicos

Tabla de descuentos en la ficha del producto

Se puede hacer de distintos modos.

Ocultar tabla por CSS

Añadimos en el fichero:

/themes/classic/assets/css/custom.css

La siguiente instrucción para ocultar la tabla:

#product .product-discounts {display:none;}

Ocultar tabla en el fichero TPL

Fichero -> /themes/classic/templates/catalog/product.tpl

Buscamos el siguiente bloque:

{block name='product_discounts'}
{include file='catalog/_partials/product-discounts.tpl'}
{/block}

Y comentamos el include (comentar código en Smarty)

Recordar que es mejor crear una plantilla hija para los cambios que editar los ficheros originales de la plantilla.

Tras hacer los cambios en el fichero TPL, recordar limpiar la caché de Prestashop en la pestaña Parámetros Avanzados -> Rendimiento

Documento creado bajo Prestashop 1.7.3.3 con la plantilla por defecto.

Ocultar EAN13 en la página del producto en Prestashop

Hemos añadido el EAN13, pero no queremos que se visualice en la ficha del producto.

EAN13 en la ficha del producto en Prestashop

Si vamos al fichero:

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

Entre los distintos bloques de código, nos encontramos con el siguiente: (bloque -> product_specific_references)

{block name=’product_specific_references’}

Además del EAN13, este bloque te imprime otras referencias, como el UPC y el ISBN (esto lo hace dentro del bucle foreach, que podemos observar en el código).

Si no queremos que se visualice ninguna de las referencias mencionadas (EAN13, UPC, ISBN), podemos ocultar directamente el bloque (comentar código en Smarty).

Por otro lado, recordar que también podemos acceder al EAN13 en la ficha de producto, mediante la variable: {$product.ean13}

Si los cambios no se visualizan, recordar limpiar la caché de Prestashop en la pestaña Parámetros Avanzados -> Rendimiento

Limpiar caché

Recordar que lo más optimo es crear una plantilla hija depende editar la plantilla original para hacer cambios.

Documento creado bajo Prestashop 1.7.3.3 y la plantilla por defecto.

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

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

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

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

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.

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

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.

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.

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)

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.

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