Magento 1.4 Theming: Making Our Theme Shine

Exclusive offer: get 50% off this eBook here
Magento 1.4 Theming Cookbook

Magento 1.4 Theming Cookbook — Save 50%

Over 40 recipes to create a fully functional, feature rich, customized Magento theme

$23.99    $12.00
by Jose Argudo Blanco | August 2011 | Cookbooks Open Source Web Development

In this article by Jose Argudo Blanco, author of Magento 1.4 Theming Cookbook, we are going to play with some nice effects, slideshows, fonts, and much more. All these things will make our theme even more interesting and attractive for our visitors.

This is going to be a very practical article, as well as a very useful one, as quite often these things help our site to achieve even more sales. Let's take a look at the things we are about to cover in more detail:

  • Using Cufon to include any font we like in our theme
  • SlideDeck content slider
  • Nivo Banner Slider
  • Magento Easy Lightbox
  • Adding social media sharing to product page
  • Adding featured products to the home page

 

Magento 1.4 Theming Cookbook

Magento 1.4 Theming Cookbook

Over 40 recipes to create a fully functional, feature rich, customized Magento theme

        Read more about this book      

(For more resources on this subject, see here.)

Looks quite interesting, doesn't it? Let's get started!

Introduction

You will find all the necessary code in the code bundle; however, some JavaScript libraries won't be included. Don't worry, they are very easy to find and download!

Using Cufón to include any font we like in our theme

This technique, which allows us to use any font we like in our site, is quite common these days, and is very, very useful. Years ago, if we wanted to include some uncommon font in our design, we could only do it by using a substitutive image. Nowadays, we have many options, such as some PHP extensions, @font-face, Flash (sIFR), and, of course, Cufón. And that last option is the one we are about to use.

Getting ready

If you would like to copy the code, instead of writing it, remember you can find all the necessary code in the code bundle in Chapter 5, recipe 1.

How to do it...

Ready to start this first recipe? Let's go:

  1. First we have to decide which font to use; this is totally up to you. In this example I'm going to use this one: http://www.dafont.com/aldo.font. It's a free font, and looks very good! Thanks to Sacha Rein. Just download it or find any other font of your liking.
  2. Now we need to use the Cufón generator in order to create the font package. We will go to this URL: http://cufon.shoqolate.com/generate/. There we will be able to see something similar to the following screenshot:

    Magento 1.4 Theming tutorial

  3. On that screen we only have to follow all the instructions and click on the Let's do this button:

    Magento 1.4 Theming tutorial

  4. This will create a file called Aldo_600.font.js, which will be the one we will be using in this example. But we also need something more, the Cufón library. Download it by clicking the Download button:

    Magento 1.4 Theming tutorial

  5. After downloading the Cufón library, we will download a file called cufon-yui.js.
  6. We now have all the necessary tools. It's time to make use of them.
  7. First place cufon-yui.js and Aldo_600.font.js inside skin/frontend/default/rafael/js.
  8. Now we need to edit our layout file. Let's open: app/design/frontend/default/rafael/layout/page.xml.
  9. Once we have this file opened we are going to look for this piece of code:

    <action method="addCss"><stylesheet>css/960_24_
    col.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/styles.
    css</stylesheet></action>

  10. And just below it we are going to add the following:

    <action method="addJs"><script>../skin/frontend/
    default/rafael/js/cufon-yui.js</script></action>
    <action method="addJs"><script>../skin/frontend/
    default/rafael/js/Aldo_600.font.js</script></action>

    See, we are adding our two JavaScript files. The path is relative to Magento's root JavaScript folder.

  11. With this done, our theme will load these two JS files. Now we are going to make use of them. Just open app/design/frontend/default/rafael/template/page/2columns-right.phtml.
  12. At the bottom of this file we are going to add the following code:

    <script type="text/javascript">
    Cufon.replace('h1');
    </script>
    </body>
    </html>

  13. And that's all we need. Check the difference! Before we had something like the following:

    Magento 1.4 Theming tutorial

  14. And now we have this:

    Magento 1.4 Theming tutorial

Every h1 tag of our site will now use our Aldo font, or any other font of your liking. The possibilities are endless!

How it works...

This recipe was quite easy, but full of possibilities. We first downloaded the necessary JavaScript files, and then made use of them with Magento's add JS layout tag. Later we were able to use the libraries in our template as in any other HTML file.

SlideDeck content slider

Sometimes our home page is crowded with info, and we still need to place more and more things. A great way of doing so is using sliders. And the SlideDeck one offers a very configurable one. In this recipe we are going to see how to add it to our Magento theme. You shouldn't miss this recipe!

How to do it...

Making use of the slider in our theme is quite simple, let's see:

  1. First we need to go to http://www.slidedeck.com/ and download SlideDeck Lite, as we will be using the Lite version in this recipe.
  2. Once downloaded we will end up with a file called slidedeck-1.2.1-litewordpress-1.3.6.zip. Unzip it.
  3. Go to skin/frontend/default/rafael/css and place the following files in it:
    • slidedeck.skin.css
    • slidedeck.skin.ie.css
    • back.png
    • corner.png
    • slides.png
    • spines.png
  4. Next, place the following files in skin/frontend/default/rafael/js:
    • jquery-1.3.2.min.js
    • slidedeck.jquery.lite.pack.js
  5. Good, now everything is in place. Next, open: app/design/frontend/default/rafael/layout/page.xml.
  6. Now look for the following piece of code:

    <block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/
    prototype.js</script></action>
    <action method="addJs" ifconfig="dev/js/
    deprecation"><script>prototype/deprecation.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></
    action>

  7. Place the jQuery load tag just before the prototype one, so we have no conflict between libraries:

    <block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>../skin/frontend/
    default/rafael/js/jquery-1.3.2.min.js</script></action>
    <action method="addJs"><script>prototype/
    prototype.js</script></action>
    <action method="addJs" ifconfig="dev/js/
    deprecation"><script>prototype/deprecation.js</script></action>

  8. Also add the following code before the closing of the block:

    <action method="addCss"><stylesheet>css/slidedeck.skin.css</
    stylesheet></action>
    <action method="addCss"><stylesheet>css/slidedeck.skin.ie.css</
    stylesheet></action>
    <action method="addJs"><script>../skin/frontend/default/rafael/js/
    slidedeck.jquery.lite.pack.js</script></action>

  9. The following steps require us to log in to the administrator panel. Just go to:

    http://127.0.0.1/magento/index.php/admin.

  10. Now to CMS/Pages, open the home page one:

  11. Once inside, go to the Content tab.
  12. Click on Show/Hide editor.
  13. Find the following code:

    <div class="grid_18">
    <a href="#"><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{skin url='img_products/big_
    banner.jpg'}}" alt="Big banner" title="Big banner" /></a>
    </div><!-- Big banner →

  14. And replace it with the following:

    <div class="grid_18">
    <style type="text/css">
    #slidedeck_frame {
    width: 610px;
    height: 300px;
    }
    </style>

    <div id="slidedeck_frame" class="skin-slidedeck">
    <dl class="slidedeck">
    <dt>Slide 1</dt>
    <dd>Sample slide content</dd>
    <dt>Slide 2</dt>
    <dd>Sample slide content</dd>
    </dl>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $('.slidedeck').slidedeck();
    });
    </script>
    <!-- Help support SlideDeck! Place this noscript tag on
    your page when you deploy a SlideDeck to provide a link back! -->
    <noscript>
    <p>Powered By <a href="http://www.slidedeck.com"
    title="Visit SlideDeck.com">SlideDeck</a></p>
    </noscript>

    </div>
    <!-- Big banner →

  15. Save the page and reload the frontend.
  16. Our front page should have a slider just like the one seen in the following screenshot:

    Magento 1.4 Theming tutorial

  17. And we are done! Remember you can place any content you want inside these tags:

    <dl class="slidedeck">
    <dt>Slide 1</dt>
    <dd>Sample slide content</dd>
    <dt>Slide 2</dt>
    <dd>Sample slide content</dd>
    </dl>

How it works...

This recipe is also quite easy. We only need to load the necessary JavaScript files and edit the content of the home page, in order to add the necessary code.

Magento 1.4 Theming Cookbook Over 40 recipes to create a fully functional, feature rich, customized Magento theme
Published: August 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Nivo banner slider

Now we'll look at another slider, this time one of my favorites, the Nivo slider. This slider has many effects and options to configure it, a good feature for any website. In this recipe we are going to see how to use this powerful script.

How to do it...

