Extensión de archivo incorrecta en Prestashop 1.7

A finales del año pasado, estuvimos comentando brevemente la sección de contacto en Prestashop 1.7.

En esta ocasión, vamos a hablar, por ejemplo, de que ocurre cuando un cliente sube un documento con extensión *.odt. en el formulario de contacto.

Simplemente, nos saldrá un error que dice “Extensión de archivo incorrecta“.

Extensión de archivo incorrecta en el formulario de contacto en Prestashop 1.7
Extensión de archivo incorrecta en el formulario de contacto en Prestashop 1.7

Si vamos al fichero:

/modules/contactform/contactform.php

Veremos que dentro de la función “public function sendMessage()” tenemos la siguiente línea de código:

$extension = array('.txt', '.rtf', '.doc', '.docx', '.pdf', '.zip', '.png', '.jpeg', '.gif', '.jpg');

Para añadir la extensión “.odt“, podríamos añadirla dentro del array

$extension = array('.txt', '.rtf', '.doc', '.docx', '.pdf', '.zip', '.png', '.jpeg', '.gif', '.jpg', '.odt');
Añadida nueva extensión en el formulario de contacto en Prestashop 1.7

¿Al intentar subir el fichero con extensión *.odt en el formulario de contacto me aparecerá el error de “Extensión de archivo incorrecta“?

En principio no, pero te en cuenta dos aspectos:

  • Siempre que puedas, es altamente recomendable hacer un override y evitar en todo lo posible editar los ficheros originales (en este caso lo ideal seria hacer un override de la clase del módulo y sobreescribir la función sendMessage)
  • ¿Cómo se hace un override de una clase de un módulo en Prestashop 1.7? -> Buscar en Google 🙂

Por cierto, espero que, en un futuro, exista la opción de permitir nuevas extensiones a la hora de subir los ficheros desde el panel de administración en el panel de Prestashop 1.7

Documento construido bajo Prestashop 1.7.1.2

Bloques de texto personalizados en el pie en Prestashop 1.7

No estamos hablando de instalar contentbox/htmlbox en nuestra tienda, estamos hablando simplemente de cambiar de ubicación el módulo de texto que se muestra en la página principal al hook -> displayFooterBefore para que se vea en toda la tienda.

Por defecto el módulo Bloques de texto personalizados (custom_text), se muestra en la página principal, pero no en resto de secciones.

Texto de la página principal en Prestashop 1.7

Para que se vea en todas las secciones, vamos hacer tres cosas:

  • Eliminarlo del displayHome
  • Insertarlo en el displayFooterBefore
  • Colocarlo en la primera posición del displayFooterBefore

Vamos a la pestaña Diseño -> Posiciones de los módulos

Acceder a las posiciones de los módulos en Prestashop 1.7

Buscamos el bloque displayHome y desenganchamos el módulo de esa posición.

Quitar módulo de la página principal en Prestashop 1.7

Ahora en la misma pestaña Diseño-> Posiciones de los módulos, pinchamos el botón superior denominado (Insertar un hook (puede tener un nombre distinto en vuestro caso) )

Insertando modulo en hook en Prestashop 1.7

Y en el formulario seleccionamos:

Módulos -> Bloque de textos personalizados
Mover a -> displayFooterBefore

Insertando módulo en el displayFooterBefore

Por último, vamos a colocarlo en la primera posición del displayFooterBefore, para ello en la misma pestaña de Diseño -> Posiciones de los módulos, buscamos el bloque “displayFooterBefore” y arrastramos el módulo hacia arriba.

Subir módulo a primera posición del displayFooterBefore
Modulo en primera posición del displayFooterBefore

El resultado final es el siguiente:

Documento testeado en Prestashop 1.7.1.2

Seguimos sin tener el Live Edit (que en la 1.7 inicialmente lo desecharon) disponible que teníamos por ejemplo en la 1.6, para mover los módulos de posición “gráficamente” sin hacerlo manualmente, esperemos que en las próximas variantes de Prestashop 1.7.X.X, implementen el Live Edit para Prestashop 1.7

Cambiar tamaño del logo en Prestashop 1.7

Si en la pestaña Diseño -> Temas y logotipo, intentamos subir un logo, por ejemplo, del siguiente tamaño:

Elección del logo para Prestashop 1.7
Elección del logo para Prestashop 1.7
Subiendo logo en Prestashop 1.7

Vemos que reduce en exceso el tamaño del logo:

Logo muy pequeño en Prestashop 1.7
Logo muy pequeño en Prestashop 1.7

Una solución, es cambiar el tema de las rejillas (grid), vamos al fichero:

/themes/classic/templates/_partials/header.tpl

Y aquí:

<div class="col-md-2 hidden-sm-down" id="_desktop_logo">

El valor “2” col-md lo vamos a variar.
(Para saber cómo funciona el tema de las rejillas, os invito a visitar esta guía: http://librosweb.es/libro/bootstrap_3/capitulo_2/tipos_de_rejillas.html )

En nuestro caso lo hemos cambiado a “6“.

Dejándolo así:

<div class="col-md-6 hidden-sm-down" id="_desktop_logo">

El problema ahora es que el logo se ve mejor, pero el menú horizontal y el buscador ha bajado de golpe y ya no está a la misma altura que el logo…..

El logo ha bajado el menú horizontal y el buscador en Prestashop 1.7

Para solucionar esto, nos vamos al mismo fichero, buscamos esta línea de código:

<div class="col-md-10 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Y vamos a cambiar el: “col-md-10” en nuestro caso por “col-md-6”, dejándolo así:

<div class="col-md-6 col-sm-12 position-static">
<div class="row">
{hook h='displayTop'}
<div class="clearfix"></div>
</div>
</div>

Finalmente, veremos el bloque del logo, menú y buscador de la siguiente forma:

Logo normal en Prestashop 1.7
Logo normal en Prestashop 1.7

Pues si reducimos el navegador, vemos que se ve bien hasta cierto punto…

Logo pequeño en resolución pequeña en Prestashop 1.7
Logo pequeño en resolución pequeña en Prestashop 1.7

¿Cómo podemos hacer un apaño para que cuando la web en resolución mínima no quede mal el logo (en nuestro caso particular)?

Añadimos en nuestro caso en el fichero /themes/classic/assets/css/custom.css 

La siguiente instrucción:

@media (max-width: 767px) {
#header .header-nav .top-logo a img {
max-height: 200px;
}
#header .header-nav {
max-height: 225px;
}
}

La imagen del logo en el CSS (en el theme.css) tiene una altura máxima establecida de 50px nosotros se la cambiamos a 200px.

El bloque que engloba al logo y a los otros elementos cuando la resolución es menor tiene una altura máxima de 50px nosotros se la cambiamos a 225px.

Por supuesto estos cambios solo se aplican en el @media (max-width: 767px) que hemos indicado, aunque con un poco de ingenio podríamos hacerlo para distintas resoluciones con el @media, pero bueno eso ya lo dejo a vosotros.

Evidentemente ha sido un pasaje muy rápido, por lo que es posible que tengáis que hacer más cambios. (De todos modos, tener en cuenta que esto ha sido para Prestashop 1.7.1.1, por lo que quizás en futuras variantes de la 1.7.X.X sea diferente)

Por cierto, si vosotros usáis inspeccionar elemento u firebug, veréis que hace referencia al theme.css, pero para no tocar el css original, simplemente hacemos una sobreescritura de los valores que necesitamos en el fichero custom.css

Por cierto, ¿recordáis que también hicimos unas guías, por si queremos cambiar el logo de ubicación o si queremos eliminar el logo de la cabecera?

Ah se me olvidaba, recordar:

  1. Limpiar cache en la pestaña Parámetros Avanzados -> Rendimiento

    Limpiar cache en Prestashop 1.7
  2. Si los cambios del CSS no los ves, limpia la cache de tu navegador.

Documento construido bajo Prestashop 1.7.1.1

Ocultar ficha técnica en Prestashop 1.7

Depende cambiar la ubicación de la ficha técnica en la ficha del producto, en esta ocasión vamos simplemente a ocultarla de la ficha del producto, porque no queremos que se vea en la ficha del producto, pero si queremos que siga funcionando como ficha técnica a nivel del filtro de navegación por facetas, y a nivel del comparador de productos.

En este documento, vamos a realizar la mini guía bajo Prestashop 1.6 y Prestashop 1.7

