magento - Magento 1.7 在追加销售产品上应用 jcarousel

Question

我正在尝试将 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 和 query-1.9.0.min.js 以通过 page.xml 加载。

现在我得到一个包含所有项目的垂直列表。我想要一个水平列表，其中包含 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>