Cómo añadir campos a ficha de productos Prestashop

Esta puede ser una de las entradas que antes o después utilizaremos, sobre todo para aquellos que tienen algún e-commerce con prestashop o tienen pensado crear uno. Más adelante iré detallando paso por paso, todo los archivos y datos que tenemos que modificar para aprender Cómo añadir campos a ficha de productos Prestashop, y no solo para que aparezcan en la ficha de producto, sino que también haremos un “extra” y conseguiremos que ésos campos también se encuentren disponible para realizar la importación masiva de productos por csv.

Es un poco lioso al principio y sobre todo para aquellos que no dominan mucho la estructura de ficheros que presenta prestashop, pero os prometo, que intentaré explicarlo de la forma más gráfica y sencilla posible.

Éste tutorial o post sobre cómo añadir campos a ficha de productos Prestashop, será uno de los puntos de partida para modificar vuestro tema prestashop y adaptarla la ficha de vuestros productos a las características que consideréis oportunas.

Cursos Gratis Online para aprender de todo

Yo, en éste tutorial, voy a mostrar como insertar dos campos en la ficha de productos de vuestra plantilla prestashop. Estos campos aparecerán al lado de la descripción, pero si queremos también podemos hacer que éste se muestre al lado de las descripción corta, eso ya como ustedes prefieran.

Bueno, tener paciencia y ánimo que ya vamos al lío.

Cómo añadir campos a ficha de productos Prestashop

Para comenzar, lo primero a realizar (siempre que nos pongamos a toquetear algo) es una copia de seguridad de la base de datos, y por supuesto otra de los archivos para el caso de que destrocemos algo siempre será más fácil reemplazar que tirarnos de los pelos.

17 Plantillas Curriculum Vitae Creativo
Tabla de contenidos
  1. Abrir directorio Prestashop con Editor de Textos
  2. Crear variables
  3. Crear cuadros de texto
  4. Crear campos en Base de Datos
  5. Crear variables para mostrar

Abrir directorio Prestashop con Editor de Textos

Yo particularmente, utilizo entre otros, el editor de textos Sublime Text3, que por si no lo habéis oido, es uno de los más utilizados por los programadores de todo el mundo. Como éste no es momento para explicar su grandeza, para los que estén interesados, publiqué algunos articulos muy interesantes como:

Sublime Text, Puesta a Punto con los Mejores Plugins

Editores de Texto, Conoces los 10 Mejores?

Los 21 mejores bancos de imágenes gratuitas [actualizado 2019]

Para quienes les interese. Para los que no... pues seguimos.

Abrimos nuestro directorio con sublime para poder trabajar más cómodamente ya que tendremos que modificar algunos archivos.

cómo añadir campos a ficha de productos Prestashop 1 1

7 Pasos de Éxito para Crear Infografias

[padding left="5%" right="5%"]

Como podemos ver, desde el menú lateral, podremos acceder fácilmente a todos los archivos que vamos a necesitar modificar. (Tranquilos que no son tantos).

Crear variables

Para ello tenemos que añadir tantas variables como campos queramos mostrar en la ficha de productos prestashop. Abrimos el archivo classes/Product.php y buscamos la variable $description para crear justo debajo de ella la nuestra con el nombre que deseemos.

11 Programas para grabar pantalla

como añadir campos a ficha de productos Prestashop 2 1

cómo añadir campos a ficha de productos Prestashop 3 1

Yo he creado dos variables como habéis podido ver en la imagen anterior. Podréis crear tantas como necesitéis.

Cual es el mejor navegador de internet? En 2016

Una vez creadas, tenemos que añadir éstas variables $tecnologia, $caracteristica al array para poder almacenar sus valores en la base de datos de nuestro prestashop. Buscaremos por ejemplo la variable $description y  colocaremos las nuestras debajo de ésta, sustituyendo el nombre por el nuestro, no cambiaremos nada mas.