Let's get started with this recipe. Follow these steps:

  1. First we need to download the script. We can find it here:

    http://nivo.dev7studios.com/.

  2. Once downloaded we should have a file called nivo-slider2.4.zip. We will unzip it.
  3. Inside we will find a file called jquery.nivo.slider.pack.js. Copy it and paste on skin/frontend/default/rafael/js/jquery.nivo.slider.pack.js.
  4. Also, inside the ZIP file we can find a file called nivo-slider.css; we will copy it to skin/frontend/default/rafael/css/nivo-slider.css.
  5. We will also need a copy of jQuery. Make sure to have a copy of it in skin/frontend/default/rafael/js. In this example I'm going to use jquery-1.4.3.min.js.
  6. Once we have every file in place it's time to start working in our Magento files.
  7. Now open app/design/frontend/default/rafael/layout/page.xml.
  8. Find the following piece of code:

    <default translate="label" module="page">
    <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml"
    template="page/2columns-right.phtml">

    <block type="page/html_head" name="head" as="head">

  9. Just below this add the following:

    <action method="addJs"><script>../skin/frontend/default/
    rafael/js/jquery-1.4.3.min.js</script></action>

  10. And finally, before the closing of the block, we are going to add the following code:

    <action method="addCss"><stylesheet>css/nivo-
    slider.css</stylesheet></action>
    <action method="addJs"><script>../skin/frontend/
    default/rafael/js/jquery.nivo.slider.pack.js</script></action>
    </block>

  11. Now we are ready to start making use of our script. And we are going to do that from our admin panel.
  12. Log into your Magento admin panel: http://127.0.0.1/magento/index.php/admin
  13. Now go to the CMS menu, then Pages, and select the home page:

  14. Once inside select the Content tab:

    Magento 1.4 Theming tutorial

  15. And then we click on the Show/Hide Editor button:

    Magento 1.4 Theming tutorial

  16. Now we are going to replace the big banner code:

    <div class="grid_18"><a href="#"><img title="Big banner"
    src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{skin url='img_products/big_banner.jpg'}}" alt="Big
    banner" /></a></div>

    With the following:

    <div class="grid_18">
    <div id="slider">
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{skin url='img_products/big_banner.jpg'}}"
    alt="Big banner 1" title="Banner 1"/>
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{skin url='img_products/big_banner.jpg'}}"
    alt="Big banner 2" title="Banner 2"/>
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{skin url='img_products/big_banner.jpg'}}"
    alt="Big banner 3" title="Banner 3"/>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $('#slider').nivoSlider({
    effect:'sliceUp',
    slices:15,
    animSpeed:800,
    pauseTime:6000,
    directionNav:true, //Next & Prev
    directionNavHide:false, //Only show on hover
    controlNav:true, //1,2,3...
    pauseOnHover:false, //Stop animation while hovering
    captionOpacity:.7 //Universal caption opacity
    });
    });
    </script>
    </div>

  17. Don't forget to save the changes.
  18. Now go to the front page and reload; we will be able to see something similar to the following screenshot:

    Magento 1.4 Theming tutorial

How it works...

Making the script work is quite simple; first we need to load the necessary assets with addJs and addCss:

<action method="addJs"><script>../skin/frontend/default/rafael/js/
jquery-1.4.3.min.js</script></action>
<action method="addCss"><stylesheet>css/nivo-slider.css</
stylesheet></action>
<action method="addJs"><script>../skin/frontend/default/rafael/js/
jquery.nivo.slider.pack.js</script></action>

Later, we can make use of the script, from our admin panel CMS pages, or directly in the template HTML files. The Nivo slider has many options that we can check here:

http://nivo.dev7studios.com/#usage

Keep in mind that sometimes while using the Nivo slider we can see the following error: Stack overflow at line: 881. If the error appears, try modifying the slider options, like using only one effect instead of effect:'random'.

Magento Easy Lightbox

This time we are going to try something a bit different. Instead of coding, this time we are going to install an extension from Magento Connect, the Magento Easy Lightbox. This is a nice extension with some quite useful features.

Getting ready

We are going to work with a Magento Connect extension, we will need to check for the extension here:

http://www.magentocommerce.com/magento-connect/TemplatesMaster/extension/1487/magento-easy-lightbox

Or here:

http://bit.ly/bvtvkN

How to do it...

