Question

我想在Magento的list.html上创建一个切换效果，我可以点击产品名称并从右到左切换产品信息（图片，立即购买等），但不知怎的，我无法让它工作。

这是我目前的现场演示：http://www.ena-style.com/myers-aplex

我的代码：

<?php
/**
* Product list template
*
* @see Mage_Catalog_Block_Product_List
*/
?>

<?php
$_productCollection=$this->getLoadedProductCollection();
$_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 /** THE PRODUCT ID **/ ?>
<?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>
</div>
</li>
<?php endforeach; ?>
</ol>
<?php endif; ?>
<?php endif; ?>


<script>
$(document).ready(function () {
$('.hidden').hide()
});
$('.soundDiv-link').click(function () {
$('#soundDiv').slideToggle("slow")
});
$('.videoDiv-link').click(function () {
$('#videoDiv').next().animate({
width: 'toggle'
}, "slow")
});
$('.productDiv-link').click(function () {
$('#productDiv').animate({
width: 'toggle'
}, "slow")
});
</script>

Answer 1

could you please make sure that there is no javascript error on the page that you do coding and if any come then let me know. i think you need to use jQuery.noConflict(); and jQuery instead of $ in javascript code.

Hope this helps. Thanks

Sam

无法切换效果Magento list.html

1 个答案: