0

アップセル製品に 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

助けてくれてありがとう！

4

1 に答える 1

0

これは実用的なコードです。お役に立てば幸いです。

<?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>
于 2013-01-22T15:38:33.330 に答える