This time putting this extension to work is even simpler than in previous recipes. You only need to follow these guidelines:

  1. First we need to go to the URL provided in the Getting ready section. Or perform a search in http://www.magentocommerce.com/magento-connect for Magento Easy Lightbox.
  2. Once there, we need to log into our account in order to get the Extension Key:

    Magento 1.4 Theming tutorial

  3. Now that we have the extension key, it's time to log in our Magento Admin. Then go to System | Magento Connect | Magento Connect Manager.
  4. Also log in to the Magento Connect Manager.
  5. Introduce the Key in the Install a New Extension form:

    Magento 1.4 Theming tutorial

  6. And click on the Install button.
  7. Once the installation is done, click on the Log out or the return to admin one.
  8. It may also be necessary to Log out of the admin panel and Log in again.
  9. Next we go to System | Configuration and we will be able to see a new tab called Templates-Master, just like in the following screenshot:

    Magento 1.4 Theming tutorial

  10. Now click on Easy Lightbox. The options panel for Easy Lightbox will appear under the General tab:

    Magento 1.4 Theming tutorial

  11. The extension has many interesting options, but we are going to concentrate on the main ones.
  12. First, select Yes for Enable EasyLightbox.
  13. Then select No for Keep Magento zoom.
  14. We can also select Yes for Replace empty image label with product name.
  15. With these options the extension should work, so let's go to our frontend. For example to this page: http://127.0.0.1/magento/furniture/living-room/ottoman.html.
  16. Here we can see something similar to the following screenshot:

    Magento 1.4 Theming tutorial

  17. And if we click on it we should see the following popup:

    Magento 1.4 Theming tutorial

  18. And we are done, but feel free to play with the options available in this great extension.

How it works...

This time it has been pretty easy to have this feature working. The only thing necessary has been to install the extension from Magento Connect and enable it from our admin panel. A quick and easy way to have a very interesting feature added to our site.

Magento 1.4 Theming Cookbook Over 40 recipes to create a fully functional, feature rich, customized Magento theme
Published: August 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Adding social media sharing to product page

Once we have our site ready, full of products we want to sell, wouldn't it be great to share them? This recipe is all about that. We are going to use another Magento Connect extension to add social media sharing capabilities to our site. Don't miss this one!

Getting ready

In order to follow this recipe you will need to download the extension from here:

http://www.magentocommerce.com/magento-connect/_Fluxe/extension/2333/magento-social-bookmarking

Or here:

http://bit.ly/api0Nv

How to do it...

This recipe involves installing a Magento Connect extension, and modifying one of our Magento template files. But don't worry, we will do this together. Let's get started:

  1. First we need to get the extension key for the social media sharing extension. Just navigate to the URLs suggested in the Getting ready section, or, make a search in the Magento Connect page for Magento Social Bookmarking Services.
  2. Once there, copy the Extension Key:

    Magento 1.4 Theming tutorial

  3. Once we have the extension key we will log into our Magento admin screen, if we haven't done so yet.
  4. Then we will go to the System menu, Magento Connect, and then Magento Connect Manager:

    Magento 1.4 Theming tutorial

  5. Log into your Magento Connect page and paste the extension key in the Install New Extensions form. Then click on Install:

    Magento 1.4 Theming tutorial

  6. Once the installation is done, return to the Magento admin panel.
  7. In the Magento admin panel go to the CMS menu, and then to Social Bookmarking:

    Magento 1.4 Theming tutorial

  8. This menu will direct us to the extension admin screen where we can see the default bookmarks it gives us:

    Magento 1.4 Theming tutorial

  9. By default they are all enabled, though the extension doesn't include icons or images for them. Don't worry, we can add them if we want. Just edit, or add, the bookmark you want:

    Magento 1.4 Theming tutorial

  10. The edit screen will let us add images, or change other configuration options, like the position or setting whether this book is enabled or not:

    Magento 1.4 Theming tutorial

  11. When we are done configuring the extension it's time to start using it. In the CMS pages it can be included as a widget, but we are going to see how to add it to our products page.
  12. First we need to go to app/design/frontend/base/default/template/catalog/product.
  13. Here, copy the view.phtml file.
  14. Paste it in app/design/frontend/default/rafael/template/catalog/product/view.phtml.
  15. Now open the view.phtml file in your favorite editor.
  16. Find the following piece of code:

    <div class="product-shop">
    <div class="product-name">
    <h1><?php echo $_helper->productAttribute($_
    product, $_product->getName(), 'name') ?></h1>

  17. And just below it add the next one:

    <?php echo $this->getChildHtml('bookmarks') ?>

  18. If we now load any product page, we will see something like the following screenshot:

    Magento 1.4 Theming tutorial