Ocultar ficha técnica en Prestashop 1.6 en la ficha del producto.
Ocultar ficha del producto en la ficha del producto en Prestashop 1.7

Para Prestashop 1.6, usando la plantilla por defecto, editamos el fichero:

“/themes/default-bootstrap/product.tpl”

Buscamos el siguiente código:

{if isset($features) && $features}
<!-- Data sheet -->
<section class="page-product-box">
<h3 class="page-product-heading">{l s='Data sheet'}</h3>
<table class="table-data-sheet">
{foreach from=$features item=feature}
<tr class="{cycle values="odd,even"}">
{if isset($feature.value)}
<td>{$feature.name|escape:'html':'UTF-8'}</td>
<td>{$feature.value|escape:'html':'UTF-8'}</td>
{/if}
</tr>
{/foreach}
</table>
</section>
<!--end Data sheet -->
{/if}

Y comentamos el código en Smarty

{* {if isset($features) && $features}
<!-- Data sheet -->
<section class="page-product-box">
<h3 class="page-product-heading">{l s='Data sheet'}</h3>
<table class="table-data-sheet">
{foreach from=$features item=feature}
<tr class="{cycle values="odd,even"}">
{if isset($feature.value)}
<td>{$feature.name|escape:'html':'UTF-8'}</td>
<td>{$feature.value|escape:'html':'UTF-8'}</td>
{/if}
</tr>
{/foreach}
</table>
</section>
<!--end Data sheet -->
{/if}
*}
Código de la ficha técnica comentado en Prestashop 1.6

En Prestashop 1.7, editamos el fichero:

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

Y nos encontramos una llamada al fichero:

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

En esta parte del código del fichero  “/themes/classic/templates/catalog/product.tpl

{block name='product_details'}
{include file='catalog/_partials/product-details.tpl'}
{/block}

Este código, no lo vamos a tocar, vamos a ir al fichero:

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

Y buscamos este bloque:

{block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block}

Y aquí podemos comentarlo el código (Smarty)

{* {block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block} *}
Código de la ficha técnica oculto en Prestashop 1.7

Uno de los problemas que nos podemos encontrar, es que en otra parte del código de la plantilla estemos usando el {include file=’catalog/_partials/product-details.tpl’}, para asegurarnos de que realmente este cambio solo se esta aplicando a la ficha del producto y no a otra parte de la plantilla que este usando dicho include, depende comentar el código, podemos usar las variables globales y hacer un condicional que solo muestre el código si no estas en la ficha del producto.

Es decir, dejar el código así:

{if $page.page_name !='product'}
{block name='product_features'}
{if $product.features}
<section class="product-features">
<h3 class="h6">{l s='Data sheet' d='Shop.Theme.Catalog'}</h3>
<dl class="data-sheet">
{foreach from=$product.features item=feature}
<dt class="name">{$feature.name}</dt>
<dd class="value">{$feature.value}</dd>
{/foreach}
</dl>
</section>
{/if}
{/block}
{/if}
Condicional -> Muestro el código solo si no estoy en la ficha del producto

———

Por último, recordar limpiar la cache en la pestaña Parámetros Avanzados -> Rendimiento.

Cambiar colores en Prestashop 1.7

En su momento, estuvimos hablando a modo de ejemplo de cambiar 2/3 fondos de la plantilla por defecto en Prestashop 1.7 añadiendo nuestros propios estilos en el fichero /themes/classic/assets/css/custom.css 

En esta ocasión, vamos hablar de un módulo desarrollado por el usuario shacker de la Comunidad de Prestashop, que nos permitirá cambiar colores “generales” sin tener que añadir nosotros nuestros propios estilos o modificar estilos existentes de forma manual.

La instalación del módulo, sin ningún problema desde la pestaña módulos -> módulos

Módulo para cambiar colores en Prestashop 1.7

En la configuración del módulo vemos las opciones que nos permite a la hora de cambiar los colores de la plantilla.

Para no dar un repaso a todas las opciones, vamos a chequear por ejemplo 3 opciones:

Configuración de módulo para cambiar colores básicos en Prestashop 1.7

En la imagen, hemos señalado un color para el encabezado, otro para los precios y otro para el pie de página

