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; ?>
  • Could you show your template & block source code? – Siarhey Uchukhlebau Mar 30 '16 at 6:44
  • Check Now the source code – Anmol Khatri Mar 30 '16 at 6:49
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
                }
            }
        });
     });
  • If it helps you mark as accepted and upvote so it will helpful to others as well – Prashant Valanda Mar 30 '16 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>
  • Not working.... – Anmol Khatri Mar 30 '16 at 7:01
  • check the console for js error and add that too. – Qaisar Satti Mar 30 '16 at 7:04
  • add the another solution check and feedback – Qaisar Satti Mar 30 '16 at 7:09
  • Also Not Working – Anmol Khatri Mar 30 '16 at 7:16
  • Can you suggest me any code with the help of i can show category product slider. – Anmol Khatri Mar 30 '16 at 7:17

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.