[ Send this article ]
Your message has been sent.
How would you like to send this article:
[ Save this article ]
Save this article to your account for easy access.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
Complete the form below to send this article, Magento 1.4 Theming: Making Our Theme Shine, to a friend (or to yourself). We will never share your details (or your friend's) with anyone. For more information, read our Privacy Policy.
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
| 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:
- 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.
- 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:
- On that screen we only have to follow all the instructions and click on the Let's do this button:
- 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:
- After downloading the Cufón library, we will download a file called cufon-yui.js.
- We now have all the necessary tools. It's time to make use of them.
- First place cufon-yui.js and Aldo_600.font.js inside skin/frontend/default/rafael/js.
- Now we need to edit our layout file. Let's open: app/design/frontend/default/rafael/layout/page.xml.
- 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> - 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.
- 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.
- At the bottom of this file we are going to add the following code:
<script type="text/javascript">
Cufon.replace('h1');
</script>
</body>
</html> - And that's all we need. Check the difference! Before we had something like the following:
- And now we have this:
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:
- 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.
- Once downloaded we will end up with a file called slidedeck-1.2.1-litewordpress-1.3.6.zip. Unzip it.
- 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
- Next, place the following files in skin/frontend/default/rafael/js:
- jquery-1.3.2.min.js
- slidedeck.jquery.lite.pack.js
- Good, now everything is in place. Next, open: app/design/frontend/default/rafael/layout/page.xml.
- 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> - 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> - 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> - The following steps require us to log in to the administrator panel. Just go to:
http://127.0.0.1/magento/index.php/admin.
- Now to CMS/Pages, open the home page one:
- Once inside, go to the Content tab.
- Click on Show/Hide editor.
- 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 → - 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 → - Save the page and reload the frontend.
- Our front page should have a slider just like the one seen in the following screenshot:
- 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.
| 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:
- First we need to download the script. We can find it here:
- Once downloaded we should have a file called nivo-slider2.4.zip. We will unzip it.
- 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.
- 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.
- 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.
- Once we have every file in place it's time to start working in our Magento files.
- Now open app/design/frontend/default/rafael/layout/page.xml.
- 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"> - Just below this add the following:
<action method="addJs"><script>../skin/frontend/default/
rafael/js/jquery-1.4.3.min.js</script></action> - 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> - Now we are ready to start making use of our script. And we are going to do that from our admin panel.
- Log into your Magento admin panel: http://127.0.0.1/magento/index.php/admin
- Now go to the CMS menu, then Pages, and select the home page:
- Once inside select the Content tab:
- And then we click on the Show/Hide Editor button:
- 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> - Don't forget to save the changes.
- Now go to the front page and reload; we will be able to see something similar to the following screenshot:
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:
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:
- 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.
- Once there, we need to log into our account in order to get the Extension Key:
- 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.
- Also log in to the Magento Connect Manager.
- Introduce the Key in the Install a New Extension form:
- And click on the Install button.
- Once the installation is done, click on the Log out or the return to admin one.
- It may also be necessary to Log out of the admin panel and Log in again.
- 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:
- Now click on Easy Lightbox. The options panel for Easy Lightbox will appear under the General tab:
- The extension has many interesting options, but we are going to concentrate on the main ones.
- First, select Yes for Enable EasyLightbox.
- Then select No for Keep Magento zoom.
- We can also select Yes for Replace empty image label with product name.
- 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.
- Here we can see something similar to the following screenshot:
- And if we click on it we should see the following popup:
- 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.
| 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:
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:
- 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.
- Once there, copy the Extension Key:
- Once we have the extension key we will log into our Magento admin screen, if we haven't done so yet.
- Then we will go to the System menu, Magento Connect, and then Magento Connect Manager:
- Log into your Magento Connect page and paste the extension key in the Install New Extensions form. Then click on Install:
- Once the installation is done, return to the Magento admin panel.
- In the Magento admin panel go to the CMS menu, and then to Social Bookmarking:
- This menu will direct us to the extension admin screen where we can see the default bookmarks it gives us:
- 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:
- 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:
- 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.
- First we need to go to app/design/frontend/base/default/template/catalog/product.
- Here, copy the view.phtml file.
- Paste it in app/design/frontend/default/rafael/template/catalog/product/view.phtml.
- Now open the view.phtml file in your favorite editor.
- Find the following piece of code:
<div class="product-shop">
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_
product, $_product->getName(), 'name') ?></h1> - And just below it add the next one:
<?php echo $this->getChildHtml('bookmarks') ?>
- If we now load any product page, we will see something like the following screenshot:
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:
- First log into our Magento admin panel.
- Then go to CMS | Pages.
- Click on the home page one:
- Once inside the page editing screen select the Content tab.
- Click on the Show / Hide editor button.
- 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.
- 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:
- 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.
- Now go to Catalog | Manage products.
- 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:
- 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.
- 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 } ?> - 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.
- Here, find the following code:
<block type="core/text_list" name="right" as="right"
translate="label">
<label>Right column</label>
</block> - And just below it add the following:
<block type="core/template" name="homepage" as="homepage"
template="catalog/product/homepage.phtml"/> - 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.
- 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');
}
?> - 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> </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
}
?> - If we now reload our frontend home page we will see something like the following screenshot:
- 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:
- Magento 1.4 Theming: Working with Existing Themes [Article]
- Non-default Magento Themes [Article]
- Magento 1.4: Performance Optimization [Article]
- Getting Started with Magento Development [Article]
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:
- Magento 1.4 Theming: Working with Existing Themes [Article]
- Non-default Magento Themes [Article]
- Magento 1.4: Performance Optimization [Article]
- Getting Started with Magento Development [Article]
Post new comment