A la hora de cambiar/elegir el color nos proporciona una paleta con la que nos facilita la elección del color:

Paleta de colores

En nuestro caso, el resultado final ha quedado de la siguiente forma:

Color de fondo pie de página en Prestashop 1.7
Color precio de los productos en Prestashop 1.7
Color cabecera en Prestashop 1.7

¿Dónde puedo descargar este módulo para poder cambiar colores en Prestashop 1.7?

Continúa leyendo Cambiar colores en Prestashop 1.7

Descripción de la categoría al final del listado en Prestashop 1.7

En este tutorial, vamos a realizar un miniTip para mostrar la descripción de la categoría donde estamos situados debajo del listado de productos.

Por defecto, vemos la descripción junto con la imagen y el título de la categoría en Prestashop 1.7 de la siguiente forma:

Descripción de la categoría en Prestashop 1.7

Nuestra intención es ver la descripción (solo vamos a mover la descripción) justo debajo del listado de productos, tal como podemos ver en la siguiente imagen:

Descripción debajo del listado de productos en Prestashop 1.7

El primer paso es irnos al fichero:

/themes/classic/templates/catalog/listing/product-list.tpl

Y vamos añadir un nuevo bloque que luego vamos a usar en otro fichero.

En fichero actual (a final del todo), justo antes de cerrar las siguientes etiquetas:

{/block}

Añadimos un bloque:

<section>{block name='descripcionfinalc'}{/block}</section>

Hemos llamado al “bloque” -> descripcionfinalc

Nuevo Bloque Smarty Prestashop

Ahora, vamos a usar ese bloque dentro del fichero:

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

Si nos fijamos, (obviando los comentarios del fichero), la primera línea funcional de código es el extend, que tenemos:

{extends file='catalog/listing/product-list.tpl'}

De un modo u otro estamos heredando la estructura de la plantilla a la que hacemos referencia, por eso antes hemos añadido un nuevo bloque que ahora vamos a usar realmente en el fichero:

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

En nuestro caso, hemos añadido la siguiente instrucción:

(Llamamos al bloque y dentro del bloque mostramos la descripción de la categoría)

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

Estamos usando el bloque que hemos definido en la plantilla base y dentro del bloque estamos mostrando la descripción de la categoría actual.

Este bloque lo vamos a ver en última posición, porque antes en la plantilla base (/themes/classic/templates/catalog/listing/product-list.tpl) hemos definido que estaba al final 🙂

Lo primero que quiero decir, que estamos haciendo un ejemplo muy rápido y por tanto puede contener y contiene erratas, la ideal es que entendáis el funcionamiento de los bloques.

Documento basado en Prestashop 1.7.1.1

Crear página PHP en Prestashop 1.7

Lo primero es que no estamos hablando de crear páginas de contenidos en la pestaña Preferencias -> CMS (Diseño -> Páginas)

Empecemos  🙂

Aunque se puede hacer mediante módulo, nosotros lo vamos hacer a mano, que si bien no es lo más indicado, supongo que a más de alguno os puede venir bien.

Hace unos 5 años hicimos un ejemplo basado en Prestashop 1.5, ahora lo vamos hacer basado en Prestashop 1.7

El primer paso es crearnos un controlador, al que vamos a llamar “NadieController.php

Lo vamos a guardar en el directorio “/controllers/front”

¿Qué contenido va a tener el fichero “NadieController.php”?

<?php
class NadieControllerCore extends FrontController
{
public $php_self = 'nadie';
public function initContent()
{
$this->context->smarty->assign(
array(
'variableSmarty1' => 'Prueba 1',
'variableSmarty2' => 'Prueba 2',
)
);
parent::initContent();
$this->setTemplate('nadie');
}
}
  • Identificación página
    Entre otras cuestiones, no permite identificar a la página, como también por ejemplo cuando accedemos al controlador vía web, el valor del parámetro. (mismo nombre que la página, si el controlador es “nadieController…”, aquí indicamos ‘nadie’)

    public $php_self = 'nadie';
    
  • Heredamos de FrontController
    class NadieControllerCore extends FrontController
    
  • Función que viene del FrontController, y que se ejecuta nada más ejecutar el controlador.
    public function initContent()
    
  • Preparamos variables para usarlas en el TPL (plantilla)
    $this->context->smarty->assign(
    array(
    'variableSmarty1' => 'Prueba 1',
    'variableSmarty2' => 'Prueba 2',
    )
    
  • Llamada al método padre:
    parent::initContent();
    
  • Asignamos nombre de la plantilla
    “nadie” tiene que estar en “/themes/tuplantilla/templates/” (con extensión tpl), es decir “nadie.tpl
    En setTemplate, escribimos el nombre de la plantilla (nadie.tpl) sin necesidad de colocar la extensión.

    $this->setTemplate('nadie');
    

Una vez preparado el Controlador, vamos a crear el fichero “nadie.tpl” o mejor dicho la plantilla de impresión.

Nuestro contenido será el siguiente:

{extends file='page.tpl'}
{block name='page_title'}
<span class="sitemap-title">{l s='Pagina Nadie' d='Shop.Theme'}</span>
{/block}
{block name='page_content_container'}
<section>
{$variableSmarty1}
{$variableSmarty2}
</section>
{/block}

Bloque estructura – (plantilla)

{extends file='page.tpl'}

Bloque Titulo:

{block name='page_title'}
<span class="sitemap-title">{l s='Pagina Nadie' d='Shop.Theme'}</span>
{/block}
Bloque Titulo

Bloque Contenido:

{block name='page_content_container'}
<section>
{$variableSmarty1}
{$variableSmarty2}
</section>
{/block}

Estamos mostrando el contenido del valor de las variables “variableSmarty1” y “variableSmarty2” que antes habíamos declarado en el controlador.

Imprimiendo variables Smarty

 

Por último, vamos a definir los metatitulos, metadescripción y url amigable de la página de “Nadie”

Vamos a la pestaña Parámetros de la tienda -> Tráfico & SEO, y en el botón “+” añadimos nuestra página.

Nueva página

Nos saldrá un formulario donde seleccionamos la página “nadie”

Definiendo metas y urls amigables para una nueva página en Prestashop

Y definimos el metatitulo, metadescripción, url amigable, etc..

Definiendo datos SEO para la página de Nadie

Ahora para entrar a la dirección, podemos entrar así:

tutienda.com/nadie

Depende así:

tutienda.com/index.php?controller=nadie

Además veremos que aparece el metatitulo y metadescripción, tal como hemos configurado:

Mostrando titulo y descripción SEO

Y con esto y un bizcocho, terminamos por hoy.

Bizcocho de Prestashop

Documento realizado bajo Prestashop 1.7.1.0

[DOC] – Añadir CSS y JS a los módulos en Prestashop 1.7

He elaborado un documento en Español, que nos permitirá saber cómo añadir nuestras propias librerías de javasript y nuestras hojas de estilos a los módulos en Prestashop 1.7

Evidentemente, es un repaso rápido, espero que os sirva.

¿Preparado para añadir tus propias hojas de estilo a tu módulo en Prestashop 1.7? (Pincha en la siguiente imagen)

Añadir CSS y JS en los módulos en Prestashop 1.7
Añadir CSS y JS en los módulos en Prestashop 1.7

Personalizar la página de mantenimiento en Prestashop 1.7 – [DOC]

He elaborado un documento, que nos permitirá conocer aspectos básicos a la hora de personalizar la página de mantenimiento en Prestashop 1.7 

Evidentemente es un documento básico, para que os vayáis buscando la vida )

¿Preparado para personalizar tu página de mantenimiento en Prestashop 1.7?

Para acceder al documento, pulsar en la siguiente imagen.

¿Cómo personalizar la página de mantenimiento en Prestashop 1.7?
¿Cómo personalizar la página de mantenimiento en Prestashop 1.7?

Prestashop 1.7.1.1 Disponible

Hoy día 20 de abril acaban de sacar la versión 1.7.1.1 de Prestashop.

Como siempre, dejo enlace de descarga y de registro de cambios.

Descargar: https://download.prestashop.com/download/old/prestashop_1.7.1.1.zip

Log de cambios: https://www.prestashop.com/en/developers-versions/changelog/1.7.1.1-stable

Más de 15 errores corregidos con respecto a Prestashop 1.7.1.0