6 Steps to creating a featured products jQuery slider for Magento

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!
Read more

Helpful Magento Tutorials from the Web

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

Functionality

Customization

Development

Magento: Getting Table Rates to work with v1.1.6

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!

Magento: Custom Category Images Listing Block Tutorial

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!

Magento: How to use the Import/Export Tool

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.

An Introduction to Magento: Open Source Ecommerce

I have been learning Magento for the past few months, for a client’s website that I have been working on. Its a pretty robust Open Source Ecommerce plaform that is built on the Zend PHP Framework. At first, it was rather daunting trying to find my way around the software – its pretty robust and the documentation for creating a theme feels rather incomplete. It’s nothing like WordPress which I would take in a heartbeat, if they had a solid enough Ecommerce plugin, I have been spoiled by the WordPress Theme engine for quite some time now.

To make my way around Magento, I have been finding bits and pieces of information scattered across many websites. To make it easier for others, Im going to try to assemble the basics here for you.

The hardest piece for me to grasp has been the folder structure, you have to bounce between two places to build a theme, here is a rundown.

http://www.magentocommerce.com/wiki/Magento-folder-structure/

  • /skin// / – is where design package css and images are
  • /app/design is location of design packages (layouts, templates, translations)
  • /app/design// – theme customizations
  • /app/design// /layout – .xml files that define block structure for different cases in website flow
  • /app/design// /template – .phtml (html with php tags) templates
  • /app/design// /translate – Zend_Db compatible translation files

Common Template Path Hints


getSkinUrl('css/styles.css')?>
getJsUrl()?>

Online Resources