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.

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.

Juan Carlos

¡Hej, hola! Soy un apasionado del mundo digital. En mi blog, descubrirás consejos de SEO para destacar en los motores de búsqueda, trucos de diseño web para crear sitios increíbles y recursos útiles para potenciar tu presencia en línea. ¡Acompáñame en este viaje lleno de conocimiento y éxito digital!