Showing results for 
Search instead for 
Did you mean: 

Toogle Product Information on list.phtml / Product list template

Toogle Product Information on list.phtml / Product list template



i am going to start a new shop. i want to create an list.phntl only with name, price, sku. on click a div container should toogle from right to left. toogle part works. But the information inside still the first product, should show name, image buy now …


starting example:


below the current code:

regards andrew


* Product list template
* @see Mage_Catalog_Block_Product_List


$_helper = $this->helper('catalog/output');


<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
<?php echo $this->getToolbarHtml() ?>
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
<?php $_iterator = 0; ?>

<ol class="products-list" id="products-list">
<?php foreach ($_productCollection as $_product): ?>
<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">

<a class="productDiv-link" href="#"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a>

<?php echo $_helper->productAttribute($_product, $_product->getId()); ?>

<div id="productDiv">
<a class="productDiv-link" href="#">images-link</a>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<?php if($_product->isSaleable()): ?>
<p><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></p>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped ?>" class="link-learn"><?php echo $this->__('Learn More') ?></a>

<?php endforeach; ?>

<?php endif; ?>
<?php endif; ?>


$(document).ready(function () {
$('.soundDiv-link').click(function () {
$('.videoDiv-link').click(function () {
width: 'toggle'
}, "slow")
$('.productDiv-link').click(function () {
width: 'toggle'
}, "slow")


Re: Toogle Product Information on list.phtml / Product list template

I'm not 100% on this, but since no one else has answered you yet, I'll tell you what I think might be happening. Your script to animate the fly out div is after the for each loop, and all your fly out divs have the same ID of "productDiv", so when you click any given link, the first instance of "productDiv" gets pulled to populate the fly out.  You might have to add some sort of incremental variable to your productDiv ID and then work that in to your animation script so your IDs are unique....but I could be totally wrong. I hope someone else chimes in. Also, you might consider posting this in the "programming questions" section to get the right people looking at your question. Good luck! Sorry I couldn't help more.