Magento – How to add slider for new products, best sellers, and most viewed product blocks on the website

magento-1.9phtmlproduct

I tried adding slider to my new products without using any extensions, by simply calling slideshow-container class and slideshow class in

new_grid.phtml

which is located in

/app/design/frontend/mywebsite/default/template/catalog/product/widget/new/content/

as highlighted in the below code. The products are sliding with one image at a time in my New products block as shown in the image attached to this. I want to add four images per slide to my slider. Please suggest me the appropriate solution.

<?php if (($_products = $this->getProductCollection()) && $_products-   >getSize()): ?>
<div class="widget widget-new-products">
<div class="widget-title">
    <h2><?php echo $this->__('New Products') ?></h2>
</div>
<div class="widget-products **slideshow-container**">

    <?php echo $this->getPagerHtml() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; ?>
    <ul class="products-grid products-grid--max-<?php echo  $_columnCount; ?>-col-widget **slideshow**">
        <?php foreach ($_products->getItems() as $_product): ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?>  first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <?php $_imgSize = 210; ?>
                <?php // The image size is locked at 210 for this for   display purposes. CSS has it at 75% which should equate to 278px?>
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(210) ?>"  alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                </a>
                <div class="product-info">
                    <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $this- >helper('catalog/output')->productAttribute($_product, $_product- >getName() , 'name') ?></a></h3>
                    <?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
                    <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <div class="actions">
                        <?php if ($_product->isSaleable()): ?>
                            <button type="button" title="<?php echo Mage::helper('core')->quoteEscape($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>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>
                        <ul class="add-to-links">
                            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                            <?php endif; ?>
                            <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                        </ul>
                    </div>
                </div>
            </li>
        <?php endforeach; ?>

    </ul>
</div>

Best Answer

I don't think why it's not working. You try for Owl Carousel

Before that you dowmload js and css file in this link :http://owlgraphic.com/owlcarousel/#demo

<?php if (($_products = $this->getProductCollection()) && $_products-   >getSize()): ?>
<div class="widget widget-new-products">
<div class="widget-title">
    <h2><?php echo $this->__('New Products') ?></h2>
</div>
<div id="owl-example" class="owl-carousel">

    <?php echo $this->getPagerHtml() ?>
    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; ?>
    <ul class="products-grid products-grid--max-<?php echo  $_columnCount; ?>-col-widget **slideshow**">
        <?php foreach ($_products->getItems() as $_product): ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?>  first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
                <?php $_imgSize = 210; ?>
                <?php // The image size is locked at 210 for this for   display purposes. CSS has it at 75% which should equate to 278px?>
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(210) ?>"  alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                </a>
                <div class="product-info">
                    <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $this- >helper('catalog/output')->productAttribute($_product, $_product- >getName() , 'name') ?></a></h3>
                    <?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
                    <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <div class="actions">
                        <?php if ($_product->isSaleable()): ?>
                            <button type="button" title="<?php echo Mage::helper('core')->quoteEscape($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>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>
                        <ul class="add-to-links">
                            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                                <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                            <?php endif; ?>
                            <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                            <?php endif; ?>
                        </ul>
                    </div>

Script

$(document).ready(function() {

$("#owl-example").owlCarousel({

navigation : false, // Show next and prev buttons
slideSpeed : false,
paginationSpeed : false,
singleItem:true,
lazyEffect: "fade",
autoPlay:4000
});
});

Here you need to set all view size and how many item you want to display

Follow this http://owlgraphic.com/owlcarousel/#demo

Related Solutions

Magento 2 – Bestseller and Most Viewed Products on Homepage

For bestseller create a block in __construct get instance of

\Magento\Sales\Model\ResourceModel\Report\Bestsellers\CollectionFactory $collectionFactory,

<?php
namespace Sugarcode\Test\Block;

class Test extends \Magento\Framework\View\Element\Template
{
    protected $_coreRegistry = null;
    protected $_collectionFactory;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Registry $registry,
       \Magento\Sales\Model\ResourceModel\Report\Bestsellers\CollectionFactory $collectionFactory,
        array $data = []
    ) {
        $this->_collectionFactory = $collectionFactory;
        $this->_coreRegistry = $registry;
        parent::__construct($context, $data);
    }



    public function _prepareLayout()
    {
        return parent::_prepareLayout();
    }
    public function getBestSellerData()
    {
        $collection = $this->_collectionFactory->create()->setModel(
            'Magento\Catalog\Model\Product'
        );

        return $collection;
    }       

}

For recently viewed you can use widget from admin side or else you can write custom block with \Magento\Reports\Model\ResourceModel\Product\CollectionFactory $productsFactory

Look at:

vendor\magento\module-backend\Block\Dashboard\Tab\Products\Viewed.php

and

vendor\magento\module-backend\Block\Dashboard\Tab\Products\Ordered.php

Magento 1.9.1.0 – How to Display Most Viewed Products on HomePage

Use below code to get Most Viewed products collection :

<?php
$storeId = Mage::app()->getStore()->getId();

$_productCollection = Mage::getResourceModel('reports/product_collection')
    ->addAttributeToSelect('*')
    ->setStoreId($storeId)
    ->addStoreFilter($storeId)
    ->addViewsCount()
    //->setPageSize($totalPerPage)
    ;
?>

For more details, check List Popular Products

UPDATE : In admin, go to CMS > Pages, edit Homepage.

-- In Content area, add this line : {{block type="catalog/product" template="catalog/product/most-viewed.phtml"}} and SAVE.

-- Now create a new template file at /app/design/frontend/PACKAGE/THEME/template/catalog/product/, and name it most-viewed.phtml

-- Add this code in most-viewed.phtml file, (this will show max 10 products, edit $totalPerPage variable as you require)

<?php
$totalPerPage = 10;
$storeId = Mage::app()->getStore()->getId();
$_productCollection = Mage::getResourceModel('reports/product_collection')
    ->addAttributeToSelect('*')
    ->setStoreId($storeId)
    ->addStoreFilter($storeId)
    ->addViewsCount()
    ->setPageSize($totalPerPage)
    ;
?>
<?php $_collectionSize = $_productCollection->count(); ?>

<?php if ($_collectionSize) { ?>
    <h2 class="subtitle">Most Viewed Products</h2>
    <ul class="products-grid">
        <?php
        foreach ($_productCollection as $_product):
        $image_url = $this->helper('catalog/image')->init($_product, 'thumbnail')->setWatermarkImageOpacity(0)->keepFrame(false)->resize(200,200);
        $alt = $this->htmlEscape($this->stripTags($this->getImageLabel($_product, 'small_image'), null, true));
        ?>
        <li class="item">
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>">
                <img src="<?php echo $image_url; ?>" alt="<?php echo trim($alt)? $alt: $this->htmlEscape($this->stripTags($_product->getName())); ?>" />
            </a>
            <div class="product-info">
                <h2 class="product-name">
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>">
                        <?php echo trim($alt)? $alt: $this->htmlEscape($this->stripTags($_product->getName())); ?>
                    </a>
                </h2>
            </div>
        </li>
        <?php endforeach; ?>
    </ul>
<?php } ?>

Best Answer

Related Solutions

Magento 2 – Bestseller and Most Viewed Products on Homepage

Magento 1.9.1.0 – How to Display Most Viewed Products on HomePage

Related Topic