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/