Añadir campos personalizados en productos – Prestashop 1.6
Prestashop es una herramienta muy completa a la hora de mostrar información sobre el producto, tenemos múltiples opciones que nos permiten incluir detalles del producto de forma ordenada.
Sin embargo, en ocasiones, nos puede hacer falta una serie de campos adicionales para añadir funcionalidades a la página de producto, o simplemente para mostrar un tipo de información concreta de forma separada del resto, todo dependerá del tipo de producto que tengamos en nuestra tienda online.
Hoy os voy a dejar una guía detallada de cómo añadir campos personalizados a vuestro producto, y como mostrarlos de forma personalizada, sin necesidad de gastarnos el dinero en módulos genéricos.
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 vamos a crear un campo de texto «guia» que nos servirá para incluir una guía de utilización para nuestro producto.
Contenido del post
1.- Añadir el nuevo campo en la base de datos
En este primer paso tenemos que entrar a nuestra base de datos, para ello en mi caso voy a utilizar la conocida herramienta phpmyadmin, que es la que normalmente se utiliza para manejar la base de datos a través de una interfaz gráfica.
En nuestra base de datos, tenemos que ir a la sección de Estructura de la tabla «ps_product_lang».
Una vez ahí tenemos que añadir un nuevo campo. Para este nuevo campo vamos a tomar como referencia las características del campo “description” (ya que ambos son campos de texto).
Para acceder al proceso de creación de este nuevo campo, vamos justo debajo de la lista de campos y veremos que hay una sección que pone “Agregar X columna(s)”:
Pulsamos el botón de “Continuar” para añadir nuestra nueva columna correspondiente al nuevo campo.
Una vez hayamos pulsado “Continuar” veremos un panel parecido a este:
Vemos en la imagen que están señaladas ciertas partes que son las que tenemos que rellenar, de la siguiente forma:
- 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).
Quedando los campos a rellenar de esta forma:
Hacemos click en “Guardar” y vemos 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.
Lo primero que tenemos que hacer es crear la definición de la clase, junto con el atributo que hace referencia a nuestro nuevo campo:
1 2 3 4 5 |
<?php class Product extends ProductCore{ /** @var string Guia */ public $guia; |
Seguido a esto, tenemos que crear la definición de nuestro campo dentro del array de definiciones del resto de campos por defecto.
Para ello tenemos que ir al fichero «/classes/Product.php» y copiar literalmente la variable «$definition» (con todo su contenido):
Después de copiar y pegar esta variable, tenemos que ir a la altura de la definición de «description» y añadir la definición de nuestro campo personalizado basándonos en la de el campo «description»:
1 |
'guia' => array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'), |
Finalmente tenemos que modificar la consulta SQL que recoge los valores de los campos, añadiendo la llamada al nuevo campo que hemos creado.
Para ello tenemos que copiar literalmente la función «getNewProducts» del fichero «/classes/Product.php»
Después tenemos que añadir la llamada al campo «guia» en la consulta SELECT que recoge los datos de la tabla «product_lang»:
1 2 3 4 5 |
$sql->select( 'p.*, product_shop.*, stock.out_of_stock, IFNULL(stock.quantity, 0) as quantity, pl.`description`, pl.`guia`, pl.`description_short`, pl.`link_rewrite`, pl.`meta_description`, pl.`meta_keywords`, pl.`meta_title`, pl.`name`, pl.`available_now`, pl.`available_later`, image_shop.`id_image` id_image, il.`legend`, m.`name` AS manufacturer_name, product_shop.`date_add` > "'.date('Y-m-d', strtotime('-'.(Configuration::get('PS_NB_DAYS_NEW_PRODUCT') ? (int)Configuration::get('PS_NB_DAYS_NEW_PRODUCT') : 20).' DAY')).'" as new' ); |
Finalmente el fichero tiene que tener la siguiente estructura:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php class Product extends ProductCore{ /** @var string Short description */ public $guia; public static $definition = array( /* ... */ /* Parámetros por defecto del array */ /* ... */ 'guia' => array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'), /* ... */ /* Parámetros por defecto del array */ /* ... */ ); public static function getNewProducts($id_lang, $page_number = 0, $nb_products = 10, $count = false, $order_by = null, $order_way = null, Context $context = null){ /* ... */ /* Cuerpo de la función por defecto */ /* ... */ $sql->select( 'p.*, product_shop.*, stock.out_of_stock, IFNULL(stock.quantity, 0) as quantity, pl.`description`, pl.`guia`, pl.`description_short`, pl.`link_rewrite`, pl.`meta_description`, pl.`meta_keywords`, pl.`meta_title`, pl.`name`, pl.`available_now`, pl.`available_later`, image_shop.`id_image` id_image, il.`legend`, m.`name` AS manufacturer_name, product_shop.`date_add` > "'.date('Y-m-d', strtotime('-'.(Configuration::get('PS_NB_DAYS_NEW_PRODUCT') ? (int)Configuration::get('PS_NB_DAYS_NEW_PRODUCT') : 20).' DAY')).'" as new' ); /* ... */ /* Cuerpo de la función por defecto */ /* ... */ } } ?> |
3.- Dar de alta el cajón de texto en el panel de creación de productos en el “Back-Office”
Una vez hemos dado de alta nuestro nuevo campo en la clase “Product”, tenemos que crear el cajón de texto en el panel de creación de producto para poder rellenarlo, y así introducir los datos que queramos para cada producto en el campo «guia».
Para ello tenemos que ir a la siguiente ruta:
/override/controllers/admin/templates/products
Y ahí tenemos que crear un nuevo fichero llamado “informations.tpl”.
Para añadir el cajón de texto para nuestro nuevo campo sin alterar la estructura de nuestro panel de productos, tenemos que ir al siguiente fichero:
/{admin}/themes/default/template/controllers/products/informations.tpl
(siendo {admin} nuestra carpeta de administración)
En ese fichero, tenemos que seleccionar todo su contenido, copiarlo, y pegarlo en el fichero “informations.tpl” nuevo que hemos creado en la carpeta de “override”.
Una vez tenemos todo copiado, exactamente igual que en el fichero original, tenemos que añadir las líneas para nuestro cajón de texto. Para ello, ya que es un cajón de texto libre como el de “description” vamos a coger las líneas asociadas a “description” y vamos a sustituir los valores de este campo, por los nuestros:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- Guía de utilización --> <div class="form-group"> <div class="col-lg-1"><span class="pull-right">{include file="controllers/products/multishop/checkbox.tpl" field="guia" type="tinymce" multilang="true"}</span></div> <label class="control-label col-lg-2" for="guia_{$id_lang}"> <span class="label-tooltip" data-toggle="tooltip" title="{l s='Este es el campo para la guía de utilización'}"> {l s='Guía de utilización'} </span> </label> <div class="col-lg-9"> {include file="controllers/products/textarea_lang.tpl" languages=$languages input_name='guia' class="autoload_rte" input_value=$product->guia} </div> </div> |
Para respetar el orden de elementos, este trozo de código lo vamos a colocar justo después del de “description”.
Con esto ya tendríamos la posibilidad de añadir información en nuestro campo y que se quede guardada
Incluyo captura para más aclaración de en qué posición y como debe quedar nuestro trozo de código:
4.- Mostrar el valor en nuestro theme.
Una vez tenemos el cajón de texto creado también en nuestro Back-Office, ahora tenemos que pasar a mostrar la información almacenada en el Front-Office.
Para ello utilizaremos estas líneas de código:
1 2 3 4 |
<!-- Guía de utilización del producto --> {if $product->guia} <div id="contenedor-guia">{$product->guia}</div> {/if} |
Estas líneas de código en realidad son de ejemplo, podemos distribuir la información de la forma que nos venga más conveniente para nuestra plantilla, también podemos colocarla en la parte que necesitemos de la hoja de producto o de las listas de productos, a modo de ejemplo simplemente lo vamos a poner justo debajo de la descripción corta.
Primero rellenamos nuestro campo personalizado “guia”:
Y después lo vamos a insertar justo debajo de la descripción corta con el código que he indicado arriba:
Viéndose de esta forma en nuestra página de producto:
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. Y como he comentado arriba la manera de visualizarlo en el Front-Office depende 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 dicho campo.