'description' =>                array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'),

Copiamos y sustituimos por nuestras variables, quedaría así:

'tecnologia' =>                array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'),
            'caracteristica' =>                array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'),

Con esto ya bastaría los cambios a realizar en éste archivo, aunque si queremos podemos añadir nuestras nuevas variables en las diferentes consultas del archivo. Por ejemplo podemos continuar buscando la variable $description y donde ésta aparezca, añadimos las nuestras, así con todas las búsquedas. Por ejemplo como podemos ver en el siguiente código con las variables ya añadidas:

Editores de Texto, Conoces los 10 Mejores?
$sql = new DbQuery();
        $sql->select(
            'p.*, product_shop.*, stock.out_of_stock, IFNULL(stock.quantity, 0) as quantity, pl.`description`, pl.`description_short`, pl.`tecnologia`, pl.`caracteristica`, 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'
        );

Cuando terminemos de realizar éstos cambios, ya podremos decir que tenemos el 33% superado de nuestro tutorial para añadir campos personalizados en prestashop.

Crear cuadros de texto

En éste punto vamos a crear los cuadros de texto para poder añadir contenido a las variables que hemos creado anteriormente, mas bien lo que vamos a realizar es crear los campos texto para poder introducir los valores a nuestra ficha de producto.

cómo añadir campos a ficha de productos Prestashop 4 1

Así sería como quedaría nuestra ficha de producto para poder insertar los datos que necesitemos. Os gusta verdad? A que es justamente lo que estabais buscando? Pues vamos a ello.

Tenemos que localizar el archivo informations.tpl , en el que para la versión Prestashop 1.6 se encuentra en: adminFolder/themes/default/template/controllers/products/informations.tpl

Aquí nos vamos a encontrar con los formularios que hemos visto en la imagen anterior, para ello, vamos a crear los dos que nos faltan, los de nuestras variables  $tecnologia, $caracteristica. 

Buscamos la variable $description como en pasos anteriores para localizar el código que vamos a copiar, como podemos ver a continuación:

<div class="form-group">
		<div class="col-lg-1"><span class="pull-right">{include file="controllers/products/multishop/checkbox.tpl" field="description" type="tinymce" multilang="true"}</span></div>
		<label class="control-label col-lg-2" for="description_{$id_lang}">
			<span class="label-tooltip" data-toggle="tooltip"
				title="{l s='Appears in the body of the product page.'}">
				{l s='Description'}
			</span>
		</label>
		<div class="col-lg-9">
			{include
				file="controllers/products/textarea_lang.tpl"
				languages=$languages input_name='description'
				class="autoload_rte"
				input_value=$product->description}
		</div>
	</div>

Éste será el código que copiemos y peguemos justo debajo del </div> último como podemos observar y que modifiquemos con nuestras variables, Tal cual podemos observar por ejemplo para la variable $tecnologia:

<div class="form-group">
		<div class="col-lg-1"><span class="pull-right">{include file="controllers/products/multishop/checkbox.tpl" field="tecnologia" type="tinymce" multilang="true"}</span></div>
		<label class="control-label col-lg-2" for="tecnologia_{$id_lang}">
			<span class="label-tooltip" data-toggle="tooltip"
				title="{l s='Appears in the body of the product page.'}">
				{l s='Tecnologia'}
			</span>
		</label>
		<div class="col-lg-9">
			{include
				file="controllers/products/textarea_lang.tpl"
				languages=$languages input_name='tecnologia'
				class="autoload_rte"
				input_value=$product->tecnologia}
		</div>
	</div>

Y éstos mismos pasos para cada variable.

Con la realización de éste sencillo paso, ya tenemos el 50% de cómo añadir campos a ficha de productos prestashop?. Pues ya sabes más de la mitad de como hacerlo.

Está siendo más fácil de lo que en principio parecía a que si? Pues ánimo que esto ya está casi.

Crear campos en Base de Datos

