Crear nueva pestaña en la página de productos de PrestaShop

Añadir nuevas pestañas en las fichas de productos en PrestaShop

Desarrollando una tienda de ropa en PrestaShop para una empresa, me plantearon si era posible crear en la ficha de cada producto, un apartado donde el cliente pudiera ver una descripción de las tallas que podían adquirir.

En un principio pensamos en crear una página estática donde se incluyese la información de todos los productos, agrupada por familias (camiseta, jersey, pantalón, etc.), de forma que en la página de cada producto se incluiría un enlace que llevase al cliente a dicha página. Esta solución tenía el inconveniente de que sacaba al cliente de la página del producto que estaba visualizando, lo cual no es bueno para la venta, además de que a medida que fuese creciendo el catálogo de productos dicha página estática tendría una dimensión poco manejable.

Por tanto, coincidimos al final que lo más lógico y funcional era añadir una nueva pestaña en la página de cada producto, de forma que al crearlos pudiéramos incluir ahí la información de las tallas que se podían encontrar para ese producto.

La idea era genial, pero ¿cómo ejecutarla? PrestaShop por defecto incluye algunas pestañas en la página de cada producto, que contienen por ejemplo:

  • La descripción larga.
  • Las características que se han configurado en el apartado Funcionalidades.
  • Los comentarios aprobados que los clientes han enviado sobre el producto.

Investigando un poco sobre cómo añadir una nueva pestaña en la página de los productos de PrestaShop, encontré un artículo que me fue de mucha ayuda, concretamente en el blog de Jesús Redondo Ivars, en el cual me he basado para crear el tutorial que os comparto hoy.

He realizado varias modificaciones sobre su guía, haciendo overrides de archivos como la clase Product, en lugar de modificarla directamente como hacía Jesús, con lo cual evitamos perder los cambios si actualizamos PrestaShop, y añadiendo lo necesario para aquellas partes que han cambiado desde que publicó su artículo, ya que fue en 2014 y desde entonces ha habido varias actualizaciones de PrestaShop hasta su versión actual, la 1.6.1.6. Vamos al lío:

Paso 1. Preparamos la base de datos.

Comenzamos creando en la base de datos, dentro de la tabla #_product_lang, un campo para nuestra nueva pestaña. Lo llamamos como queramos, yo lo llamaré nueva_tab, y nos aseguramos de que tenga las mismas características que el campo “description” de esa misma tabla:

Estructura de la tabla product_langNuevo campo en la tabla product_lang

Paso 2. Override de la clase ProductCore.

Para que PrestaShop pueda procesar este nuevo campo, hay que añadirlo a la clase que se encarga de gestionar los productos (archivo “product.php”). Lo podemos encontrar en la ruta: Raíz_del_sitio/classes/. En lugar de modificar el archivo directamente, haremos un override de la clase, creando un nuevo archivo, “product.php” en la siguiente ruta: Raíz_del_sitio/override/classes/.

Este archivo debe contener una nueva clase que extienda a la original, añadiendo nuevas funcionalidades que la clase original no contiene y modificando las funciones que ya contiene pero cuyo comportamiento deseamos cambiar. Si esto os ha sonado a chino lo veréis más claro con el código que os dejo a continuación.

En primer lugar definimos la nueva clase (Product), que extiende a la original (ProductCore), además de declarar una variable para el nuevo campo que hemos creado en la base de datos:

Esta nueva variable debe quedar incluida dentro del array $definition, que es utilizado por PrestaShop para gestionar todos los campos relacionados con cada producto. Como este array ya es definido en la clase original, debemos reformularlo en esta nueva clase. Copiamos todo el código referente a dicho array y lo pegamos en la nueva clase, modificándolo para incluir la definición de nuestro nuevo campo:

Paso 3. Habilitar la gestión del nuevo contenido en el backend.

El siguiente paso será lograr que en la administración del catálogo de PrestaShop el nuevo campo sea visible en la página de los productos, de forma que podamos modificarlo a nuestro antojo. Para ello tenemos que modificar el archivo “informations.tpl” que se encuentra en la ruta: Raíz_del_sitio/adminXXX/themes/default/template/controllers/products/. Al igual que hicimos para la clase del paso anterior, no vamos a modificar directamente este archivo, sino que haremos otro override.

Copiamos el archivo “informations.tpl” en la siguiente ruta: Raíz_del_sitio/override/controllers/admin/templates/products/ y lo modificamos para añadir el código que permita la visualización del nuevo campo en la zona que queramos. Por ejemplo, para que aparezca a continuación del campo de la descripción, buscamos en el código dónde se ubica éste y dado que nuestro nuevo campo tendrá sus mismas características, podemos ayudarnos copiando ese código y duplicándolo, para a continuación modificar lo que sea necesario:

Nuestro nuevo campo será igual que el anterior pero con unas pequeñas modificaciones:

Si ahora nos vamos al apartado del Catálogo en la administración de nuestro PrestaShop y pinchamos en cualquier producto de los ya creados o añadimos uno nuevo, podremos ver como en el formulario que se presenta, aparece a continuación del campo para la descripción el nuevo que hemos creado, en el que podremos insertar lo que queramos en relación a la guía de tallas que pretendíamos:

Nuevo campo en la ficha de administración de los productos de PrestaShop

Paso 4. Modificar la vista de los productos.

Ya sólo nos queda el último paso. Que al visualizar un producto en la tienda nos aparezca la nueva pestaña con el contenido que hemos insertado. Para lograrlo, tenemos que modificar el archivo “tab.tpl” del tema que estemos utilizando en nuestro PrestaShop, el cual se encuentra en la siguiente ruta: Raíz_del_sitio/themes/nombre_del_tema/sub/product_info/.

En mi opinión, para modificar los archivos del tema evitando pérdidas futuras en caso de actualizarlo, es recomendable guardar una copia de los archivos que vayamos modificando, lo que nos permitirá también volver a su situación anterior en caso de que estropeemos algo. También es útil mantener un archivo adjunto donde anotemos las modificaciones que hemos ido realizando, a modo de historial. Creedme, os vendrá muy bien para futuras consultas.

Tenemos que añadir el código siguiente en el archivo “tab.tpl” para que se visualice la nueva pestaña:

Si en el paso nº 3 añadimos algún contenido en el nuevo campo para la guía de tallas (en el ejemplo que estoy mostrando incluí un poco de texto, pero podéis probar cualquier otra cosa como una imagen), ahora podremos comprobar en la tienda que la página del producto lo refleja correctamente:

Visualización de la nueva pestaña en la ficha del producto de PrestaShop

Si después de seguir todos los pasos del tutorial, cuando navegáis por la tienda no se visualiza la nueva pestaña en la página del producto, respirad hondo y revisad lo siguiente:

En la administración del Catálogo, comprobad que efectivamente para el producto que estáis visualizando habéis insertado contenido en el nuevo campo. Hasta que no haya contenido no aparecerá la nueva pestaña.

Revisad la configuración que tenéis establecida sobre el sistema de caché y el modo de Depuración de PrestaShop. Se encuentra en el apartado Parámetros Avanzados -> Rendimiento.

Con la activación de las opciones de caché conseguimos que el acceso a la tienda sea más rápido, ya que va guardando copia de los archivos que se consultan más a menudo al navegar por la web. Sin embargo, cuando estamos haciendo cambios significativos en el diseño, es posible que dichas opciones impidan ver de inmediato los cambios.

La opción “Forzar compilación” obliga al sistema a compilar de nuevo los archivos del tema que estamos utilizando (cuando la tienda esté operativa, recomiendo dejar esta opción en “Recompilar las plantillas cuando los archivos sean modificados”). Comprobad también que la opción “Inhabilitar las sobre-cargas” esté desactivada, ya que de lo contrario los overrides que estamos haciendo no funcionarán. Guardad los cambios.

Probad igualmente a eliminar todos los archivos de caché que haya creado el sistema pulsando el botón de la parte superior-derecha (Vaciar el caché).

Os recomiendo también que las opciones “Caché” en el bloque SMARTY y “Usar cache” en el bloque CACHE las tengáis desactivadas mientras estéis haciendo cambios en el diseño. Cuando la tienda esté operativa podéis volver a activarlas (al activar la opción “Caché” en el bloque SMARTY usa las opciones “Sistema de archivos” en Tipo de cache y “Limpiar la cache siempre que algo se haya modificado” en Vaciar el caché):

Apartado Rendimiento en la administración de PrestaShopOpción Caché de PrestaShop desactivada

Espero que el tutorial os haya servido de ayuda, y para cualquier duda o consulta tenéis el formulario de comentarios a vuestra disposición.

¡A PICAR TECLA!

