Añadir nuevo filtro de ordenación en los productos en Prestashop

Cuando entramos a los listados de productos en Prestashop 1.7, vemos disponibles solo 5 filtros que podemos apreciar en la siguiente imagen.

Ordenación productos en Prestashop

En este ejemplo, vamos añadir un filtro nuevo para que el usuario pueda seleccionar la opción de ver los productos por fecha de creación.

Vamos al fichero => /src/Core/Product/Search/SortOrderFactory.php

Y nos encontramos la función “getDefaultSortOrders” con los métodos de ordenación por defecto.

Función => getDefaultSortOrders

Añadimos dentro de la función (dentro del return) la siguiente línea de código:

(new SortOrder('product', 'date_add', 'desc'))->setLabel(
$this->translator->trans('New', array(), 'Shop.Theme.Catalog')
),

Si os fijáis en el código, hemos añadido un nuevo filtro basado en la fecha de creación de los productos (date_add) de forma descendente (desc) con la etiqueta “New”. Por la etiqueta (texto) no os preocupéis que la podéis cambiar desde las traducciones de Prestashop.

Función modificada

Si no funciona, es porque tenéis activo el filtro (navegación por facetas / búsqueda por facetas (ps_facetedsearch)) que vemos en la columna izquierda de la tienda.

Módulo => ps_facetedsearch

Por lo tanto, tenemos que acceder al fichero:

modules/ps_facetedsearch/src/Ps_FacetedsearchProductSearchProvider.php

Donde nos encontramos la función => getAvailableSortOrders()

Función getAvailableSortOrders
Función getAvailableSortOrders

 Y añadiendo la siguiente línea de código (dentro del return de dicha función):

(new SortOrder('product', 'date_add', 'desc'))->setLabel(
$this->module->getTranslator()->trans('New', array(), 'Shop.Theme.Catalog')
),
Función getAvailableSortOrders modificada

Veremos que ahora podremos visualizar el nuevo filtro de ordenación:

Filtro nuevo añadido

Consideraciones:

  • En este “TIP” hemos tocado ficheros “originales”, lo óptimo es crear un override de los mismos siempre que se pueda.

Documento creado bajo Prestashop 1.7.3.3 bajo la plantilla por defecto.

Añadir navegación breadcrumb en la sección de contacto de Prestashop 1.7

Actualmente cuando entramos en la sección de contacto de la tienda, no vemos definido ningún breadcrumb.

Breadcrumb sección de contacto en Prestashop

Si vamos al controlador de la sección de contacto (no confundir con el formulario de contacto, que son dos cosas diferentes, una cosa es la sección de contacto, y otra es el “módulo del formulario de contacto”):

/controllers/front/ContactController.php

Y añadimos la función => getBreadcrumbLinks (con el código correspondiente) que estuvimos comentando brevemente en el pasado en otro artículo (revisar artículo) veremos dicha barra de navegación.

En este caso particular, podríamos dejar la función del siguiente modo:

Código función

En title => Hemos definido el nombre de la sección actual (contact).
En url => Hemos definido la “URL” de la sección de contacto, para que cuando pinchen en el title se quede reflejada.

Por si tenéis curiosidad, esto lo estuvimos comentando en el pasado en este enlace: Revisar

De este modo, se visualizaría en la sección contacto de la siguiente forma:

Breadcrumb aparecido

Evidentemente, recordar que lo recomendable es crear un “override” del controlador (/override/controllers/front/) y hacer las modificaciones correspondientes en el mismo.

Este documento ha sido construido bajo Prestashop 1.7.3.3 con la plantilla por defecto.

Esperemos que, en un futuro cercano, venga incorporado de forma nativa y no tengamos que modificar código.

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
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}
Código modificado

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

Borrar caché

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:

Instrucción CSS

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

Visualizar fecha de nacimiento del cliente en los pedidos en Prestashop

Dentro de la ficha de visualización del pedido en el backoffice (panel de administración), vamos a mostrar en el bloque de información del cliente, la fecha de nacimiento del mismo.

Bloque cliente en ficha pedido
Bloque cliente en ficha pedido

La idea es mostrar el dato, debajo del email.

Fecha nacimiento

Si vamos al fichero:

/carpeta_administracion/themes/default/template/controllers/orders/helpers/view/view.tpl

Dentro del bloque ->  <!– Customer informations –>

Buscamos la siguiente línea de código (correspondiente a la visualización del email en el bloque de cliente de la ficha del pedido)

<dt>{l s='Email' d='Admin.Global'}</dt>
<dd><a href="mailto:{$customer->email}"><i class="icon-envelope-o"></i> {$customer->email}</a></dd>
Código fichero
Código fichero

Debajo, vamos añadir la siguiente línea de código (para mostrar la fecha de nacimiento del cliente):

{if isset($customer->birthday) && $customer->birthday != '0000-00-00'}
<dt>{l s='Fecha nacimiento' d='Admin.Orderscustomers.Feature'}</dt>
<dd>{$customer->birthday}</dd>
{/if}

Comprobamos si existe la fecha de nacimiento del cliente y mostramos la misma.

Código para mostrar la fecha de nacimiento
Código para mostrar la fecha de nacimiento

Continúa leyendo Visualizar fecha de nacimiento del cliente en los pedidos en Prestashop

Pasar datos de Prestashop 1.4/1.5/1.6 a la versión 1.7

Tenéis una pequeña reseña de un módulo que incluye una versión gratuita que permite exportarproductos, categorías y clientes” con 1 solo clic de una versión antigua de Prestashop a la versión 1.7. No confundir con actualizar una versión de Prestashop, hablamos de exportar datos de una tienda e importarlos en otra.

Proceso importación de datos

Para acceder al módulo y ver información sobre el mismo, debéis pinchar sobre la siguiente imagen:

Acceder a una guía para exportar datos versiones anteriores de Prestashop a la versión 1.7
Acceder a una guía para exportar datos versiones anteriores de Prestashop a la versión 1.7

 

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?

Listado de productos por búsqueda

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

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.

Linea de código cambiada

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

Producto ordenado

Consideraciones a tener en cuenta:

  1.  Evitar editar el controlador original y crear un override del mismo en el directorio -> /override/controllers/front/listing/
  2. 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.

Resumen del pedido

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}
{block name=’continue_shopping’}

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

ID página de contenidos

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:

Código cambiado

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
Fondo pantalla responsive

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.

Inspeccionar elemento
Consola del navegador

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;
}
Código CSS
Color cabecera cambiado en la sección de contacto
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;
}
Código CSS
Código CSS
Fondo contenedor sección contacto

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

#contact #footer{
background: #b4f44d;
}
Código CSS
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;

Fondo del formulario

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

#contact main .page-content {
background: #100f0f;
}
Código CSS
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;
}
Código CSS
Fondo formulario de contacto

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:

Inspeccionar elemento
  1. 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
  2. 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.

  3. 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;}
Instrucción CSS

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)

Comentar código

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

Borrar caché

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).

Referencias específicas del producto
Referencias específicas del producto

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

Comentar código

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.