Pues si, éste es el último punto para tener listo nuestro campo en la ficha de productos prestashop, ahora sólo tenemos que acceder a la base de datos de nuestro e-commerce. Para ello bastará con buscar la tabla product_lang. Os voy a mostrar una captura para que la localicéis más fácilmente.

cómo añadir campos a ficha de productos Prestashop 5 1

Una vez localizada la tabla, hacemos clic en estructura y nos situamos en la parte de abajo para añadir los campos que necesitemos y seleccionemos detrás de que campos los queremos colocar (aunque ésto no es importante, da igual donde los coloquemos). Yo voy a crear dos campos y los colocaré detrás de description_short y pulsamos en continuar.

cómo añadir campos a ficha de productos Prestashop 6 1

Rellenamos los campos con el nombre de nuestras variables, en el tipo de campo si va a ser texto añadiremos texto, igual que para el campo descripción, y los demás valores los podéis dejar así para no complicar más, aunque muy importante marcar el 'checkbox Nulo', para que permita valores vacíos, es decir; puede que para algunos productos no necesitemos mostrar exclusivamente datos para esa variable, si aceptamos valores nulos cuando no guardemos nada, no mostrará ése campo en nuestro producto.

cómo añadir campos a ficha de productos Prestashop 7 1

Guardamos y si todo ha ido bien, ya los tendremos creados. Como podemos ver en la siguiente imagen.

cómo añadir campos a ficha de productos Prestashop 8 1

Pues ya casi hemos llegado al final, ahora ya podeis añadir datos a vuestros campos recién creados y que éstos se muestren en vuestra ficha de producto, aunque todavía nos queda un último paso, también muy importante para poder mostrar ésas pestañas en nuestros productos.

Crear variables para mostrar

En éste último punto, es donde vamos a crear las variables como en los pasos anteriores. Ésta modificación trata de abrir el archivo product.tpl de vuestro tema elegido y añadir las variables como en pasos anteriores.

Buscaremos como ya hemos realizado varias veces la variable $product->description y copiaremos y modificaremos por los nombres de las nuestras.

Muy importante cambiar el href="#idTab1" de vuestro nuevo código porque si no, la pestaña os abrirá siempre ésa dirección.

Una vez realizado éstos cambios, todo ha de funcionar correctamente.

 

Así sería como os quedaría una vez añadido datos en los campos creados:

cómo añadir campos a ficha de productos Prestashop 9 1

Os gusta el resultado verdad? Pues espero que os sirva de ayuda y personalicéis al máximo vuestro prestashop, sobre todo para que quede a vuestro gusto.

Ahora sí, os pido un último esfuerzo: agradecería que lo compartiérais y comentárais que os ha parecido éste pequeño tutorial sobre Cómo añadir campos a ficha de productos Prestashop.

Pero esperar un momento que todavía podemos mejorar éste artículo, éso si, para aquellos que realmente tengan ganas de terminar un trabajo bien hecho.

Vamos a crear los mismos campos, pero ahora para que podamos importarlos directamente en nuestros productos a través de Parámetros Avanzados - CSV Import

Bonus - Añadir campos a CSV Import

Como he escrito hace un momento, si realizáis éste punto, vais a poder importar vuestros nuevos campos directamente en csv Import. No os parece genial? Pues vamos a ello.

Lo que estamos buscando es que cuando importemos Productos, nos aparezcan los nuevos campos que hemos creado anteriormente Tecnología y Características como Campos Disponibles para importar en la ficha de nuestros productos.

cómo añadir campos a ficha de productos Prestashop 10 1

El archivo a modificar lo podemos encontrar en: controllers/admin/AdminImportController.php

Buscamos como en otros casos anteriores: 'description' , copiamos el campo.

'description' => array('AdminImportController', 'createMultiLangField'),

y pegamos sustituyendo las variables.

'tecnologia' => array('AdminImportController', 'createMultiLangField'),
        'caracteristica' => array('AdminImportController', 'createMultiLangField'),

