Añadir botones de categoría, subcate y nombre de producto a la ficha de producto --SOLUCIONADO

[guelu]

Buenas amigos

 

Estoy intentando añadir unos botones en la ficha de producto de manera que dentro de cada ficha de producto me aparezcan un botón con la categoría padre, otro con la subcategoría a la que pertenece y otro con el nombre del producto tal y como podeis ver en la web de promofarma, adjunto imagen.

 

Por ahora, modificando el product.tpl y basándome en el código de las migas de pan he conseguido este código:

<div> 
	<div class="sf-menu clearfix menu-content sf-js-enabled sf-arrows">
	<a class="home" href="{$base_dir}" title="{l s='Return to Home'}"></a>
	{if isset($path) AND $path}
		<span class="navigation-pipe" {if isset($category) && isset($category->id_category) && $category->id_category == 1}style="display:none;"{/if}>{$navigationPipe|escape:'html':'UTF-8'}</span>
		{if !$path|strpos:'span'}
			<span class="navigation_page">{$path}</span>
		{else}
			{$path}
		{/if}
	{/if}
</div>
					
					</div>

El problema es que me aparece sin formato, es decir, aparece tal como :

 

categoría padre > categoría hija > nombre producto

 

y no consigo que aparezca como botones tal y como se ve en la imagen....

 

Alguna ayuda, sugerencia?

Gracias!

 

Edited August 28, 2016 by guelu (see edit history)

[ventura]

Para que se muestre como en la captura tienes que añadir clases y estillos css, algo asi el product.tpl

<div class="cat-links-content">
{if isset($path) AND $path}{$path}{/if}
</div>

Y luego en el global.css o archivo css principal de la plantilla que este utilizando, añade algo asi

.cat-links-content {
    margin: 25px 0;
}

.cat-links-content a {
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin: 0 10px 10px 10px;
}
.cat-links-content .navigation-pipe {
    display: none;
}

[guelu]

Muchas gracias Ventura

Voy a probarlo ahora mismo y te comento!!

[guelu]

Hola ventura,

efectivamente eres un MAKINA!!

vamos en el buen camino, pero me gustaría que el nombre del producto no apareciera y que si lo hiciera la marca

[guelu]

Sigo con este tema,

 

Gracias al código de Ventura he avanzado bastante. Ya he conseguido poner también la marca con este código:

<div class="p-marcas">
	{$product->manufacturer_name|escape:'htmlall':'UTF-8'}
</div>

El problema es que aunque en los css he definido esta clase p-marcas como :

.p-marcas {
    margin: 25px 0;
}
.p-marcas a {
    border: 1px solid #ccc;
    padding: 8px 8px;
    margin: 0 10px 10px 0px;
    display: block;
}
.p-marcas .navigation-pipe {
    display: none;
}

la marca (CATTIER) no aparece con un recuadro como la categoría y la sub categoría.

 

Además, me gustaría quitar el nombre del producto, ya que no me es necesario.

 

Ahora mismo se ve como en la imagen adjunta. Alguien más me puede ayudar?

Edited August 28, 2016 by guelu (see edit history)

[guelu]

Hola de nuevo!

Ya estamos muy cerca de terminar este tema. Ya podemos ver la categoría y subcategoría así como la marca del producto. Para ello he cambiado el código y he usado el siguiente:

<div class="p-marcas">

	<p id="manufacturer" {if !$product_manufacturer->name}style="display: none;"{/if}> 
	<!--<label>{l s='Marca de Cosmética Natural:'} </label>--> 
	<a href="{$link->getManufacturerLink($product_manufacturer->id_manufacturer, $product_manufacturer->link_rewrite)|escape:'html':'UTF-8'}"><span>{$product->manufacturer_name}</span></a> 
	</p>
							
</div>

<div class="cat-links-content">
	 {if isset($path) AND $path}{$path}{/if}
</div>
			

Ahora solo me falta que alguien me ayude a eliminar el nombre del producto que aparece al lado derecho de categoría>subcategoría>nombre producto

Una imagen vale más que mil palabras asi que adjunto imagen

[ventura]

Lo mas comodo para no tener que sobreescribir la classe Tools o el ProductController seria hacerlo con jquery, en el product.js, en la parte

$(document).ready(function()
{

añade

$($('.cat-links-content span:last-child')[0].nextSibling).wrap('<span style="display:none"></style>');

[guelu]

Ventura, funciona perfectamente!!

Doy el tema por solucionado, muchísimas gracias!