This tutorial has come out of necessity for a homepage featured product slider, I had tried quite a few different tutorials but never achieved what I was looking for. Magento is a great open-source ecommerce package, but Im a little surprised that featured products isn’t a feature built-in. Hopefully this tutorial will help. Help support open source!
(more…)

I have started doing more little personal projects for fun, the lab will be a place where I can show off these little projects. I have an ongoing list of about 10 ideas for websites that I want to build, plus about 20 domains. I have recently starting learning code igniter which is a php framework similar to how rails is setup. I started building dogfriendlyparks, which is my first solo-project that Im showcasing in “the lab”. If you follow my blog, I will be posting tutorials for the lab projects that I will be working on so you can follow along and learn some fun new stuff.

Check out The Lab Now!

A few months ago, I created a little script using the jQuery library which will add class=”current” to tabs, allowing you to highlight your menu for you users. Its pretty basic, but it searches the URL, if it finds a match with the link that was clicked – then it add’s class=”current” to that particular tab. You can then use that class in your css, to make a highlighted state.

Here is the code:

 
// Highlight Tab v.01 by Jake Rutter
// Website: http://www.onerutter.com
// Feel free to use and adapt, please just give credit where credit is due.
 
// ----------- highlight tab function -----------
    var path = location.pathname;   
 
    var home = "/";
    $("a[href='" + [ path ] + "']").parents("li").each(function() { 
        $(this).addClass("selected");
    });

Feel free to adapt and use this code on your site, I would appreciate it if you could leave my comments in as the creator in the .js file. If you are unfamiliar with how jQuery works, you can read this tutorial which will get you up to speed!

Yesterday, I received an email from Appcelerator, informing me of a new product of theirs called Titanium. Appcelerator Titanium is an open source RIA platform for developer desktop web apps, similar to the Adobe AIR platform, in that it uses standard, common web languages such as html, css, and javascript. That is what caught my eye, as I’ve read a few books on flex and messed around a bit, but I already know the ins and outs of html/css/javascript. Thats my everyday toolkit for building websites and user interfaces. I ventured onto their website, and watched a few screencasts and then downloaded the demos, which included a twitter and youtube demo.

After checking out the demos sourcecode, I was pretty damn impressed. I thought to myself, “What’s next? How do I start? “. I found the SDK, but just the word SDK can be a little daunting for a web developer, I like to think of it as more of a WDK or Web Development Kit. So I downloaded it, installed it, and followed a screencast from their website to generate my first app. It took about 20 min from start to finish, and Voila! I had a sample app running from an installer. Amazing!

My past experience with Ruby on Rails also helped, as the setup of the app is very similar to that of a ruby on rails project. The terminal commands were easy, and the ability to create installers for OSX, Windows, and Linux were kickass! The documentation was also excellent for such an early release, I only ran into one bug on windows, but I think it had to do with Chrome support for my code, so it could have been a self-inflicted bug and not a Titanium bug.

One of the most desirable things about Titanium is that it has the jQuery library built-in, AWESOME! So I decided to dedicate 2 hrs to messing around in Titanium to see just how far I could get. Well, in 2 hrs I built a little desktop app that allows you to play 6 videos through a custom flash player that are streamed from the web. I basically re-used code from another project that utilized flash, jQuery, and html/css to see if it would work and how fast I could get something up and running. Its not anything I would release to the world, but it really opened my eyes up to how fast I could get something done and the possibilities that Titanium have opened for me.

I’m ready to sell my books on Flex, remove Flex builder from my desktop and go all out on Titanium. What does Flex give me that Titanium doesn’t, and if there is something – then Im sure the guys at Appcelerator will be adding soon enough, as this is just a Preview Release.

So if you haven’t yet checked out Appcelerator Titanium, I highly encourage you to do so.

Thank you Appcelerator!

Also, today someone posted great article on The similarities/differences of Appcelerator Titanium and Adobe AIR

Magento Tutorials

Im compiling a list of the best tutorials from the web for Magento.

Magento Official Documentation:
Screencasts
Magento User Guide
Designers Guide
Knowledge Base
Webinar Archive
Magento Forums
Wiki

If after searching through all of these resources on the Magento Site and you still can find what you are looking for, then check out some of the tutorials below. The best thing about Magento is the community, people will find out how to do something and then share it with everyone else, and thats what makes the software better.

Installation

• Screencast: How to Install Magento on Shared Web Hosting using SSH
• Tutorial: Step by Step How to Install Magento on Crucial Web Host
• Official Magento Tutorial: Installation via SSH
• Official Magento Tutorial: Installation via FTP

Functionality

• Creating Landing Pages in Magento

Customization

• Setup a Blog inside your Magento Store
• How to get products to show on the home page
• Featured Products on Magento Home Page
• Custom Category Images Listing
• How to add Shadowbox Modal
• How to create a new Magento Theme
• Bestseller Products in Magento

Development

• How to use Template Path Hints
• How to write a custom Module

Getting Table Rates to work with v1.1.6 was trivial. Magento has a great tool built-in for uploading a spread-sheet that contains your table rates. I tried this about 3-4 times before realizing that there must be a bug after seeing the words “Sorry, no quotes are available for this order at this time.” displayed on the website where the shipping methods are usually located. I did some research on the magento forums and found that some other users had similar issues.

