0

I'm working featured product slider and featured products also showing fine on home page.

my code is:

featured-product-slider.phtml

<?php
/**
 * @see Easylife_FeaturedProducts_Block_Product_List
 */

$cms_id = $this->helper('featuredproducts')->getCurrentCmsPage();
if ( !$cms_id ) {
    $pageLayout = $this->getLayout()->getBlock('root')->getTemplate();
    if ( strpos($pageLayout, '2columns') ) {
        $grid_class = 'two_columns_' . Mage::getStoreConfig('featuredproducts/catalog/grid_columns_2col');
    } else {
        $grid_class = 'one_column_' . Mage::getStoreConfig('featuredproducts/catalog/grid_columns_1col');
    }
} else {
    if ( $cms_id == 'shopper_home' ) {
        $grid_class = 'one_column_' . Mage::getStoreConfig('featuredproducts/catalog/grid_columns_1col');
    } else {
        $grid_class = 'two_columns_' . Mage::getStoreConfig('featuredproducts/catalog/grid_columns_2col');
    }
}

$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
$helper = $this->helper('featuredproducts/image');
$imgX = 252;
$imgY = $helper->calculateHeight($imgX);
$time = time() + mt_rand(0, 1000);
//$time = 1000;

//Mage::log($time);

?>

<?php if($_productCollection->count()): ?>
<div class="product-slider-container">
    <div class="clearfix title-container">
        <h2><?php echo $this->__($this->getBlockTitle());?></h2>
        <a href="#" class="jcarousel-prev-horizontal" id="shopper_carousel_prev<?php echo $time; ?>"></a>
        <a href="#" class="jcarousel-next-horizontal" id="shopper_carousel_next<?php echo $time; ?>"></a>
    </div>
    <ul id="featured_<?php echo $time; ?>" class="products-grid jcarousel-skin-tango clearfix <?php echo $grid_class; ?>">
        <?php foreach ($_productCollection as $_product): ?>
        <li class="item">

            <div class="regular">
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" class="product-image">
                    <?php echo $this->helper('featuredproducts')->getLabel($_product);  ?>
                    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgX, $imgY) ?>" data-srcX2="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgX*2, $imgY*2) ?>" width="<?php echo $imgX; ?>" height="<?php echo $imgY; ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                </a>
                <div class="product-info">
                    <div class="button-container">
                        <?php if($_product->isSaleable()): ?>
                        <?php if (Mage::getStoreConfig('featuredproducts/ajax/cart')) : ?>
                            <?php if ( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped()) ) { ?>
                                <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart ajax-cart" data-url="<?php echo $this->getAddToCartUrl($_product); ?>" data-id="<?php echo $_product->getId(); ?>"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                                <?php } else { ?>
                                <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart show-options" data-id="<?php echo $_product->getId(); ?>"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                                <?php }  ?>
                            <?php else: ?>
                            <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 endif; ?>
                        <?php else: ?>
                        <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>
                    </div>
                    <?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
                    <a class="product-name" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a>
                    <?php echo $this->getPriceHtml($_product, true) ?>
                </div>
            </div>

            <div class="hover">
                <?php if (Mage::getStoreConfig('featuredproducts/ajax/cart')) : //quick view button ?>
                <a href='<?php echo $this->getUrl('ajax/index/options',array('product_id'=>$_product->getId()));?>' data-fancybox-group="gallery" class='fancybox quick-view' id='fancybox<?php echo $_product->getId()?>'><?php echo $this->__('quick view')?></a>
                <?php endif; ?>
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" class="product-image">
                    <?php echo $this->helper('featuredproducts')->getLabel($_product);  ?>
                    <?php
                    $_product->load('media_gallery');
                    $back_img = $_product->getMediaGalleryImages()->getItemByColumnValue('label', 'back');
                    if ( $back_img ) : ?>
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image', $back_img->getFile())->resize($imgX, $imgY) ?>" data-srcX2="<?php echo $this->helper('catalog/image')->init($_product, 'small_image', $back_img->getFile())->resize($imgX*2, $imgY*2) ?>" width="<?php echo $imgX; ?>" height="<?php echo $imgY; ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                        <?php else : ?>
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgX, $imgY) ?>" data-srcX2="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($imgX*2, $imgY*2) ?>" width="<?php echo $imgX; ?>" height="<?php echo $imgY; ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                        <?php endif; ?>
                </a>

                <?php if (Mage::getStoreConfig('sales/msrp/enabled')) :  ?>
                    <?php echo $this->getPriceHtml($_product, true);  ?>
                <?php else : ?>
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
                        <?php echo $this->helper('featuredproducts/data')->priceFormat( $this->getPriceHtml($_product, true) ); ?>
                    </a>
                <?php endif; ?>

                <?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
                <a class="product-name" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a>
                <?php if($_product->getRatingSummary()){ echo $this->getReviewsSummaryHtml($_product); } ?>

                <div class="button-container">
                    <?php if($_product->isSaleable()): ?>

                    <?php if (Mage::getStoreConfig('featuredproducts/ajax/cart')) : ?>

                        <?php if ( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped()) ) { ?>
                            <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart ajax-cart" data-url="<?php echo $this->getAddToCartUrl($_product); ?>" data-id="<?php echo $_product->getId(); ?>"><span><span><em></em><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                            <?php } else { ?>
                            <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart show-options" data-id="<?php echo $_product->getId(); ?>"><span><span><em></em><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                            <?php }  ?>

                        <?php else: ?>
                        <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><em></em><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                        <?php endif; ?>

                    <?php else: ?>
                    <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                    <?php endif; ?>
                </div>

                <span class="ajax_loading" id='ajax_loading<?php echo $_product->getId()?>'><img src='<?php echo $this->getSkinUrl('images/ajax-loader.gif')?>'/></span>

                <ul class="add-to-links">
                    <?php if ($this->helper('wishlist')->isAllow()) : ?>
                    <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist" data-id="<?php echo $_product->getId(); ?>"><span>+</span><?php echo $this->__('Add to Wishlist') ?></a></li>
                    <?php endif; ?>
                    <?php if ($_compareUrl=$this->getAddToCompareUrl($_product)) : ?>
                    <li><a href="<?php echo $_compareUrl ?>" class="link-compare" data-id="<?php echo $_product->getId(); ?>"><span>+</span><?php echo $this->__('Add to Compare') ?></a></li>
                    <?php endif; ?>
                </ul>

            </div>

        </li>
        <?php endforeach; ?>
    </ul>
    <div class="clear"></div>
</div>
<script type="text/javascript">
    //<![CDATA[


    jQuery(document).ready(function($) {

        var carouselID = '#featured_<?php echo $time; ?>';
        var jc = null;

        $('script', carouselID).detach();

        //line up carousel items
        var lineUp = function()
        {
            var height = 0;
            $('li.item', carouselID).each(function(i,v){
                $('div.product-info', this).css('height', 'auto');
                var h = $('div.product-info', this).height();
                if ( h > height ) {
                    height = h;
                }
            });
            $('li.item div.product-info', carouselID).height(height);
        }

        var mycarousel_initCallback = function(carousel)
        {
            if ( jc ) {
                return;
            }

            $('#shopper_carousel_next<?php echo $time; ?>').bind('click', function() {
                carousel.next();
                return false;
            });
            $('#shopper_carousel_prev<?php echo $time; ?>').bind('click', function() {
                carousel.prev();
                return false;
            });

            if (typeof $(carouselID).parent().swipe !== 'undefined'){
                $(carouselID).parent().swipe({
                    swipeLeft: function() { carousel.next(); },
                    swipeRight: function() { carousel.prev(); },
                    swipeMoving: function() {}
                });
            }

            jc = carousel;
        };

        var mycarousel_reloadCallback = function(carousel)
        {
            if ( !isResize('featured_<?php echo $time; ?>') ) return;
            carousel.list = $(carouselID);
            var li = $(carouselID).children('li');
            carousel.list.css(carousel.lt, "0px");
            carousel.list.css(carousel.wh, $(li.get(0)).outerWidth(!0) * li.size() + 100);
            carousel.first = 1;
            carousel.last = $(carouselID).parent().width() / $(li.get(0)).outerWidth(!0);
            lineUp();
        }

        $(carouselID).jcarousel({
            scroll: 1,
            initCallback: mycarousel_initCallback,
            reloadCallback: mycarousel_reloadCallback,
            buttonNextHTML: null,
            buttonPrevHTML: null
        });

    });

    //]]>
</script>

<?php endif ?>

and i have added the code cms = > Page = > Home Page = > Content = >

{{block type="catalog/product_list" category_id="3" template="catalog/product/featured-products-slider.phtml"}}

the structure as below.

Home Page                                   << >>
=================================================
|       |       |       |       |       |       |
|       |       |       |       |       |       |
|   P1  |   P2  |  P3   |   P4  |   P5  |   P6  |
|       |       |       |       |       |       |
|       |       |       |       |       |       |
=================================================

P = Product << = Previous

= Next

How to apply slider for this?

Thanks in advance..

1

You can use any carousel for it. My favourite is Owl Carousel. You just need to check the demo, include JS and CSS for carousel as instructed in document, setup the structure as given and your slider should work.

  • Is it possible to specify product_id instead of category_id? – Manoj Kumar Nov 28 '14 at 8:42
  • I am not clear what are you asking? how is it relevant with carousel? – Dexter Nov 28 '14 at 8:48
  • No No, I'm asking from this line {{block type="catalog/product_list" category_id="3" template="catalog/product/featured-products-slider.phtml"}}. Here Category_id is there right. Is it possible to specify product_id="1,2,3" instead of category_id="3"? – Manoj Kumar Nov 28 '14 at 8:51
  • it completely depends on how you code it. If you want to retrieve product with id 1 2 3 you can do so and the same with category too – Dexter Nov 28 '14 at 9:09
  • superb slideshow, really i like it i will try to implement this to my slider, and i will review the above comments.. Thank you.. – Manoj Kumar Nov 28 '14 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.