Magento – Configure homepage to use phtml file

You will deal with templates and the local.xml file, which you can create under your theme folder.

I will assume some configurations:

• That your theme is under app/skin/frontend/rwd/yourtheme/;
• That you have a local.xml file inside app/skin/frontend/rwd/yourtheme/layout;
• That exists a header.phtml file in app/skin/frontend/rwd/default/template/page/html/;
• That you have 2 different .phtml files, each one with the HTML for the corresponding logo: whitelogo.phtml and blacklogo.phtml;

So, first you copy the header.phtml from the above dir into app/skin/frontend/rwd/yourtheme/template/page/html/ and edit it: put <?php echo $this->getChildHtml("logo"); ?> in header where you want the logo to appear.

Copy the whitelogo.phtml and blacklogo.phtml also in this same directory.

Then you edit the local.xml file:

<?xml version="1.0" encoding="utf-8"?>
<layout version="0.1.0">
    <catalog_product_index>
        <reference name="header">
            <block type="core/template" name="logo" template="page/html/blacklogo.phtml"/>
        </reference>
    </catalog_product_index>
    <cms_index_index>
        <reference name="header">
            <block type="core/template" name="logo" template="page/html/whitelogo.phtml"/>
        </reference>
    </cms_index_index>
</layout>

And this should work. In your homepage you will have the white logo and in the product page the other logo.

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.