Descripción corta emergente en product-list

[ReactionCode]

Buenas.

 

Tengo una nueva duda, a ver si me podeis echar un cable.

 

Quiero hacer una ventana emergente con la descripción corta del producto que se mostrará al pasar el raton sobre un pequeño icono de info.

 

Codigo de product-list.tpl

 

{if isset($products)}
<!-- Products list -->
 <div class="block_content">
  {assign var='liHeight' value=342}
  {assign var='nbItemsPerLine' value=3}
  {assign var='nbLi' value=$products|@count}
  {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
  {math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}
  <ul>
  {foreach from=$products item=product name=myLoop}
  <!-- DESCRIPCIONES PRODUCTO -->
  {if $product.description_short !=""}
  <div class="descripcionHome descripcionHome_{$product.id_product}"><span class="description_text">{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}</span></div>
	    {/if}
  <li class="pla_block pla_block_{$product.id_product|intval} ajax_block_product ajax_block_product{$product.id_product}">
 <!-- capaEstadoProducto -->
			    <div class="capaEstadoProducto {if isset($product.new) && $product.new == 1}productoNuevo{/if} {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}{if ($product.allow_oosp || $product.quantity > 0)}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{else}productoFueradeStock{/if}{/if}"></div>
 <!-- imagen Producto -->
 <a class="product_image" href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}"><img id="image_{$product.id_product}" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.name|escape:html:'UTF-8'}" /></a>
 <div id="fabricante">
 <div class="info_product info_product_{$product.id_product}"></div>{if $product.manufacturer_name !=""}<span class="textoFabricante">{$product.manufacturer_name}</span>{/if}
 <!-- {if $product.manufacturer_name !=""}<img src="{$img_dir}informacion.png" class="fabricante{$product.id_product}" /> <span class="textoFabricante">{$product.manufacturer_name}</span>{/if} -->
 </div>
			    <div id="tituloHome">			   
				    <a class="product_link" href="{$product.link}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name_html}</a>
			    </div>

			    <div id="preciosHome">
				    {if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
					    <span class="noRebajado">{convertPrice price=$product.price_without_reduction}</span>
				    {/if}
				    <span class="Rebajado">{if !$PS_CATALOG_MODE}{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}{else}{/if}</span>
			    </div>

			    <div id="comprar">
   {if ($product.allow_oosp || $product.quantity > 0)}
    <div class="pla_attributes"></div>
    <a class="ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart.php')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart'}"><div class="cesta_icon"></div><span class="anadir_cesta">{l s='Add to cart'}</span></a>
   {else}
    <p id="oosHook"{if $product->quantity > 0} style="display: none;"{/if}><!-- SOLUCIONAR EL AVISO DE MAIL CUANDO NO HAY STOCK Y COLOCAR BANDA -->
    {$HOOK_PRODUCT_OOS}
    </p>
   {/if}

			    </div>
 <!--______FUNCION PARA MOSTRAR DESCRIPCION EN EL ICONO "i"___-->
<script language="javascript">
$(document).ready(function()
 $(".info_product_{$product.id_product}").mouseenter(function(){
  $('.descripcionHome_{$product.id_product}').css("display","block")
    })
    $(".info_product_{$product.id_product}").mouseleave(function(){
  $('.descripcionHome_{$product.id_product}').css("display","none")
    })
   </script>
  </li>
  {if $smarty.foreach.myLoop.iteration is div by 3}
		    <div class="clear"></div>
  {elseif !$smarty.foreach.myLoop.last}
	 {/if}
  {/foreach}
 </ul>
</div>
{/if}

 

CSS

 

/*___CONTENEDOR Y SPRITE DESCRIPCION DEL PRODUCTO__*/
.descripcionHome {
   background: url("../img/prodquery.png") no-repeat scroll 0 0 transparent;
   color: #666666;
   display: none;
   height: 125px;
   width: 380px;
   margin-left: 16px;
   margin-top: 95px;
   position: absolute;
z-index: 10;
}

/*__ICONO DE INFORMACION__*/
.info_product{
   background-color: transparent !important;
   background-image: url("../img/web_style.png");
   background-position: 0 -25px;
   background-repeat: no-repeat;
   display: inline-block;
   height: 16px;
   margin-right: 5px;
   width: 16px;
}

 

visualmente la idea sería conseguir que al pasar el ratón encima del icono información, se mostrara solo la capa del descripcionHome de ese producto.

 

Seguro que habrá alguna forma de hacerlo correctamente, ya sea por css o por javascript.

 

Adjunto 2 imagenes de como sería el funcionamiento.

[ReactionCode]

Ya lo he solucionado

 

Lo que me aconsejas me parece muy interesante, pero no se ajusta concretamente a lo que necesito, ya que poner todo el texto en una etiqueta no me parece lo mas adecuado.

 

Al final el codigo concreto sería el siguiente:

 

HTML

<!-- DESCRIPCIONES PRODUCTO -->
{if $product.description_short !=""}
<span class="descripcionHome descripcionHome_{$product.id_product}"><span class="description_text">{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}</span></span>
{/if}

<!-- En esta etiqueta mostramos el icono que usaremos para lanzar la ventna emergente -->
<div class="info_product info_product_{$product.id_product}"></div>


<!-- Codigo Javascript dentro del mismo TPL -->
<script language="javascript">
<!-- Por defecto no muestra el contenido -->
$('.descripcionHome_{$product.id_product}').css("display","none")

<!-- Con el raton encima muestra el contenido -->
$(".info_product_{$product.id_product}").mouseenter(function(){
$('.descripcionHome_{$product.id_product}').css("display","block")
})
<!-- Al sacar el raton de la etiqueta esconde el contenido-->
$('.info_product_{$product.id_product}').mouseleave(function(){
$('.descripcionHome_{$product.id_product}').css("display","none")
})
</script>

 

Comentar que faltaría el CSS que cada uno lo ponga a su gusto

 

Nota: Vigilar los Overflow de los contenedores para que se muestren sin problemas.

Edited July 25, 2012 by javsmile (see edit history)

[nadie]

Ya lo he solucionado

 

Si has solucionado el tema, edita el titulo del tema, (editando el primer mensaje, y después pulsando en "Usar editor completo"), añadiendo la palabra "Solucionado" al titulo, esto ayudara a mantener una mayor organización en el foro.

 

Un saludo

[nadie]

Ah por cierto, si tienes un hueco libre.. coloca tu aportación en esta sección: http://www.prestashop.com/forums/index.php?/forum/168-modulos-gratis-sobrecargas-y-otras-astucias-que-cambian-la-vida/

 

Un saludo

[ReactionCode]

Buenas os contesto a los 2.

 

1 no se donde se cambia el titulo, mira que le he dado unas cuantas vueltas

2 Viendo las demos de Culetip el que me servia con un mouse over se escribe de la siguiente forma en el HTML

 

<span title="Split Title|This clueTip's contents were created directly from the title attribute|Nice for minimum info.">

 

Entiendo que el contenido va dentro de la etiqueta y lo que me interesa es colocar el texto como tal para equilibrar la relación de HTML/texto.