Añadir campos a los productos en Prestashop 1.7

Traducción del francés al castellano de un aporte construido por hennes  con información adicional.

Prestashop 1.7 introduce grandes cambios en el backoffice (panel de administración) en la gestión de los productos en comparación con versiones anteriores de Prestashop.

Vamos a ver como añadir nuevos campos a los productos y administrarlos desde el panel. Al final del post encontrareis un módulo que te permite añadir varios campos en el hook -> DisplayAdminProductsMainStepLeftColumnMiddle

Vamos a creamos un módulo para añadir y mostrar los campos en el panel de administración y también constuiremos un override de la clase Product.

Al acceder al fichero: /src/PrestaShopBundle/Resources/views/Admin/Product/form.html.twig

Acceder a fichero

Veremos que tenemos disponible los siguientes hooks en el panel de administración dentro de los formularios de los productos.

  • displayAdminProductsExtra
  • displayAdminProductsMainStepLeftColumnMiddle
  • displayAdminProductsMainStepLeftColumnBottom
  • displayAdminProductsMainStepRightColumnBottom
  • displayAdminProductsQuantitiesStepBottom
  • displayAdminProductsPriceStepBottom
  • displayAdminProductsOptionsStepTop
  • displayAdminProductsOptionsStepBottom
  • displayAdminProductsSeoStepBottom  (este hook se encuentra en el fichero: src/PrestaShopBundle/Resources/views/Admin/Product/Include/form_seo.html.twig )

Mostramos capturas de donde se encuentran los hooks “gráficamente” en en el formulario de edición de los productos.

Pestaña -> Ajustes básicos de la ficha de edición del producto

Hooks disponibles:

  • displayAdminProductsMainStepLeftColumnMiddle
  • displayAdminProductsMainStepLeftColumnBottom
  • displayAdminProductsMainStepRightColumnBottom
Pestaña ajustes básicos de la ficha de edición del producto

Pestaña ->  Stock/cantidades de la ficha de edición del producto

Hooks disponibles:

  • displayAdminProductsOptionsStepBottom
Pestaña ->  Stock/cantidades de la ficha de edición del producto
Pestaña ->  Stock/cantidades de la ficha de edición del producto

Pestaña -> Precio/s de la ficha de edición del producto

Hooks disponibles:

  • displayAdminProductsPriceStepBottom
Pestaña precio de la ficha de edición del producto

Pestaña opciones de la ficha de edición del producto

Hooks disponibles:

  • displayAdminProductsOptionsStepTop
  • displayAdminProductsOptionsStepBottom
Pestaña opciones de la ficha de edición del producto
Parte inferior de la pestaña opciones de la ficha de edición del producto

Pestaña SEO de la ficha del producto

Pestaña SEO de la ficha de edición del producto

El módulo al que hacemos referencia al inicio del post, añadirá los campos en la pestaña de Ajustes básicos del producto en el hook -> displayAdminProductsMainStepLeftColumnMiddle

Empecemos:

El override de la clase Product.php contendra la definición de los nuevos campos

Override de la clase Product

Estos campos (lo explicaremos posteriormente)  se encarga el módulo de crearlos en la base de datos en las tablas correspondientes.

Dentro del override vemos tres atributos publicos (correspondiente al nombre de los campos) de la clase

Atributos publicos de la clase

El constructor de la clase donde definimos los campos (que recordamos el módulo se encarga de crear dichos campos en la base de datos).

Definición campos

Y por último llamamos al constructor padre

Llamada a constructor padre

Ahora vamos a ver la clase principal del módulo:

hhproduct.php

El módulo queda instalado en el hook:

displayAdminProductsMainStepLeftColumnMiddle

Registrar módulo en Hook

Además vemos que al instalarse el módulo se ejecuta una función denominada: _installSql

Ejecución de la función: _installSql

Lo que hace la función _installSql es:

Añadir en la tabla: ps_product el campo denominado: custom_field.
Añadir en la tabla: ps_product_lang los campos custom_field_langcustom_field_lang_wysiwyg

Función: _installSql

Por otra parte dentro de la función del hook -> hookDisplayAdminProductsMainStepLeftColumnMiddle vamos a ver qué información cargamos/visualizamos.

hookDisplayAdminProductsMainStepLeftColumnMiddle

Obtenemos información del producto actual

Crear instancia de la clase Product

Obtenemos los idiomas activados

Obtener idiomas de la tienda

Preparamos las variables para pasarlas a la plantilla TPL que es la que luego visualizamos. 

Preparar variables Smarty

Pasamos el valor de los campos, accediendo a los atributos del override de la clase Product que hemos mencionado anteriormente.

Pasamos valores de los campos para poder usarlos en el TPL

Pasamos los idiomas que están activados y el idioma por defecto en el que se encuentra el panel de administración el empleado que está editando/creando el producto.

Pasamos idiomas activados e idioma por defecto al TPL

Retornamos el fichero *.tpl que luego visualizaremos

TPL

El fichero: extrafields.tpl del directorio: /views/templates/hook/ del directorio del módulo contiene los campos del formulario que luego visualizamos en la ficha del producto.

Veremos por ejemplo el campo: “custom_field” que no era “multi idioma”, ya que no lo hemos introducido en la tabla ps_product, no en la tabla ps_product_lang

Campo -> custom_field

El campo: custom_field_lang que es un campo multi idioma, pero sin el editor gráfico.

<div class="translations tabbable">
<div class="translationsFields tab-content">
{foreach from=$languages item=language }
<div class="tab-pane translation-label-{$language.iso_code} {if $default_language == $language.id_lang}active{/if}">
<input type="text" name="custom_field_lang_{$language.id_lang}" class="form-control" {if isset({$custom_field_lang[$language.id_lang]}) && {$custom_field_lang[$language.id_lang]} != ''}value="{$custom_field_lang[$language.id_lang]}"{/if}/>
</div>
{/foreach}
</div>
</div>

Y el campo custom_field_lang_wysiwyg que es un campo multi idioma, pero con el editor grafico.

En el tpl: modules/hhproduct/views/templates/hook/extrafields.tpl podeis ver el resto del código.

Si instalamos el módulo que nos ha proporcionado hennes 

Descargar módulo

Veremos que ya nos aparecerán los campos en la pestaña Ajustes básicos de la ficha de edición del producto.

Veremos ahora con el hook -> displayAdminProductsMainStepLeftColumnMiddle podemos ver los nuevos campos:

Ver campos nuevos en el panel de administración
Ver campos nuevos en el panel de administración

Además, podemos acceder a la información de dichos campos para mostrarlos luego en la ficha del producto.

Si vamos al fichero: /themes/classic/templates/catalog/product.tpl

Y queremos mostrar los campos debajo de las miniaturas de los productos:

Mostrar campos

A modo chapuzilla en el fichero:

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

Debajo del siguiente código:

Zona donde añadir las variables

Podemos añadir las variables:

{$product.custom_field}, {$product.custom_field_lang}, {$product.custom_field_lang_wysiwyg} 

Por ejemplo, añadimos la variable: {$product.custom_field_lang_wysiwyg}  que es el campo en el que veíamos el editor grafico en el panel de administración.

Mostrar variable

Si ahora añadimos una imagen en el campo en cuestión desde el panel de administración, veremos que la vamos a ver cuándo vayamos a ver el producto en la tienda.

Campo panel de administración
Nuevo campo del producto en Prestashop 1.7

Dicho esto, es mejor modificar el módulo e imprimirlo en algunos de los hooks disponibles en la ficha del producto en Prestashop 1.7  (o crear directamente un nuevo hook, dependiendo de lo que nos interese) que editar el tpl de la plantilla.

Documento construido bajo Prestashop 1.7.2.4 con la versión “0.1.0” del módulo de Hernes

Descargar módulo: Descargar

PosData: El override viene ya en el módulo y al instalarse el módulo se copia automáticamente en el directorio /override/classes/

Personalizar página 404 de Prestashop 1.7

En este TIP vamos a comentar a grosso modo algunos de los ficheros y aspectos implicados en la página 404 de Prestashop 1.7

Ficheros implicados:

Controlador de la pagina 404 (página no encontrada):

/controllers/front/PageNotFoundController.php

Dentro de: initContent  generación del código status del error 404, y además se indica el TPL que se mostrara.

Dentro de getTemplateVarPage en esta ocasión se sobrescribe el valor de la variable page_title que explicaremos posteriormente (no confundir con la del meta título)

TPLS implicados:

/themes/classic/templates/errors/404.tpl -> Página genérica del error 404 que incluye un include hacia el fichero: /themes/classic/templates/errors/not-found.tpl -> TPL con dos hooks disponibles (displayNotFound y displaySearch)


En el fichero:

/themes/classic/templates/errors/404.tpl 

Observamos el siguiente contenido:

Pasamos a estudiar el bloque page_title y el bloque page_content_container

El bloque page_title

corresponde a la siguiente parte de la página 404:

Bloque título

Donde vemos que está imprimiendo el contenido de la variable:

{$page.title}

No confundir con el valor de la variable: {$page.meta.title} que es la que muestra el valor del meta título de la página 404

Que podemos configurar en la pestaña Parámetros -> Trafico & SEO y URLS (junto con la meta descripción, url amigable, etc..)

Meta título

Y que podemos verificar que la estamos usando en el fichero: /themes/classic/templates/_partials/head.tpl aquí:

Meta título

Al final entre y una cosa y otra me voy por los laureles, lo que quiero decir es que no confundamos las variables, y que la variable (y su valor):

{$page.title}

está viniendo de otro sitio que comentamos a continuación:

Al acceder al controlador: /controllers/front/PageNotFoundController.php observamos dentro de la función getTemplateVarPage la construcción de la variable (en esta ocasión) que estamos usando en el fichero TPL:

getTemplateVarPage

Quizás es un poco confuso, pero paso a explicarlo brevemente:

$page = parent::getTemplateVarPage();

El controlador hereda de FrontController y en FrontController está definida la función getTemplateVarPage() que entre otros aspectos vemos dentro de la función getTemplateVarPage() este código:

Código

Lo que estamos haciendo es llamar a la función padre (parent::getTemplateVarPage();)posteriormente en esta instrucción:

$page['title'] = $this->trans('The page you are looking for was not found.', array(), 'Shop.Theme.Global');

Sobreescribimos el valor del título.

Recordar que este título lo podemos traducir/cambiar/personalizar sin problemas en la pestaña Internacional -> Traducciones -> Modificar Traducciones en los diferentes de idiomas e la tienda.

Tipo de traducción -> Traducción de temas
Seleccione su tema -> Plantilla que estamos usando (en nuestro caso: classic)
Seleccione su idioma -> Como queremos personalizar la frase para el idioma español, señalo: Español

Pulsamos en Modificar.

Modificar traducción

Y buscamos la frase: “La página que busca no se ha encontrado.

Cambiar texto

Simplemente escribimos nuestra frase personalizada y guardamos los cambios.

Seguimos avanzando dentro del fichero:
/themes/classic/templates/errors/404.tpl donde vemos que en el bloque: page_content_container tenemos un include hacia el TPL not-found.tpl

Include

Que corresponde a la parte que muestro en la siguiente captura:

Visualización include

Por lo tanto, si vamos al fichero /themes/classic/templates/errors/not-found.tpl

Vemos el siguiente código:

not-found.tpl

Dentro del block page_content tenemos disponible:

Dos palabras claves/textos (yo lo suelo denominar palabras claves porque nos sirven para luego poder traducir los textos en los diferentes idiomas de la tienda)

l s

Que corresponde a la parte que señalo en la siguiente captura:

Textos
Textos

Recordar que estos textos se pueden cambiar/modificar en los distintos idiomas de la tienda en la pestaña Internacional -> Localización -> Modificar Traducciones

Dentro del bloque -> block seach  tenemos disponible el hook -> displaySearch

displaySearch
displaySearch

En el hook -> displaySearch si vamos a la pestaña Diseño -> posiciones de los módulos del panel, veremos que tenemos cargado el módulo del buscador.

Módulos instalados en displaySearch

Por eso vemos el buscador, tal como podéis ver en la siguiente captura:

Buscador

Por último, tenemos otro bloque denominado -> hook_not_found donde tenemos  disponible otro hook, en este caso denominado -> displayNotFound

displayNotFound
displayNotFound

Si realmente queréis personalizar la página 404 en Prestashop 1.7, os he dicho básicamente los ficheros que existen, ya depende de vosotros como queréis personalizarlo, si añadiendo nuevos hooks y en esos hooks añadir lo que veáis  conveniente o intentar añadir algún módulo a los hooks disponibles o editar los TPLS a mano y definir la estructura que creáis conveniente.  Tener cuidado con el include del que hemos hablado porque posiblemente se usa en otras partes de la tienda.

No he hablado de los estilos (del css) que si nos fijamos en el fichero theme.css descomprimido y buscáis las reglas relacionadas con #pagenotfound veréis lo que tenéis disponible. Recordar que, por ejemplo, desde botón derecho ratón -> inspeccionar elemento en Chrome podéis ver fácilmente las líneas CSS, tener cuidado al tocarlas y no tocar líneas generales que puedan afectar a otras partes de la tienda. Recordar que si solo quieres que se aplique a la página 404 los estilos deben ir con #pagenotfound por delante. Por otro lado, recordar que en el fichero: /themes/classic/assets/css/custom.css podéis crear vuestras propias reglas.

Un ejemplo, cambiar tamaño y color del título “La página que busca no se ha encontrado.”

La página que busca no se ha encontrado

Por ejemplo, añadimos en el fichero: /themes/classic/assets/css/custom.css la siguiente instrucción:

#pagenotfound h1 {
color: #9e1b33;
font-size: 30px;
}
custom.css

Hemos cambiado el título a un color rojizo y con un tamaño de fuente de 30px.

Tamaño y color cambiado

Este documento  está construido bajo Prestashop 1.7.2.4, es muy posible que en futuras variantes de Prestashop 1.7.X esta explicación no sea válida.

 

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) &amp;&amp; $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) &amp;&amp; $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 comentando como 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 permite cambiar colores “generales” sin tener que escribir código CSS 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 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 podemos seleccionar el color a configurar de forma intuitiva.

Paleta de colores

En este ejemplo, 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