Crear nuevo campo pestaña producto prestashop

Hoy me ha surgido el reto de añadir una pestaña nueva en la ficha de producto de un prestashop, con el objeto de mostrar una imagen, en este caso se trata de un pequeño mapa, pero el ejemplo nos puede servir para cualquier contenido de tipo HTML que queramos añadir como una campo nuevo en la ficha de producto.

Lo primero que debemos hacer es decidir el nombre que queremos asignar a nuestro nuevo campo, en este caso será “mapa_ruta”.

Una vez hecho esto, crearemos ese nuevo campo en nuestra base de datos MySQL, en la tabla ps_product_lang, con las mismas características que tendría el campo “description”:

Lo siguiente que debemos hacer es declarar ese nuevo campo en el núcleo de prestashop, para ello debemos editar el archivo classes/product.php, buscando la linea “class ProductCore extends ObjectModel { “ e incluyendo el siguiente código dentro de la llave:

class ProductCore extends ObjectModel
{
/** variable mapa en ficha producto */
public $mapa_ruta;

A continuación hemos de introducir la definición del nuevo campo en este mismo fichero, en el array “public static $definition = array( “, dentro del paréntesis en la sección donde están el resto de variables de la tabla ps_product_lang, usaremos los mismos valores que el campo “description”:

/* Lang fields */
'mapa_ruta' =>                     array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'),
'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),
'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),

Ahora hemos de hacer visible este campo en el backoffice, para lo cual hemos de acudir al fichero adminXXXX/themes/default/template/controllers/products/informations.tpl y buscar el sitio adecuado para mostrar nuestro campo, por ejemplo por debajo del campo description en el editor de las fichas de producto de prestashop, para ello duplicaremos el código del campo description que es este:


<tr>
<td class="col-left">
{include file="controllers/products/multishop/checkbox.tpl" field="description" type="tinymce" multilang="true"}
<label>{l s='Description:'}<br /></label>
<p class="product_description">({l s='Appears in the body of the product page'})</p>
</td>
<td style="padding-bottom:5px;">
{include file="controllers/products/textarea_lang.tpl" languages=$languages
input_name='description'
input_value=$product->description
}
<p class="clear"></p>
</td>
</tr>

Sustituyendo el campo “description” por nuestro campo “mapa_ruta” y duplicándolo:


<tr>
<td class="col-left">
{include file="controllers/products/multishop/checkbox.tpl" field="description" type="tinymce" multilang="true"}
<label>{l s='Mapa Ruta:'}<br /></label>
<p class="product_description">({l s='Appears in the body of the product page'})</p>
</td>
<td style="padding-bottom:5px;">
{include file="controllers/products/textarea_lang.tpl" languages=$languages
input_name='mapa_ruta'
input_value=$product->mapa_ruta
}
<p class="clear"></p>
</td>
</tr>

De esta forma, si váis a hora a vuestro backoffice de prestashop, veréis que el campo se ha creado en el formulario de edición, en la pestaña de información.

Finalmente hemos de irnos a la plantilla product.tpl del tema que estemos usando para mostrar la información del nuevo campo en las pestañas de información adicional, añadiendo las líneas :

{if $product->mapa_ruta}<li><a id="more_info_tab_more_info" href="#idTab11">{l s='Mapa Ruta'}</a></li>{/if}

y la línea :

<!-- Contenido de mapa de ruta -->
<div id="idTab11" class="rte">{$product->mapa_ruta}</div>

En la siguiente parte del código de product.tpl:

<!-- description and features -->
{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}
<div id="more_info_block" class="block clear">
	<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
		{if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
		{if $product->mapa_ruta}<li><a id="more_info_tab_more_info" href="#idTab11">{l s='Mapa Ruta'}</a></li>{/if}
		{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
		{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
		{if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
		{if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
		{$HOOK_PRODUCT_TAB}
	</ul>
	<div id="more_info_sheets" class="sheets align_justify">
	{if isset($product) && $product->description}
		<!-- full description -->
		<div id="idTab1" class="rte">{$product->description}</div>
		<!-- Contenido de mapa de ruta -->
		<div id="idTab11" class="rte">{$product->mapa_ruta}</div>
	{/if}

Tened en cuenta que el contenido HTML del nuevo campo sólo se mostrará si existe contenido.

Espero que os haya gustado, os recomiendo que las pruebas con todo esto lo hagáis en local o en un servidor de prueba y que si tenéis la tienda en producción hagáis copia de seguridad de los archivos que estamso manejando al menos y de la base de datos.

¡Comparte esto!
Diseño web

3 comments


  1. David Angel Caravaca

    Hola buenas tardes, llevo dias intentando añadir un campo extra en prestashop 1.6, pero al momento de modificar el producto y actualizar me da error por reglas del Mod security del servidor.

  2. francisco herreros

    Hola

    lo primero agradecerte el esfuerzo y la dedicacion en hacer es tutorial,

    lo he probado y funciona bien en la version 1.5 pero no en la version 1.6

    queria preguntarte si me ayudas a actualizar este tutorial a la 1.6.

    he intentado pero en 2 puntos han cambiado mucho las cosas en las versiones, y no es igual que en tu tutorial.

    saludos y gracias de antemano

  3. Jorge

    El mejor tutorial de prestashop que he visto hasta el momento. Muy útil para incorporar todo tipo de pestañas de manera rápida y sencilla.

Deja un comentario

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

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current month ye@r day *