Revista Comunicación

Crear nuevo campo pestaña producto prestashop

Publicado el 19 mayo 2014 por Jesusredondoiva

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.


Volver a la Portada de Logo Paperblog