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.
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.
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?
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.
[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.
Yo he creado dos variables como habéis podido ver en la imagen anterior. Podréis crear tantas como necesitéis.
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:
$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.
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.
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.
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.
Guardamos y si todo ha ido bien, ya los tendremos creados. Como podemos ver en la siguiente imagen.
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:
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.
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.
Si todo lo hemos realizado correctamente, ya podemos importar productos csv con los nuevos campos, mirar un ejemplo:
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.
-
-
¡Muchas gracias!
Conseguí lo quería y, con tus indicaciones, a la primera, ¡un lujo! -
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-
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.
-
-
Saludos, ya he aplicado dos veces este procedimiento y todo excelente, muchísimas gracias por tu aporte…
-
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.
-
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->descriptionPor 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
-
La única diferencia con 1.7.4.3 es que el archivo information.tpl se encuentra en:
/src/PrestaShopBundle/Form/Admin/Product/productInformation.phpPor lo demás todo igual. Lo único el paso final que tampoco encuentro esa variable.
-
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.pngPD: Voy añadiendo respuestas por si ayuda a que me entiendas mejor :p
-
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.
-
-
-
-
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?
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!