Visualizar Otra Imagen Del Producto Al Pasar El Ratón En Homefeatured

danizuko · February 20, 2013

Hola a todos.

Estaba intentando mostrar otra imagen que no sea la cover o principal de un producto al pasar el ratón por encima de ella en los productos destacados. Agradecería que me comentaran qué estoy haciendo mal o me digan la forma más eficaz y rápida de hacerlo. Puedo coger la imagen principal y mostrarla con la jquery pero no soy capaz de coger el id de otra imagen de ese producto. Pego código:

{assign var=cont value="0"}

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

{if isset($products) AND $products}

{assign var='liHeight' value=250}

{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>

{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} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

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

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</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)}

{if isset($images)}

{foreach from=$images item=image name=thumbnails}

{assign var=imageIds value="`$product->id`-`$image.id_image`"}

{assign var=cont value="`$cont`+`1`"}

{if $cont == 1}<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $imageIds, 'large_default')}" alt="{$product.name|escape:html:'UTF-8'}" /></a>{/if}

{/foreach}

{/if}

</div>

<div>

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

{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}

{else}

{/if}

</div>

</li>

{/foreach}

</ul>

</div>

{else}

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

{/if}

</div>

{literal}

jQuery(document).ready(function(){

aa = $('.product_block').height()-80;

bb = $('.product_block').width();

$('.product_block').hover(function(){

$(this).find('.product_desc').fadeIn(200).css('top',0).css('width',bb-20).css('height',aa-18);

},function(){

$(this).find('.product_desc').fadeOut();

});

$('.last_item_of_line').next().addClass('first_item');

{/literal}

</script>

Nadie o cualquier otro que pueda ayudarme, lo agradecería enormemente. Sé que estoy cerca y seguro que es un fallo tonto. Muchas gracias por adelantado!! :-)

Edited February 20, 2013 by danizuko (see edit history)

nadie · February 20, 2013

Revisa este tema: http://www.prestashop.com/forums/topic/216150-aporte-rollover-de-imagenes-en-la-product-list/ es posible que te sirva de orientación para que lo que quieres hacer.

danizuko · February 20, 2013

Vale, intenté hacerlo de forma parecida al ejemplo. Pongo los pasos que hice para ver si me comenta alguien que estoy haciendo mal:

En Image.php he puesto esta nueva función:

public function getidImagespos2($id_product)

{

$result = Db::getInstance()->executeS('

SELECT pai.`id_image`

FROM `'._DB_PREFIX_.'prstshp_image` pai

WHERE pai.`position`=2 AND pai.`id_product`=' $id_product

);

return $result;

}

En homefeatured.php he incluido:

public function hookDisplayHome($params)

{

$category = new Category(Context::getContext()->shop->getCategory(), (int)Context::getContext()->language->id);

$nb = (int)(Configuration::get('HOME_FEATURED_NBR'));

$products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10));

$this->smarty->assign(array(

'products' => $products,

'add_prod_display' => Configuration::get('PS_ATTRIBUTE_CATEGORY_DISPLAY'),

'homeSize' => Image::getSize('home_default'),

));

$image_array=array();

for($i=0;$i<count($products);$i++)

{

//Carga el array con todas las imágenes

$image_array[$i]= $this->category->getidImagespos2($products[$i]['id_product'],3);

}

self::$smarty->assign('productimg',(isset($image_array) AND $image_array) ? $image_array : NULL);

return $this->display(__FILE__, 'homefeatured.tpl');

}

Y en el fichero homefeatured.tpl tengo:

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

{if isset($products) AND $products}

{assign var='liHeight' value=250}

{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>

{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} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - ($smarty.foreach.homeFeaturedProducts.total % $nbItemsPerLine))}last_line{/if}">

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

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

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:65:'...'}</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)}

{*Ver otra imagen del producto al pasar el ratón*}

{foreach from=$productimg item=pimage}

{foreach from=$pimage item=pimage2}

{if $product.id_product==$pimage2.id_product}

<img src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$pimage2.id_image, 'large_default')}" alt="{$product.name|escape:html:'UTF-8'}" /></a>

{/if}

{/foreach}

</a>

{/if}

</div>

<div>

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

{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}

{else}

{/if}

</div>

</li>

{/foreach}

</ul>

</div>

{else}

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

{/if}

</div>

{literal}

jQuery(document).ready(function(){

aa = $('.product_block').height()-80;

bb = $('.product_block').width();

$('.product_block').hover(function(){

$(this).find('.product_desc').fadeIn(200).css('top',0).css('width',bb-20).css('height',aa-18);

},function(){

$(this).find('.product_desc').fadeOut();

});

$('.last_item_of_line').next().addClass('first_item');

{/literal}

</script>

La función, el array o la llamada al sql me está fallando yo creo y no me llega la información al tpl. Por favor si alguien puede ayudarme se lo agradezco.

Gracias.

Edited February 20, 2013 by danizuko (see edit history)

Sign In

Visualizar Otra Imagen Del Producto Al Pasar El Ratón En Homefeatured

Recommended Posts

danizuko

Link to comment

Share on other sites

nadie

Link to comment

Share on other sites

danizuko

Link to comment

Share on other sites

Browse

Activity

Go back to prestashop.com