And we are done with this recipe; don't forget to include some nice icons!

How it works...

Like other Magento Connect extensions, usage is quite easy, though this time it was necessary to modify a template file. In general it was extremely easy to add social sharing features to our site.

Adding featured products to the home page

This time we are going to work on a nice feature for our site, adding featured products in the home page. Don't worry, it's not going to be that difficult.

How to do it...

This recipe involves some coding and some modifications in the Magento admin panel, but you can just start working:

  1. First log into our Magento admin panel.
  2. Then go to CMS | Pages.
  3. Click on the home page one:

  4. Once inside the page editing screen select the Content tab.
  5. Click on the Show / Hide editor button.
  6. Paste the following code in the editor:

    <div class="grid_18">
    <div id="slider"><img title="Banner 1" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{skin url='img_
    products/big_banner.jpg'}}" alt="Big banner 1" /> <img
    title="Banner 2" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{skin url='img_products/big_banner.jpg'}}"
    alt="Big banner 2" /> <img title="Banner 3" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{skin url=
    'img_products/big_banner.jpg'}}" alt="Big banner 3" /></div>
    <script type="text/javascript">// <![CDATA[
    jQuery(document).ready(function($) {
    $('#slider').nivoSlider({
    effect:'sliceUp',
    slices:15,
    animSpeed:800,
    pauseTime:6000,
    directionNav:true, //Next & Prev
    directionNavHide:false, //Only show on hover
    controlNav:true, //1,2,3...
    pauseOnHover:false, //Stop animation while hovering
    captionOpacity:.7 //Universal caption opacity
    });
    });
    // ]]></script>
    </div>
    <!-- Big banner -->
    <div class="grid_6"><a href="#"><img title="Don't miss our
    offers" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="{{skin url='img_products/dont_miss_our_offers.jpg'}}"
    alt="Don't miss our offers" /></a></div>
    <!-- Mini banner -->
    <div class="grid_24">
    <h1 class="tick">Featured toys</h1>
    </div>
    <!-- Big message end →

    Note that it's the same code we have previously seen, but without the demo featured products and footer icons.

  7. Now we need to add a new category. Go to the Catalog menu, then Manage Categories. Create a new category called Homepage, like in the following screenshot:

    Magento 1.4 Theming tutorial

  8. Make sure the category is enabled, but not included in the navigation menu. Also take note of its ID, as we are going to need it later.
  9. Now go to Catalog | Manage products.
  10. Click on any product you want in order to edit it. Once inside select the Categories tab and add the product to the newly created Homepage category:

    Magento 1.4 Theming tutorial

  11. Now we have everything in place, our next step is to start with the code. Go to app/design/frontend/default/rafael/template/catalog/product and create a file called homepage.phtml.
  12. Inside this new file place the following code:

    <?php

    $cat_id = "35";
    $_productCollection = Mage::getResourceModel('catalog/product_
    collection')
    ->addAttributeToSelect(array('name', 'price', 'small_image',
    'short_description'), 'inner')
    ->addCategoryFilter(Mage::getModel('catalog/category')->load
    ($cat_id));

    if(!$_productCollection->count()){
    echo $this->__('No products in the homepage category.');
    }else{

    ?>

    <div id="home-slideshow">
    <?php $i=0; foreach ($_productCollection as $_product){ ?>

    <div class="grid_6">
    <p class="product_title" style="height: 50px;"><?php
    echo $_product->getName(); ?> <br /><span class="orange">$<?php
    echo number_format($_product->getFinalPrice(),2);?></span></p>
    <div class="product_image">
    <div><img title="Exclamation" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php echo $this-
    >getSkinUrl('img/exclamation.png'); ?>" alt="Exclamation" />

    </div>
    <a href="#"><img title="Product Sample" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="<?php
    echo $this->helper('catalog/image')->init($_product, 'small_
    image')->resize(214, 157); ?>" alt="<?php echo $this-
    >htmlEscape($this->getImageLabel($_product, 'small_image')) ?>"
    style="border: 4px solid #FBA826;"/></a></div>
    <a class="price" href="<?php echo $_product-
    >getProductUrl() ?>" style="color: #ffffff !important">add to
    cart</a>
    </div>

    <?php } ?>

    </div>

    <?php } ?>

  13. Now that we have our template file, we need to load it in our layout file. Let's go to app/design/frontend/default/rafael/layout and open page.xml.
  14. Here, find the following code:

    <block type="core/text_list" name="right" as="right"
    translate="label">
    <label>Right column</label>
    </block>

  15. And just below it add the following:

    <block type="core/template" name="homepage" as="homepage"
    template="catalog/product/homepage.phtml"/>

  16. One last step awaits us; we need to modify our 2columns-right.phtml file. We will go to app/design/frontend/default/rafael/template/page and open 2columns-right.phtml.
  17. Here, find the following code:

    if($checkhome){
    ?>
    <div class="grid_18">
    <?php echo $this->getChildHtml('content') ?>
    </div>
    <div class="grid_6">
    <?php echo $this->getChildHtml('right') ?>
    </div>
    <?php
    }else{
    echo $this->getChildHtml('content');
    }
    ?>

  18. And change it so it looks like the following:

    if($checkhome){
    ?>
    <div class="grid_18">
    <?php echo $this->getChildHtml('content') ?>
    </div>
    <div class="grid_6">
    <?php echo $this->getChildHtml('right') ?>
    </div>
    <?php
    }else{
    echo $this->getChildHtml('content');
    echo $this->getChildHtml('homepage');
    ?>
    <div class="clear"></div><br/>
    <div class="grid_24">
    <h1 class="more_products text_right"><a
    class="orange_link" href="#">Of course we have many more toys,
    take a look!</a></h1>
    </div>
    <!-- Big message end -->
    <p>&nbsp;</p>
    <div class="grid_6">
    <h3 id="lock"><a class="blue_link"
    href="#">Buying in our store is secure</a></h3>
    </div>
    <div class="grid_6">
    <h3 id="question"><a class="blue_link"
    href="#">Got any questions? Ask us!</a></h3>
    </div>
    <div class="grid_6">
    <h3 id="shield"><a class="blue_link"
    href="#">Satisfaction Guaranteed Always!</a></h3>
    </div>
    <div class="grid_6">
    <h3 id="worldwide"><a class="blue_link"
    href="#">We sell our products worldwide</a></h3>
    </div>
    <!-- End of h3 messages -->
    <?php
    }
    ?>

  19. If we now reload our frontend home page we will see something like the following screenshot:

    Magento 1.4 Theming tutorial

  20. Now we can add any product we want to the home page, in an easy way.

How it works...

The most important part here is the homepage.phtml template file, but how does it work? Quite easily; first we get the products from our selected category:

$cat_id = "35";
$_productCollection = Mage::getResourceModel('catalog/product_
collection')
->addAttributeToSelect(array('name', 'price', 'small_image', 'short_
description'), 'inner')
->addCategoryFilter(Mage::getModel('catalog/category')->load($cat_
id));

Later we check if we have any results:

if(!$_productCollection->count()){
echo $this->__('No products in the homepage category.');
}else{

And then we loop through all the results:

There's more

We can modify the homepage.phtml file a bit (note the code in bold):

<div id="home-slideshow">
<?php $i=0; foreach ($_productCollection as $_product){ ?>

<div class="grid_6">
<p class="product_title" style="height: 50px;"><?php
echo $_product->getName(); ?> <br /><span class="orange">$<?php
echo number_format($_product->getFinalPrice(),2);?></span></p>

This way, clicking on the Add to cart link effectively adds the product to the cart.

Summary

In this article, we modified other theme pages, such as the cart one, the buying process, and some others. This will help us make our theme more consistent and create a theme that really suits our needs.


Further resources on this subject:


About the Author :


Jose Argudo Blanco

Jose Argudo Blanco is a web developer from Valencia, Spain. After finishing his studies he started working for a web design company. After working for six years for that company and some others, he decided to work as a freelance.

Now, after some years have passed, he thinks it's the best decision he has ever takena decision that let him work with the tools he likes, such as CodeIgniter, Joomla!, CakePHP, JQuery, and other well-known open source technologies.

For the past few months he has also reviewed some books for Packt Publishing, such as Magento 1.3 Theme Design, Magento: Beginner's Guide, Joomla! 1.5 SEO, Symfony 1.3 Web Application Development, and Joomla! with Flash. The one yet to be published is Magento Development with PHP.

Books From Packt


Further resources on this subject:


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
E
W
j
E
Q
c
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software