Magento 1.7 upsell 제품에 jcarousel 적용

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 ?> 

나는 또한에서 page.xml를 통해로드 할 jquery.jcarousel.mini.js 쿼리-1.9.0.min.js를 추가했다.

지금 알기 쉬운 항목이 포함 된 세로 목록이 표시됩니다. 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>