Añadir campos personalizados en productos – Prestashop 1.7

03 junio, 2018

Hoy vamos a ver como añadir campos personalizados en Prestashop 1.7, que, a diferencia de como vimos en el anterior post Añadir campos personalizados en el producto para Prestashop 1.6, en este caso es un poco más complejo, ya que requiere más pasos en los que tenemos que editar más ficheros.

Esto es debido a que Prestashop 1.7 ha pasado a utilizar «Symphony» para construir todos los ficheros que forman el core del sistema.

Antes de empezar: Si no tienes conocimientos básicos de programación es posible que haya conceptos un poco complejos, igualmente te recomiendo que intentes seguir los pasos ya que vienen explicados muy detallados para que su comprensión sea sencilla, pero siempre haciendo copia de seguridad de todos los ficheros.

Para este ejemplo, como hicimos en la anterior entrada del 1.6, vamos a crear un campo “guia” que hará referencia a una guía de utilización del producto.

Contenido del post

1.- Añadir el nuevo campo en la base de datos
2.- Dar de alta el nuevo campo en la “class” Product.
3.- Dar de alta el campo nuevo en el panel de creación de producto
4.- Asignar claves a nuestro nuevo campo
5.- Crear el cajón de texto asociado al nuevo campo en el panel de producto
6.- Mostrar el valor del campo personalizado

1.- Añadir el nuevo campo en la base de datos

Para empezar vamos a entrar en nuestra base de datos, para ello, en mi caso, voy a utilizar phpmyadmin, que es la herramienta que normalmente se utiliza para manejar la base de datos a través de un panel gráfico.

En nuestra base de datos, tenemos que ir a la tabla “ps_product_lang”.

Ahora tenemos que añadir un campo nuevo. Para este campo vamos basarnos en las características del campo “description” (ya que ambos son campos de texto).

Para acceder al panel de creación de nuestra nueva columna, vamos justo debajo de la lista de campos y veremos que hay una sección que pone “Agregar X columna(s)”:

Pulsamos en “Continuar” para añadir nuestra nueva columna correspondiente al nuevo campo.

Una vez pulsemos “Continuar”, veremos un panel parecido a este:

Nombre: Esta es la parte más importante, ya que es el nombre del campo y es al que vamos a hacer referencia a la hora de extraer los datos, en nuestro ejemplo lo hemos llamado guia.
Tipo: Esta es la parte donde seleccionamos el tipo de información que va a contener este campo, ya que en nuestro ejemplo va a ser texto genérico, seleccionamos la opción TEXT
Cotejamiento: En esta parte tenemos que elegir la codificación de este campo. Esta dependerá de la codificación que tengas en la base de datos. Tenemos que hacer que coincida. En mi caso la codificación que yo tengo que poner es la de utf8_general_ci.
Nulo: Tenemos que marcar esta opción ya que el campo puede no contener valores (en caso de no querer rellenarlo para ciertos productos).

Cuando rellenemos los cuadros de texto deberían de quedar de esta forma:

Hacemos click en “Guardar” y veremos como hemos agregado el campo correctamente, ya que aparece en la lista de campos de esta tabla:

2.- Dar de alta el nuevo campo en la “class” Product.

Una vez hemos creado el “hueco” en nuestra tabla de la base de datos, el cual será el encargado de almacenar la información de nuestro campo personalizado guia, ahora tenemos que dar de alta el nuevo campo en la clase asociada a los productos.

Para ello tenemos que ir a la siguiente ruta:

/override/classes

Y ahí tenemos que crear un nuevo fichero llamado Product.php.

En este fichero vamos a añadir las líneas de código necesarias para dar de alta el nuevo campo personalizado.

<?php

class Product extends ProductCore
{
    public $guia;

    public function __construct($id_product = null, $full = false, $id_lang = null, $id_shop = null, Context $context = null){
      Product::$definition['fields']['guia'] = array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isString');
      parent::__construct($id_product, $full, $id_lang, $id_shop, $context);
    }
}

?>

<?php

class Product extends ProductCore

{

public $guia;

public function __construct($id_product = null, $full = false, $id_lang = null, $id_shop = null, Context $context = null){

Product::$definition['fields']['guia'] = array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isString');

parent::__construct($id_product, $full, $id_lang, $id_shop, $context);

}

3.- Dar de alta el campo nuevo en el panel de creación de producto

Ahora hay que dar de alta los campos para que desde el admin se reconozcan y se guarde la información correspondiente a cada campo. Para ello tenemos que ir a la siguiente ruta:

/src/PrestaShopBundle/Form/Admin/Product/ProductInformation.php

Una vez dentro de ese fichero tenemos que bajar a la parte donde se listan los campos que van a haber en el panel de creación de producto.

Para localizar el lugar donde tenemos que ponerlo tenemos que buscar esta cadena de texto dentro del fichero:

Para crear nuestro nuevo “add” tenemos que introducir el siguiente código justo debajo del “add” de description:

->add('guia', 'PrestaShopBundle\Form\Admin\Type\TranslateType', array(
    'type' => 'Symfony\Component\Form\Extension\Core\Type\TextareaType',
    'options' => [
        'attr' => array('class' => 'autoload_rte'),
        'required' => false
    ],
    'locales' => $this->locales,
    'hideTabs' => true,
    'label' =>  $this->translator->trans('guia', [], 'Admin.Global'),
    'required' => false
))

->add('guia', 'PrestaShopBundle\Form\Admin\Type\TranslateType', array(

'type' => 'Symfony\Component\Form\Extension\Core\Type\TextareaType',

'options' => [

'attr' => array('class' => 'autoload_rte'),

'required' => false

'locales' => $this->locales,

'hideTabs' => true,

'label' => $this->translator->trans('guia', [], 'Admin.Global'),

'required' => false

))

Quedando de la siguiente forma:

Esta configuración es válida para este ejemplo en la que estamos simplemente creando un campo de texto libre, si queremos crear otro tipo de campo podemos copiar y pegar la configuración de uno que ya esté creado de ese mismo tipo y modificar los datos para que apunten a nuestro campo personalizado

4.- Asignar claves a nuestro nuevo campo

Para que el sistema identifique dentro de su entorno nuestro nuevo campo “guia” tenemos que asignarle una clave única y otra de traducción.

Para ello nos dirigimos a este fichero:

/src/PrestaShopBundle/Model/Product/AdminModelAdapter.php

Y en el tenemos que añadir nuestros campos a la sección de “translatableKeys” y a la sección de “unmapKeys”:

En este mismo fichero tenemos que bajar a la función “getFormData” e incluir el mapeo de nuestro campo personalizado

'guia' => $this->product->guia,

1	'guia' => $this->product->guia,

5.- Crear el cajón de texto asociado al nuevo campo en el panel de producto

Ahora vamos a crear el cajón de texto para el campo personalizado, para ello vamos al siguiente fichero:

/src/PrestaShopBundle/Resources/views/Admin/Product/form.html.twig

Y en el tenemos que añadir dos porciones de código. La primera se encuentra si buscamos esta cadena de texto en el fichero:

nav nav-tabs bordered

Dentro de ese “div” vamos a copiar y pegar el trozo de código asociado al campo “description” y vamos a sustituir los datos correspondientes para nuestro campo “guia”

La segunda porción de código la añadiremos buscando la siguiente cadena de texto (Seguramente se encontrará justo debajo de la anterior porción de código):

tab-content bordered

Ahí volvemos a hacer el mismo proceso que en la primera porción, copiamos y pegamos el trozo correspondiente a “description” y sustituimos con nuestros valores nuevos.

Con este paso ya tenemos toda la estructura interna del nuevo campo personalizado, viéndose en el panel de creación de producto de esta forma:

6.- Mostrar el valor del campo personalizado

Ahora que todo está preparado, vamos a mostrar el valor de dicho campo para cada producto.

Para ello vamos al fichero en el que queramos mostrarlo y lo llamamos a través del objeto “product” con las llamadas de smarty si es .tpl, o con las de php. En nuestro ejemplo vamos al fichero con la siguiente ruta:

/themes/{nombre-de-tu-tema}/templates/catalog/product.tpl

Para llamar a dicho campo vamos a hacerlo a través del siguiente código:

{if $product.guia}
  <p>{$product.guia nofilter}</p>
{/if}

{if $product.guia}

<p>{$product.guia nofilter}</p>

{/if}

Utilizamos “nofilter” porque al ser un campo de texto en el que podemos incluir etiquetas HTML, si no queremos que se muestren las etiquetas en texto plano, tenemos que añadir ese parámetro

Viendose de la siguiente forma en el Front-Office:

Si no ves los resultados esperados en el Front-Office, puedes probar a refrescar la caché en la sección de “Rendimiento” del “Back-Office

Este mismo proceso lo podemos hacer con tantos campos como necesitemos, ya sean de tipo texto libre, como una línea de texto, seleccionables, checkbox, etc. La forma de visualizarlo en el Front-Office dependerá de las necesidades de cada uno, para que quede armónico con el diseño de la plantilla, ya que al final nosotros decidimos el estilo que le queremos aplicar a nuestro campo personalizado.

Pedro Linares

Afán de superarme en cada proyecto. ¿Mi principal meta? Crear E-commerce, pero con personalidad propia, ya que las plantillas por defecto me aburren. Las funcionalidades únicas son las que hacen un E-commerce único. Cuando no estoy programando, estoy yendo al cine o disfrutando del aire libre, que falta siempre hace. No me busques en Twitter ya que no me gustan las redes, pero si necesitas resolver alguna duda escríbeme un correo y te responderé enseguida.