Magento 1.7應用jcarousel on upsell產品

Question

我試圖在upsell產品上應用jcarousel。我無法找到一個關於如何爲Magento 1.7的好教程。

我改變了upsell.phtml如下：

<?php if(count($this->getItemCollection()->getItems())): ?> 
<div class="box-collateral box-up-sell"> 
<p><?php echo $this->__('Anderen bekeken ook:') ?></p> 

<div id="wrap">  

<?php $this->setColumnCount(5); //uncomment this line if you want to have another number   of columns. also can be changed in layout// ?> 
<?php $this->resetItemsIterator() ?> 
<?php for($_i=0;$_i<$this->getRowCount();$_i++): ?> 

<ul id="mycarousel" class="jcarousel-skin-tango" style="overflow:hidden;position:relative"> 
    <?php for($_j=0;$_j<$this->getColumnCount();$_j++): ?> 
     <?php if($_link=$this->getIterableItem()): ?> 
     <li> 
      <a href="<?php echo $_link->getProductUrl() ?>" title="<?php echo $this- >htmlEscape($_link->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_link, 'small_image')->resize(140) ?>" width="140" height="140" alt="<?php echo $this->htmlEscape($_link->getName()) ?>" /></a> 

      <?php echo $this->getPriceHtml($_link, true, '-upsell') ?> 


     </li> 
     <?php else: ?> 
     <li class="empty">&nbsp;</li> 
     <?php endif; ?> 
    <?php endfor; ?> 
    </ul> 
<script type="text/javascript"> 

function mycarousel_initCallback(carousel) 
{ 
// Disable autoscrolling if the user clicks the prev or next button. 
carousel.buttonNext.bind('click', function() { 
    carousel.startAuto(0); 
}); 

carousel.buttonPrev.bind('click', function() { 
    carousel.startAuto(0); 
}); 

// Pause autoscrolling if the user moves with the cursor over the clip. 
carousel.clip.hover(function() { 
    carousel.stopAuto(); 
}, function() { 
    carousel.startAuto(); 
}); 
}; 

jQuery(document).ready(function() { 
jQuery('#mycarousel').jcarousel({ 
    auto: 2, 
    wrap: 'last', 
    initCallback: mycarousel_initCallback 
}); 
}); 

function itemLoadCallbackFunction(carousel, state) 
{ 
for (var i = carousel.first; i <= carousel.last; i++) { 
    // Check if the item already exists 
    if (!carousel.has(i)) { 
     // Add the item 
     carousel.add(i, "I'm item #" + i); 
    } 
} 
}; 
</script> 

<?php endfor; ?> 

</div> 

<!--<script type="text/javascript">decorateTable('upsell-product-table')</script>--> 

</div> 
<?php endif ?> 

我還添加了jquery.jcarousel.mini.js和查詢 - 1.9.0.min.js經由page.xml加載。

現在我得到一個包含al項的垂直列表。我想要一個包含5個可見項目的水平列表自動滾動。通過鏈接：

http://www.dotato.nl/olympus-stylus-750-7-1mp-digital-camera.html

許多在此先感謝您的幫助！

Answer 1

這是一個代碼的和平工作，希望它會有所幫助。

<?php // Carousel ?> 
    <?php $carouselProductCollection = Mage::helper('my_helper') 
    ->prepareCarouselProductsCollection(Mage::registry('current_category')) ?> 
<?php if ($carouselProductCollection): ?> 
<div class="category-products"> 
<div class="category casousel"> 
    <a href="#" class="flv-arw-lft"></a> 
    <a href="#" class="flv-arw-rht"></a> 
    <ul id="mycarousel"> 
     <?php foreach ($carouselProductCollection as $_product): ?> 
      <li> 
       <div class="cartomizer_item"> 
        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(159, 128); ?>" /> 
        <div class="item-title"><?php echo $_product->getName() ?></div> 
        <div class="item-desc"> 
         <span> 
          <strong><?php echo $_product->getTitle() ?>&trade;: </strong> 
          <?php echo strip_tags($_product->getShortDescription()); ?> 
         </span> 
        </div> 
       </div> 
      </li> 
     <?php endforeach; ?> 
    </ul> 
</div> 

<script type="text/javascript"> 
    function mycarousel_initCallback(carousel) { 
     jQuery('.arw-right').bind('click', function() { 
      carousel.next(); 
      return false; 
     }); 

     jQuery('.arw-left').bind('click', function() { 
      carousel.prev(); 
      return false; 
     }); 

    }; 
    jQuery(document).ready(function() { 
     jQuery("#mycarousel").jcarousel({ 
      scroll: 1, 
      wrap: 'circular', 
      initCallback: mycarousel_initCallback, 
      buttonNextHTML: null, 
      buttonPrevHTML: null 
     }); 
    }); 
</script>