Realizaremos la misma operación para todos los arrays donde aparezca la variable description.

cómo añadir campos a ficha de productos Prestashop 11 1

Si todo lo hemos realizado correctamente, ya podemos importar productos csv con los nuevos campos, mirar un ejemplo:

cómo añadir campos a ficha de productos Prestashop 12 1

Seguro que os gusta el resultado. En caso afirmativo os agradecería que dejarais algún comentario y compartierais éste tutorial en vuestras redes sociales, ya que me gustaría que el artículo Cómo añadir campos a ficha de productos Prestashop ayudara a la mayor gente posible, porque con ese fin lo he creado.

Si quieres conocer otros artículos parecidos a Cómo añadir campos a ficha de productos Prestashop puedes visitar la categoría Recursos.

  1. AndreaP dice:

    Excelente tutorial, Juan Carlos.
    Completo y perfectamente explicado, pues a pesar de no tener conocimientos de programación, me ha resultado muy fácil seguir los pasos. También es verdad que el ejemplo ayuda mucho 🙂
    Gracias por compartir contenido de calidad!

    1. jcarlos dice:

      Gracias Andrea, me alegro que te haya gustado y sobre todo servido. Ése es el motivo por el que publico artículos de vez en cuando, para que le sirva a quien lo necesite. Si tienes alguna duda y puedo ayudarte, no dudes en preguntar.

      Saludos

  2. Olga dice:

    ¡Muchas gracias!
    Conseguí lo quería y, con tus indicaciones, a la primera, ¡un lujo!

    1. jcarlos dice:

      Me alegro que te haya servido. Gracias a ti por el comentario. Saludos

  3. Robert dice:

    todo ok, pero tengo problemas en la parte de: Crear variables para mostrar.
    Se me visualiza en el administrador, me lo guarda. pero no se me muestra en el producto. por cierto en mi tema no esta lo del: href=”#idTab1 No se si podrias explicar ese paso.. gracias por todo eres un crack

    1. jcarlos dice:

      Hola Robert, no entiendo bien cual es el problema, si quieres envíame una captura haber si te puedo ayudar. Gracias

      1. robert dice:

        Hola buenas,
        Esta todo super bien explicado y todo ok, el problema lo tengo que no se me visualiza el nuevo campo en las paginas de los productos.
        Si en el administrador, si en la base de datos, pero no en las paginas de los productos.

        1. jcarlos dice:

          Vale Robert, creo que se donde tienes el problema. Te falta un paso para mostrar el nuevo campo. Como creo que no encuentras la referencia del tab(href="#home") puede que tengas que buscar en algun archivo .tpl como productdetail-full.tpl la clase

          en la cual se muestran todos los if para los tab de la ficha de productos. En conclusión, tienes todos los pasos perfectamente realizados a falta de mostrarlo en la vista de características del producto. En cuanto localizes el archivo en cuestíón, verás como el paso a realizar es muy simple.
          Si por lo que fuera todavía no lo consiguieras, vuelve a escribirme haber como te puedo ayudar. Saludos.
          1. robert dice:

            Hola buenas, no me sale ese archivo. El tema que utilizo es el de loverly. Estoy desesperado porque he perdido muchos dias en ello y no avanzo.. gracias por vuestra ayuda

          2. jcarlos dice:

            No te desesperes, prueba buscando en algún archivo de los que has citado anteriormente. El tema que citas no lo conozco, pero debe de ser igual el que sea. Puede que lo tengas en product-list. Sólo te falta ésoj para mostrarlo en la vista, con lo que tienes que estar muy cerca.

            Hablamos.

    2. Claudio dice:

      es posible que no haya declarado las variable como publica, casualmente me pasó algo muy similar, la segunda vez tal vez por confianza se me pasó por alto ese detalle y no me mostraba una de las pestañas, cuando chequee todo en el archivo classes/Product.php, me faltó crear el public de una de las variables, espero esto pueda ayudarte con tu problema…

      y con relación a la pestaña “href=”#idTab1” busca con las herramientas del Chrome como se llaman esas pestañas y después las buscas en el archivo product.tpl de tu plantilla para que verifiques como se llama las pestañas y en ese caso no le coloques “href=”#idTab1” le colocas el id que tiene esa plantilla.

  4. Claudio dice:

    Saludos, ya he aplicado dos veces este procedimiento y todo excelente, muchísimas gracias por tu aporte…

    1. jcarlos dice:

      Gracias a tí Claudio, me alegra que te sirva. Saludos

  5. Una sola palabra puede escribir este procedimiento "EXCELENTE", el proceso bien explicado, aunque, te falta pulir la parte de la escritura de líneas en el archivo "product.tpl" que no es tan difícil, sin embargo si sería complementario para tu tutorial.

    Muchas gracias por todo, me he demorado como 2 horas en implementar todo, si deseas verlo, lo podrás hacer en Flores 247.com que lo sacaremos al aire en unos días.

    1. jcarlos dice:

      Gracias a ti, en unos días me paso por vuestra tienda. Saludos

  6. Adrián dice:

    Hola! Estoy en la versión 1.7.4.3. Todo funciona bien menos el último paso. Me aparece en el backoffice la nueva pestaña y puedo añadir información sin problema. El problema es que cuando voy a product.tpl para que aparezca en el frontend no encuentro ninguna variable:
    $product->description

    Por lo tanto no puedo cambiar:
    href=»#idTab1″

    Estoy probando distintas opciones con las posibilidades que veo pero de momento no lo consigo. Si sabes algo y puedes ayudarme te lo agradeceria.

    Gracias

    1. Adrián dice:

      La única diferencia con 1.7.4.3 es que el archivo information.tpl se encuentra en:
      /src/PrestaShopBundle/Form/Admin/Product/productInformation.php

      Por lo demás todo igual. Lo único el paso final que tampoco encuentro esa variable.

      1. Adrián dice:

        He intentado a añadir esa parte seleccionada justo debajo de la selección y me aparece la pestaña pero no hace nada. Aparece como seleccionada y la información no se puede leer.
        https://i.ibb.co/zV502Rz/1.png

        PD: Voy añadiendo respuestas por si ayuda a que me entiendas mejor :p

        1. Adrián dice:

          He conseguido que se me vean las dos pestañas activas a la vez.

          Y me aparece la información de las 2 pestañas a la vez también, una debajo de otra.

          Ahora a ver si consigo que se vea por separado, cada uno en su pestaña.

          1. Juan Carlos dice:

            Hola Adrián, he estado de viaje y no he podido responderle antes. El post yo lo hice para la versión 1.6 de prestashop, pero si me comenta en que situación se encuentra ahora, podría ayudarle aunque se tratara de la 1.7. Gracias

  7. ITOIZ dice:

    DESGRACIADAMENTE HE CONOCIDO ESTE FABULOS ARITUCLO 4 AÑOS DESPUES Y CUANDO LLEGAS AL SEGUNDO PUNTO EDITAR CUADROS DE TEXTO Y SOBRE TODO AQUI
    en: adminFolder/themes/default/template/controllers/products/informations.tpl
    YA DIVERGE Y NO PUEDO LLEVARLO A LA PRACTICA
    pODRIAS ACTUALIZARLO A LA VERSION 1,7.6
    SI USAS LA PLATILLA WAREHOUSE DIFIERE EN ALGO?

    1. Juan Carlos dice:

      Voy a hacer un tutorial para esa versión y la publico. Gracias.

Go up

Usamos cookies para mejorar su experiencia de navegación, mostrarle anuncios o contenidos personalizados y analizar nuestro tráfico. Al hacer clic en “Aceptar” usted da su consentimiento a nuestro uso de las cookies Mas info