0

In my Magento Mobile homepage, Featured Product Slider Not Working Properly. When I add this code to my mobile_homepage static block it will work only once. when I try to add another category to this code. the slider is not working. it will show product big images. Url (test.blingers.in)

<div class="featured">{{block type="mpanel/products" products_count="10" title="School Uniform" category_id="377" template="cms/home/featured_products.phtml"}}</div> 

Source Code

<?php if($this->getTitle()!=''): ?>
    <div class="block-title">
        <div class="title">
            <h2><?php echo $this->getTitle() ?></h2>
        </div>
    </div>
<?php endif ?>
<?php if (($_products = $this->getSpecialProducts('featured')) && (count($_products)>0)): ?>
<?php $helper = $this->helper('mpanel') ?>
    <?php $size = $helper->convertRatioToSize($this->getProductRatio()) ?>
    <?php 
        if($this->getCountPerRow()){
            $col = $this->getCountPerRow();
        }
        else{
            $col = 1;
        }

        $perrow = $col;

        $col = $helper->convertColRowCustom($col);
    ?>

    <div class="owl-container">
        <div class="owl-carousel products-carousel " id="featured_products" style="display:block">
            <?php $i=0; $j=0; foreach ($_products as $_product): $j++; ?>
                <?php $_product = Mage::getModel('catalog/product')->load($_product->getId()) ?>
                    <div class="item">
                        <div class="product-content">
                            <div class="product-top">
                                <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($size['width'], $size['height']) ?>" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                                </a>
                                <div class="label-product">
                                    <?php echo $helper->getProductLabel($_product) ?>
                                </div>
                            </div>

                            <h2 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></h2>
                            <?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
                            <?php if ($_product->isSaleable()): ?>
                                <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="btn btn-cart btn-default btn-xs" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><?php echo $this->__('Add To Cart'); ?></button>
                            <?php endif; ?>

                        </div>
                    </div>

            <?php endforeach ?>
        </div>
    </div>  
    <script type="text/javascript">
        mgsjQuery("#featured_products").owlCarousel({
            items: 2,
            nav:false,
            margin:12,
            responsive:{
                0:{
                    items:2
                },
                600:{
                    items:2
                },
                1000:{
                    items:2
                }
            }
        });
    </script>
<?php else: ?>
<div class="alert alert-danger no-product-display">
    <p><?php echo $this->__('There are no products matching the selection.') ?></p>
</div>
<?php endif; ?>
2
  • Could you show your template & block source code? Commented Mar 30, 2016 at 6:44
  • Check Now the source code Commented Mar 30, 2016 at 6:49

2 Answers 2

0

Use below code:

mgsjQuery.noConflict();
    mgsjQuery(document).ready(function ($) {   
      mgsjQuery(".products-carousel").owlCarousel({
            loop:true,
            nav:false,
            margin:12,
            responsiveClass:true,
            responsive:{
                0:{
                    items:1,
                    nav:true
                },
                600:{
                    items:3,
                    nav:false
                },
                1000:{
                    items:5,
                    nav:true,
                    loop:false
                }
            }
        });
     });
1
  • If it helps you mark as accepted and upvote so it will helpful to others as well Commented Mar 30, 2016 at 7:25
1

add carousel on class instead of id. because the repeating id causes the problem

 <script type="text/javascript">
            mgsjQuery(".products-carousel").owlCarousel({
                items: 2,
                nav:false,
                margin:12,
                responsive:{
                    0:{
                        items:2
                    },
                    600:{
                        items:2
                    },
                    1000:{
                        items:2
                    }
                }
            });
        </script>

the second solution for that

id="featured_products<?php echo $this->getCategoryId() ?>"

<script type="text/javascript">
                mgsjQuery("#featured_products<?php echo $this->getCategoryId() ?>").owlCarousel({
                    items: 2,
                    nav:false,
                    margin:12,
                    responsive:{
                        0:{
                            items:2
                        },
                        600:{
                            items:2
                        },
                        1000:{
                            items:2
                        }
                    }
                });
            </script>
5
  • Not working.... Commented Mar 30, 2016 at 7:01
  • check the console for js error and add that too. Commented Mar 30, 2016 at 7:04
  • add the another solution check and feedback Commented Mar 30, 2016 at 7:09
  • Also Not Working Commented Mar 30, 2016 at 7:16
  • Can you suggest me any code with the help of i can show category product slider. Commented Mar 30, 2016 at 7:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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