5

I have displayed different brands on my home page, but i want them to be displayed in slider to view in customized form. By the below code it takes images of manufacture and display on homepage, so what changes i need to do in this code so that they display in slide-bar. I have used perficient extension to display brands on homepage my homepage

and code which i have added in home.phtml, app/design/frontend/base/default/template/perficient/manufacturer

<?php $_manufacturersCollection = $this->getManufacturersCollection(); ?>

<div class="block">
    <div class="block-title1">
        <strong><span><?php echo $this->__('Shop By Manufacturer') ?></span></strong>
    </div>
    <div class="block-content">
        <form id="pollForm" action="<?php echo $this->getUrl('manufacturers') ?>" method="post" >
            <?php $_iterator = 0; ?>
            <ul class="products-grid first">
                <?php foreach ($_manufacturersCollection as $_manufacturer): ?>
                    <li class="item<?php if (++$_iterator == sizeof($_manufacturersCollection)): ?> last<?php endif; ?>">
                        <a class="product-images" href="<?php echo $this->getUrl('manufacturers' . '/' . $_manufacturer->getIdentifier()) ?>" title="<?php echo $_manufacturer->getManufacturer() ?>"><img alt="<?php echo $_manufacturer->getManufacturerLogo() ?>" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . 'manufacturer' . '/' . $_manufacturer->getManufacturerLogo() ?>" width="80" height="80"></a>

                       <!-- <h2><?php echo Mage::getModel('perficient_manufacturer/manufacturer')->getManufacturerName($_manufacturer->getManufacturer(), Mage::app()->getStore()->getId())  ?></h2> -->
                    </li>
                <?php endforeach; ?>
            </ul>
            <div class="actions" style="clear:left;">
                <button type="submit" title="<?php echo $this->__('View All123') ?>" class="button"><span><span><?php echo $this->__('View All') ?></span></span></button>
            </div> 
        </form>
    </div>
</div>
1

1 Answer 1

1

You have all you need of manufacture to do a slider, but now you need to create the slider itself. If you are using jQuery in your theme, there are several slider libraries for jQuery, I recommend the slick slider.

Your code using slick slider should look something like this:

<?php $_manufacturersCollection = $this->getManufacturersCollection(); ?>

<div class="block">
    <div class="block-title1">
        <strong><span><?php echo $this->__('Shop By Manufacturer') ?></span></strong>
    </div>
    <div class="block-content">
        <form id="pollForm" action="<?php echo $this->getUrl('manufacturers') ?>" method="post" >
            <?php $_iterator = 0; ?>
            <ul class="products-grid first brand-slider">
                <?php foreach ($_manufacturersCollection as $_manufacturer): ?>
                    <li class="item<?php if (++$_iterator == sizeof($_manufacturersCollection)): ?> last<?php endif; ?>">
                        <a class="product-images" href="<?php echo $this->getUrl('manufacturers' . '/' . $_manufacturer->getIdentifier()) ?>" title="<?php echo $_manufacturer->getManufacturer() ?>"><img alt="<?php echo $_manufacturer->getManufacturerLogo() ?>" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . 'manufacturer' . '/' . $_manufacturer->getManufacturerLogo() ?>" width="80" height="80"></a>

                       <!-- <h2><?php echo Mage::getModel('perficient_manufacturer/manufacturer')->getManufacturerName($_manufacturer->getManufacturer(), Mage::app()->getStore()->getId())  ?></h2> -->
                    </li>
                <?php endforeach; ?>
            </ul>
            <div class="actions" style="clear:left;">
                <button type="submit" title="<?php echo $this->__('View All123') ?>" class="button"><span><span><?php echo $this->__('View All') ?></span></span></button>
            </div> 
        </form>
    </div>
</div>

<script type="text/javascript">
// Attention to the possible conflict between jquery and prototype
jQuery('.brand-slider').slick({ 
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    variableWidth: true,
    draggable: true
});
</script>

For customizations you must change the CSS and the slick slider options (there are many). Remember to include the JS and CSS library in your theme through local.xml.

1
  • no above code doesnt show any changes
    – rashmi sm
    Oct 3, 2015 at 4:15

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.