2

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

DOM elements

3

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:

$product_attr = Mage::getModel('catalog/product')->load($_product->getId());

then you will get your attributes by replacing:

<?php echo $_product->getDescription(); ?>
<?php echo $_product->getPrice(); ?>

with :

<?php echo $product_attr->getData('description'); ?>
<?php echo $product_attr->get('price'); ?>

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:

  jQuery('.product-image')
                    .mouseover(function () {
                        jQuery('#hidden_image', $(this)).show();
                    })
                    .mouseout(function () {
                        jQuery('#hidden_image', $(this)).hide();
                    })
  • ahh thank you, that makes sense. But the problem is that it will only grab the first product from the category, and display only that information, and not the information for each subsequent product when rolled over – Chest Rockwell Jun 2 '15 at 18:22
  • 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. – Goku Jun 2 '15 at 18:42
  • Updated my original post. The elements are available in the DOM, I added a foreach loop to grab them, but cant get it to display properly – Chest Rockwell Jun 2 '15 at 19:02
  • 1
    take a look at the last section of the updated answer, on modifying your jQuery script, also the css approach suggested by @Qaisar Satti would be ideal – Goku Jun 2 '15 at 19:09
2

Try via CSS. This is the easiest solution:

.product-image:hover > .hidden_image {
    display: block;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.