Pasar mouse por imagen en productos destacados

[Anxolois]

Hola, soy nuevo aquí, estoy comenzando a diseñar mi propia tienda en prestashop. Mis conocimientos en programación son muy pocos, por no decir nada, pero me puse como reto diseñar mi tienda y no pararé hasta el final, aunque la plantilla que tomé por referencia non se si será algo complicado, pero ahí voy con todo.

 

Mi intención es que en el módulo de productos destacados al pasar el mouse por encima de la imagen salga otra imagen con el título del producto, la descripción y el precio. Intenté de varias formas retocar el archivo homefeatured.tpl, así mismo también modifiqué la plantilla CSS siguiendo el CSS de la plantilla de prestashop que tengo como referencia, pero no di conseguido hacerlo.

Alguien me puede explicar como lograrlo? Copio el enlace donde está la plantilla que quiero copiar para que lo veais gráficamente que es lo que quiero conseguir.

 

http://livedemo00.template-help.com/prestashop_37150/

 

Pasais el mouse por encima de una imagen de productos destacados y se aprecia lo que pretendo.

 

Muchas gracias de antemano a tod@s por vuestra ayuda.

[jordiob]

puedes copiarnos el código completo de tu módulo homefeatured aquí? Es cuestión de modificarlo añadiendo una capa que se muestre/oculte vía CSS+jQuery enseñando el nombre del producto pero es mejor si lo modificamos directamente en la planti del módulo.

 

Gracias!

[Anxolois]

Ah, gracias. Copio y pego entonces:

 

 

<!-- MODULE Home Featured Products -->

<div id="featured-products_block_center" class="block products_block">

<h4>{l s='Featured products' mod='homefeatured'}</h4>

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=342}

{assign var='nbItemsPerLine' value=4}

{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 style="height:{$ulHeight}px;">

{foreach from=$products item=product name=homeFeaturedProducts}

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1}clear{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:130:'...'}</a></div>

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" /></a>

<div>

<h5><a href="{$product.link}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:27:'...'|escape:'htmlall':'UTF-8'}</a></h5>

{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}

<a class="button" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>

{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}

{if ($product.quantity > 0 OR $product.allow_oosp)}

<a class="exclusive 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' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

{else}

<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>

{/if}

{else}

<div style="height:23px;"></div>

{/if}

</div>

</li>

{/foreach}

</ul>

</div>

{else}

<p>{l s='No featured products' mod='homefeatured'}</p>

{/if}

</div>

<!-- /MODULE Home Featured Products -->

 

 

Gracias.

[jordiob]

No lo he testeado, pero esto debería pitar:

 

Tienes que modificar el código de <ul> </ul>

 

{literal}
<style type="text/css">
.descripcionItem {
display:none;
width:200px;
height:100px;
background:#f5f5f5;
color:#333;
}
</style>
{/literal}
<ul style="height:{$ulHeight}px;">
{foreach from=$products item=product name=homeFeaturedProducts}
<div class="descripcionItem descripcionItem{$product.id_product}">{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}</div>
<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1}clear{/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if} itemDestacado itemDestacado{$product.id_product}">
   <div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:130:'...'}</a></div>
   <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" /></a>
   <div>
   <h5><a href="{$product.link}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:27:'...'|escape:'htmlall':'UTF-8'}</a></h5>
   {if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}
   <a class="button" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>
   {if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}
   {if ($product.quantity > 0 OR $product.allow_oosp)}
   <a class="exclusive 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' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
   {else}
   <span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>
   {/if}
   {else}
   <div style="height:23px;"></div>
   {/if}
   </div>
</li>

<script language="javascript">
 $(".itemDestacado{$product.id_product}").mouseenter(function(){
  $('.descripcionItem{$product.id_product}').css("display","block")
 })

 $(".itemDestacado{$product.id_product}").mouseleave(function(){
  $('.descripcionItem{$product.id_product}').css("display","none")
 })
   </script>
{/foreach}
</ul>

[Anxolois]

osea, que de <ul> a <ul> es donde tengo que pegar el nuevo código. Siendo así no es lo que quería exactamente, así la imagen del producto al pasar el mouse se desplaza hacia abajo dejando a la vista en la parte superior el título del producto. Lo que yo me refería en la plantilla que hice referencia, es que la imagen del producto queda fija y de la parte superior sobresale el precio y el título. Vuelvo a postear el link:

http://livedemo00.te...estashop_37150/

[jordiob]

osea, que de <ul> a <ul> es donde tengo que pegar el nuevo código. Siendo así no es lo que quería exactamente, así la imagen del producto al pasar el mouse se desplaza hacia abajo dejando a la vista en la parte superior el título del producto. Lo que yo me refería en la plantilla que hice referencia, es que la imagen del producto queda fija y de la parte superior sobresale el precio y el título. Vuelvo a postear el link:

http://livedemo00.te...estashop_37150/

 

Tienes razón, me dejé el absolute:

 

<style type="text/css">
.descripcionItem {
display:none;
width:200px;
height:100px;
background:#f5f5f5;
color:#333;
position:absolute
}
</style>