I'm trying to get a product's name, price and description to display on the category page when I roll over the products image.
I have the jQuery working, but it is only displaying the first product's information in the category when I roll over the image, rather than the product name/price/description of that actual product. I see that it is all in a foreach loop, and I was just wondering how I would go about making it display the correct information for each product.
Here is what I have:
<?php // Grid Mode ?>
<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php /*if ($i++%$_columnCount==0): ?>
<?php endif*/ ?>
<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<?php $_imgSize = 210; ?>
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>"
alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
<div class="product-info">
<h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
<?php
$_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
foreach($_nameAfterChildren as $_nameAfterChildName):
$_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
$_nameAfterChild->setProduct($_product);
?>
<?php echo $_nameAfterChild->toHtml(); ?>
<?php endforeach; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php endif; ?>
<div class="actions">
<?php if($_product->isSaleable() && !$_product->canConfigure()): ?>
<button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<?php elseif($_product->isSaleable()): ?>
<a title="<?php echo $this->__('View Details') ?>" class="button" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
<?php endif; ?>
</ul>
</div>
</div>
<!--/***************This is my div to hold the product information: ********/-->
<div id="hidden_image" style="display:none;">
<?php echo $_product->getName(); ?>
<?php echo $_product->getDescription(); ?>
<?php echo $_product->getPrice(); ?>
</div>
</li>
<?php /*if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
<?php endif*/ ?>
<?php endforeach ?>
</ul>
<script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
<!-- /************* This is my jQuery to show the div when rolled over: ********/ -->
<script>
jQuery('.product-image')
.mouseover(function () {
jQuery('#hidden_image').show();
})
.mouseout(function () {
jQuery('#hidden_image').hide();
})
</script>
<?php endif; ?>
Update:
Here is a foreach loop that I put in that is showing that that product information is available in the DOM, but I can't get it to display the correct product, only the first!
<?php foreach ($_productCollection as $_product): ?>
<?php $productId = $_product->getId(); ?>
<?php $product_attr = Mage::getModel('catalog/product')->load($productId); ?>
<div id="hidden_image" style="display:none;">
<?php echo $product_attr->getData('name'); ?>
<a href="<?php echo $_product->getProductUrl(); ?>">View</a>
<?php echo $product_attr->getData('price'); ?>
<?php echo $product_attr->getData('description'); ?>
</div>
<?php endforeach ?>
Here is an image of the hidden divs in chrome debugger, showing that these are available to the DOM
Best Answer
The products that are passed by the collection to the list view only contain the basic attributes, description and price are not included. The easiest thing to is to instantiate the product model and pull the attributes you need with ->getData('attribute').
example:
then you will get your attributes by replacing:
with :
Although, the recommended way to do it, is to add an observer to the 'catalog_block_product_list_collection' event and add those attributes to the collection
Did you check that the information exist on the DOM, if it is then you probably need to change the query, when you are using an ID (#) selector on jQuery it will only grab the first element that it finds that matches that query you can add specificity to the query by adding an scope the element that you want to show.
try changing the your selector to affect an element that falls within the scope of the element that is triggering the event something simple like: