5

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.

Slider for New Products

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

1

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

  • Can you please guide me since I am not getting where to add the plugin. – Akshata V S Oct 5 '15 at 4:27
  • Okay now I got to know. I have called the plugin within my new_grid.phtml but still it isn't working. – Akshata V S Oct 5 '15 at 4:35
  • did you download that js file for given link\ – Magento 2 Oct 5 '15 at 5:06
  • Yes I have downloaded the files and have placed them in appropriate folders. I can see that all the features of css is getting applied but its failing in application of js script. – Akshata V S Oct 5 '15 at 8:05
  • check the front end js file is calling or not – Magento 2 Oct 5 '15 at 9:06

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.