The solution was to export the .csv document from magento to your desktop, then open in a text editor (NOT EXCEL), then make you adjustments, then re-upload. Voila, it works.

Here is a sample of what my .csv file looked like:
“Country”,”Region/State”,”Zip/Postal Code”,”# of Items (and above)”,”Shipping Price”
“USA”,”*”,”*”,”1”,”3.95″
“USA”,”*”,”*”,”3”,”5.95″
“USA”,”*”,”*”,”5”,”7.95″
“*”,”*”,”*”,”1”,”7.95″
“*”,”*”,”*”,”3”,”9.95″
“*”,”*”,”*”,”5”,”12.95″

At the time of writing this post, v1.1.8 has just been released and one of the bug fixes looks like a table shipping rates fix. I haven’t tried it yet, but wouldnt be surprised if this was fixed now. Good Job Magento!

Recently, I just finished coding out a website for a client in Magento. You can view the site at www.3graces.com, it was a full switch from some old legacy asp shopping cart to Magento. Im really happy with the way things turned out and the client is too, Magento just has so many wonderful features built-in.

One feature that I found wasn’t built in was a way to display each sub-category with an image, and its name on a landing page. Magento has a nice feature which allows you to assign an image to a category, but doesnt give you a way to make that show up in a listing somewhere.

I setup 6 main categories, with each having multiple sub-categories and I wanted to have a way to show all those sub-categories to the user on a nice page that was pleasing to the eye. Here is an example: Payot Paris by Category.

To achieve this layout, I created a block called sub_navigation.html and placed it in the following directory: app/design/frontend/3graces/default/template/catalog/navigaton/sub_navigation.html

<div id="categories">
<div class="col_full">
 
 
<div class="listing" >
<?php $_maincategorylisting=$this->getCurrentCategory()?>                        
<?php $_categories=$this->getCurrentChildCategories()?>
 
<?php if($_categories->count()):?>
           <? foreach ($_categories as $_category):?>
 
                        <? if($_category->getIsActive()):
 
                        $cur_category=Mage::getModel('catalog/category')->load($_category->getId());
           $layer = Mage::getSingleton('catalog/layer');
           $layer->setCurrentCategory($cur_category);
 
			$catName = $this->getCurrentCategory()->getName();  
 
			if($_imageUrl=!$this->getCurrentCategory()->getImageUrl()):?>
 
			<div class="category-box">
				<div class="category-image-box">
					<a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="/skin/frontend/3graces/default/images/category_image_default.gif"></a>
				</div>
				<div class="category-name">	
					<p><a href="<?php echo $this->getCategoryUrl($_category)?>">
						<?php echo $catName ?></a></p>
				</div>
			</div>	
 
			<?endif?>
 
			<? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
 
         <div class="category-box">
				<div class="category-image-box">
					 <a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="<?php echo $_imageUrl?>" height="80"></a>
				</div>
				<div class="category-name">	
					<p><a href="<?php echo $this->getCategoryUrl($_category)?>"> <?php echo $_category->getName()?></a></p>
				</div>
			</div>
 
 
 
<?                                              
                        endif;
                        endif;?>
            <?endforeach?>
 
            <?php /* This resets the category back to the original pages category
****     If this is not done, subsequent calls on the same page will use the last category
****    in the foreach loop
*/   ?>
<?php $layer->setCurrentCategory($_maincategorylisting);  ?> 
    <?endif;?>
 
 
</div>
<br clear=all>
</div>
</div>

If you notice, I placed an if statement in the code that first checks if an image has been set for the category. If one has, it will show it – if there isn’t an image it will show a default image that I have chosen. Here is an example, when only 1 image for a category has been setup, and the rest are the default.

To make the block show up as an option in Magento Admin, you will need to go to CMS > Static Blocks. Once you get there, click Add New Block and fill in the following fields.

Block Title: Sub Category Listing
Identifier: sub_category_listing
Status: Enabled
Content: {{block type=”catalog/navigation” template=”catalog/navigation/sub_category_listing.phtml”}}

Once you have added all those fields, you can click save. Now to enable this static block for a parent category that contains a bunch of sub-categories with images that are set.
Go to: Catalog > Manage Categories

Then click on the parent category to which you wish to add this layout, scroll to the bottom of the first tab “General Information”.

You will see the following fields, just setup as follows:

Display Mode: Static Block Only
CMS Block: Sub Category Listing
Is Anchor: Yes

Now if you go back to your category on the website, you should see your newly setup sub category image listing page. If you arent seeing any images, make sure you setup you default image and placed it in the current directory within your magento install.

Thanks!

The import/export tool is very useful within Magento. Being that there is limited documentation on the topic, I thought I would add my .02.

Basically you can use the import/export tool to do mass imports of products. It makes it much easier if you would like to add 50 products all at once, you would just create a csv or xml file with the matching fields for the database, add your information and then use the import tool to import the products. You can retrieve a sample csv or xml file, but doing an export.

Doing an export is very easy, and allows you to export all of your products out of your website. You might want to do this, if you are moving your website or need to reinstall or upgrade your website, and need to get the products out.

Its a very useful tool.