17 comentarios sobre “Crear nueva pestaña en la página de productos de PrestaShop

    1. Muchas gracias por tu aporte, kukeorama.
      No he podido probar el módulo que comentas, pero tiene muy buena pinta todas las opciones que presenta, pestañas personalizadas ilimitadas, de fácil configuración, posibilidad de añadir múltiples contenidos, etc., y encima gratuito. En cuanto tenga tiempo lo probaré para echarle un vistazo personalmente.
      Para aquellos usuarios que no se atrevan a realizar modificaciones más profundas, son siempre bienvenidos los módulos. Como supongo te habrá pasado, nosotros los desarrolladores muchas veces preferimos bucear en el código y hacer nuestras propias personalizaciones, prescindiendo de cargar estas aplicaciones con más plugins y módulos. Todas son buenas opciones.
      Aprovecho también para felicitarte por la web, me encanta el diseño tan limpio y visual que tiene.
      Saludos.

  1. Hola.

    Estoy intentando implementar esto en mi prestashop 1.6 pero no logro dar con ello. He realizado todo el proceso pero cuando borro la caché, me da un error 500. He desecho los cambios para volver a recuperar la tienda, volviendo a los pasos desde el principio. La tabla en la bbdd todo correcto, se graba sin problemas. En el paso 2º no se realmente donde pegar el código (previo override)

    <?php

    class Product extends ProductCore
    {
    /** @var string nueva_tab */
    public $nueva_tab;
    }

    ¿Donde se posiciona dicho código? Este es el comienzo del Product.php:

    <?php
    /*
    * 2007-2015 PrestaShop
    *
    * NOTICE OF LICENSE
    *
    * This source file is subject to the Open Software License (OSL 3.0)
    * that is bundled with this package in the file LICENSE.txt.
    * It is also available through the world-wide-web at this URL:
    * http://opensource.org/licenses/osl-3.0.php
    * If you did not receive a copy of the license and are unable to
    * obtain it through the world-wide-web, please send an email
    * to license@prestashop.com so we can send you a copy immediately.
    *
    * DISCLAIMER
    *
    * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
    * versions in the future. If you wish to customize PrestaShop for your
    * needs please refer to http://www.prestashop.com for more information.
    *
    * @author PrestaShop SA
    * @copyright 2007-2015 PrestaShop SA
    * @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
    * International Registered Trademark & Property of PrestaShop SA
    */

    /**
    * @deprecated 1.5.0.1
    */
    define(‘_CUSTOMIZE_FILE_’, 0);
    /**
    * @deprecated 1.5.0.1
    */
    define(‘_CUSTOMIZE_TEXTFIELD_’, 1);

    class ProductCore extends ObjectModel
    {
    ***Y sigue debajo claro***

    Luego este código: ‘nueva_tab’ => array(‘type’ => self::TYPE_HTML, ‘lang’ => true, ‘validate’ => ‘isCleanHtml’),

    Lo pego después de:
    /* Lang fields */
    ‘meta_description’ => array(‘type’ => self::TYPE_STRING, ‘lang’ => true, ‘validate’ => ‘isGenericName’, ‘size’ => 255),
    ‘meta_keywords’ => array(‘type’ => self::TYPE_STRING, ‘lang’ => true, ‘validate’ => ‘isGenericName’, ‘size’ => 255),
    ‘meta_title’ => array(‘type’ => self::TYPE_STRING, ‘lang’ => true, ‘validate’ => ‘isGenericName’, ‘size’ => 128),
    ‘link_rewrite’ => array(
    ‘type’ => self::TYPE_STRING,
    ‘lang’ => true,
    ‘validate’ => ‘isLinkRewrite’,
    ‘required’ => true,
    ‘size’ => 128,
    ‘ws_modifier’ => array(
    ‘http_method’ => WebserviceRequest::HTTP_POST,
    ‘modifier’ => ‘modifierWsLinkRewrite’
    )
    ),
    ‘name’ => array(‘type’ => self::TYPE_STRING, ‘lang’ => true, ‘validate’ => ‘isCatalogName’, ‘required’ => true, ‘size’ => 128),
    ‘description’ => array(‘type’ => self::TYPE_HTML, ‘lang’ => true, ‘validate’ => ‘isCleanHtml’),
    ‘description_short’ => array(‘type’ => self::TYPE_HTML, ‘lang’ => true, ‘validate’ => ‘isCleanHtml’),
    ‘available_now’ => array(‘type’ => self::TYPE_STRING, ‘lang’ => true, ‘validate’ => ‘isGenericName’, ‘size’ => 255),
    ‘available_later’ => array(‘type’ => self::TYPE_STRING, ‘lang’ => true, ‘validate’ => ‘IsGenericName’, ‘size’ => 255),
    ),
    ‘associations’ => array(
    ‘manufacturer’ => array(‘type’ => self::HAS_ONE),
    ‘supplier’ => array(‘type’ => self::HAS_ONE),
    ‘default_category’ => array(‘type’ => self::HAS_ONE, ‘field’ => ‘id_category_default’, ‘object’ => ‘Category’),
    ‘tax_rules_group’ => array(‘type’ => self::HAS_ONE),
    ‘categories’ => array(‘type’ => self::HAS_MANY, ‘field’ => ‘id_category’, ‘object’ => ‘Category’, ‘association’ => ‘category_product’),
    ‘stock_availables’ => array(‘type’ => self::HAS_MANY, ‘field’ => ‘id_stock_available’, ‘object’ => ‘StockAvailable’, ‘association’ => ‘stock_availables’),
    ),

    **AQUÍ**

    Y desde aquí es donde me empieza a dar el error.

    Agradecería saber donde viene el problema.

    Muchas gracias y felices fiestas.

    1. Hola Jm, antes de nada, Feliz año nuevo!!

      Estaré encantado de ayudarte en todo lo que pueda.

      Según leo en tus dudas, creo no has entendido bien lo que explico en el paso nº 2. Me dices que no sabes dónde colocar el código que indico al principio, el que declara la clase Product, extendiendo la clase ProductCore. Ese código debe incluirse en un nuevo archivo, denominado “product.php”, que debes crear tú y ubicar en la ruta de overrides que indico. Esto debe ser así para no “estropear” los archivos originales de PrestaShop, que además pueden resetear todas las modificaciones que les hagas cuando haya alguna actualización.

      Por ello además, el código que indico a continuación, el que define la nueva variable $nueva_tab, debes insertarlo dentro de la clase que habrás creado con ese nuevo archivo que te comento, no dentro del archivo original product.php, que es lo que intuyo estás haciendo según lo que me muestras. Como explico, debes copiar entero del archivo original la declaración del array $definition, y seguidamente después del comentario /* Lang fields */, definir tu nuevo campo como lo indico en el código.

      El problema que estás teniendo es que no has seguido el procedimiento de crear un nuevo archivo para hacer el override, y tampoco estás sobrescribiendo el array $definition correctamente.

      Échale un vistazo y me comentas.
      Saludos.

  2. Hola Javier, he encontrado tu guía y me parece bastante bien explicada pero antes de ponerme al lío me gustaría saber si es posible asociar la pestaña creada a una determinada categoría (para que sólo salga en los productos incluidos dentro de esta categoría) o siempre va a salir en todos y cada uno de los productos.

    Un saludo !

    1. Hola Rubén, muchas gracias por tus comentarios.
      Siguiendo este tutorial conseguirás añadir nuevas pestañas que, dentro de la administración de los productos de PrestaShop, aparecerán para todos los artículos que tengas. Eso sí, si no les añades contenido, dichas pestañas no aparecerán a la hora de visualizar los productos cuando visitas la web de la tienda, no sé si esto es exactamente lo que buscas.

      Para el caso de que quisieras que una nueva pestaña sólo estuviera disponible en la administración de los productos que pertenezcan a una determinada categoría, es posible que se pueda hacer ahondando un poco más en el código de la vista de la gestión de productos, el archivo “informations.tpl”, poniendo un condicional para mostrar o no el código que añadimos en el paso 3. Ese condicional debería comprobar si el producto pertenece a la categoría para la que nos interesa mostrar el campo en el que añadir el contenido para la nueva pestaña.
      Si es la segunda opción que explico lo que buscas, le echamos un vistazo a ver cómo se puede poner en marcha exactamente.
      Saludos.

      1. Gracias por tu respuesta Javier, creo que con la primera opción que comentas está bien (soy un poco nuevo en Prestashop y no había caído en que si no contiene información ese campo no se va a mostrar) aunque si me gustaría que el título de esa pestaña se pudiera editar para que sea diferente en determinados productos. ¿ Cómo se puede conseguir esto ?

        Un saludo y muchas gracias por compartir esta información :).

        1. Hola, Rubén.

          Suena muy interesante lo que planteas.
          Para que el título de la pestaña fuera diferente para determinados productos, en primer lugar habría que plantear en base a qué criterio concreto se establecería unos valores u otros.
          Después, con condicionales, un switch, etc., según prefieras, tendrías que establecer los diferentes títulos de la pestaña en el código que explico en el paso 4, dentro del archivo de la vista “tab.tpl”, en función de los valores que vaya presentando el criterio que has escogido. Me explico con un ejemplo simple:

          1º) Decido que el título de la nueva pestaña dependerá de la categoría por defecto a la que pertenece el producto que se está visualizando (mi criterio).
          2º) Decido que por ejemplo, si el producto pertenece a la categoría por defecto “Blusas”, cuyo id es el 7 (esto lo puedes ver en el menú Catálogo, apartado Categorías), el título de la pestaña sería “Tallas para blusas”. Para los productos de otras categorías seguiría titulándose “Guía de tallas”.
          3º) Lo verifico con el siguiente código en sustitución del que coloco al principio del paso 4, dentro del enlace que defino para la nueva pestaña:

          {if $product->id_category_default == 7}
          {l s=’Guía de Tallas para Blusas’}
          {else}
          {l s=’Guía de Tallas’}
          {/if}

          De ese modo, el título de la pestaña para los artículos sería diferente en función de la categoría por defecto que le hayamos definido.
          Las posibilidades son múltiples, todo depende del criterio que escojas, como te comenté, el cual tendrás que filtrar para mostrar el título que convenga.

          Saludos.

        2. No me deja responder a tu última respuesta, gracias por la información. Pensaré como lo organizo y cuando haga las modificaciones pondré el resultado por aquí :).

          Un saludo !

  3. Hola Javier,

    Gracias por la información, justo estaba buscando esto. He encontrado un módulo gratuito que lo hace, pero prefiero hacerlo a través de código.

    Otro punto que me gustaría añadir a la ficha de producto es una “sección” justo antes ésta que ponga más productos y que enlace a la categoría principal del producto, la marca y quizá otra más.

    No he encontrado mucha información al respecto. Creo que se debe crear páginas cms que serán las que se muestren en la sección que he comentado antes.

    Saludos

    1. Hola César, muchas gracias por aportar tus comentarios.
      Me alegra leer que te ha servido de ayuda el tutorial para hacer por ti mismo la creación de nuevas pestañas para las fichas de productos en PrestaShop.
      Respecto a lo que comentas sobre una nueva sección, no acabo de entender muy bien el planteamiento. ¿Te refieres a añadir para la vista de producto un área nueva con más contenido personalizado?
      En ese caso, ¿cuál sería el contenido a mostrar concretamente? Acláramelo más detalladamente a ver si podemos encontrar una solución.
      Saludos.

  4. Muchas gracias por tu tutorial! Me ha ayudado, pero creo que me quedó faltando algo o lo hice mal en alguna parte. El contenido que coloco escrito no queda en la parte de abajo, donde se supone que van los contenidos de las pestañas, sino que queda al lado de la misma (como en en la fila de las pestañas).

    1. Muchas gracias a tí, Claudio, por comentar tu experiencia, me alegro de que el tutorial te haya resultado de ayuda, aunque aún no hayas conseguido los resultados deseados.
      En primer lugar pedirte disculpas por responderte tan tarde, pero he tenido un periodo sin poder echar un vistazo al blog y encima he tenido que gestionar mogollón de mensajes de spam que llenaban la bandeja de comentarios pendientes. Ya creo que lo he solucionado de cara al futuro poder responder más rápido.
      ¿Podrías compartir una imagen de cómo te ha quedado? Es que no visualizo muy bien lo que me comentas. En algún paso debes haber incluido el código de manera incorrecta o algo, porque hace unos días he actualizado un Prestashop que estoy gestionando a su última versión, que incorpora bastantes cambios a nivel de código interno, y aunque me temía que todo esto sobre añadir pestañas iba a dejar de funcionar por ello, sigue todo perfectamente OK.
      Saludos.

      1. Hola Javier! Muchas gracias por la atención en tu respuesta. Si, al final pude lograrlo, me fijé que estaba colocando algo mal. Pero lo tuve que hacer a la “fuerza” desde los archivos originales, con los overrides nunca me pudo funcionar. Quizá por falta de experiencia con ellos. No se como llamarlos o ligarlos para sobreescribir la información. Del resto, si ha funcionado.

        1. Hola, Claudio.
          Me alegro que te haya funcionado finalmente.
          Sin embargo, te recomiendo que insistas con el tema de los overrides, ya que si actualizas la versión de PrestaShop (algo recomendable y necesario), acabarás perdiendo los cambios que has realizado en esos archivos originales del núcleo de PrestaShop, pues los va a machacar con los nuevos.
          Yo recuerdo que a mí en su día también me dió problemas cuando lo hice con los overrides, ya que originalmente también lo hice como tú, modificando los archivos originales, pero creo que finalmente lo arreglé al verificar lo que explico en el tutorial sobre el sistema de caché y el modo de depuración de PrestaShop, que estaba evitando visualizar los cambios que hacía.
          Échale un vistazo de nuevo, y si tienes cualquier duda aquí estoy para ayudarte en lo que pueda.
          Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.