DurkinTreeService.com, Tree Sevice for Lake Tahoe

I’ve just completed a new website for local South Lake Tahoe business owner, Dan Durkin at www.durkintreeservice.com. The site is running a completely custom design on the Wordpress platform. Using Wordpress as a CMS allows easy editing of any page on the website, as well as adding unlimited posts to the blog section. This is highly valuable both from a usability standpoint as well as a method of generating more traffic on the website.

Dan Durkin of Durkin Tree Service provides quality tree service, tree pruning, firewood, storm damage and more in the Lake Tahoe and surrounding areas.

Click to jump to a topic: How to edit the default Magento “Contact Us” page, Making Magento visible through AOL, Change the default Magento eMail template, Clear your test orders before going live and assign free shipping on a per product basis.

Getting Started With Magento

So you’ve downloaded and installed the latest version of Magento and it’s running fine on your server. Now you want to start changing how it looks. The template system in Magento is a little different than others and is the target of some griping. First off, they have categorized the system into “stores” and then “store views” So you can run multiple stores on the same Magento installation. It’s a powerful feature, though I’m not sure how needed it is. The whole block of cheese is explained here in the designers guide. The second different thing is the files you will want to edit for your template ( Layouts, Templates and Skins files ) are stored deep in two different locations. So, browse to your local copy of Magento. In the root directory there are 2 folders to pay attention to. /app and /skin. The nuts and bolts, things like template files to change functionality and layout, localization files and layout files are stored in the /app folder. Graphical and design items such as css files and images are stored in the /skin directory. This Magento guide page explains it well.

The layout .xml files, ( /layout )  the localization files ( locale ) and the .phtml template files ( /template ) are located for the default theme in

/app/design/frontend/default/default/

The design related files like .css, .js and images are in

/skin/frontend/default/default/

YES, it’s a pain to navigate between these directories, especially via FTP, but after a while you won’t even have to think about it.

I wanted to try out a fresher theme than the default. The “Modern” theme is provided free at Magentocommerce.com. But nooo, you can’t simply download and install the theme. You are forced to use the “easy” download system built into Magento called “Magento Connect”. Found in the administration under system/magento connect/magento connect manager. Log in with your regular admin creds. Paste the extention key you got from the previous page in to the box and click install. Now cross your fingers. What’s supposed to happen is the theme is supposed to install dircetly onto your server, into the proper directories and everything. It’s a neat concept. Id rather have a manual install, as you need the local files later anyway. In any case, it did not work for me. I tried twice and it seemed to stall out, not installing all the needed files. So I finally found this page which actually had a .zip of the modern theme, though at version 1.1. So you could try that, it worked for me, or hunt for a newer copy of the modern theme, as Magento is up to 1.3 as of this posting.

So, using the above folder structure your folder structure would look like this:

/app/design/frontend/default/modern/
and
/skin/frontend/default/modern/

Enable the modern theme through Magento admin: System -> Configuration -> Design and under the Theme section, put “modern” for Templates, Skin, Layout and Default.

How to edit the Magento default “contact Us” page.

The default page is a PHTML page caled form.phtml

/app/design/frontend/default/[your-theme]/template/contacts/form.phtml

I took this line of code:

And made it into this chunk, which achieved all I needed to do. A quick hack, but it may get you started.

Magento won’t work with AOL!?!

Yep, AOL America Online strikes again. It happened that my client and all her friends and relatives were on AOL. So, while I had hours into the site and it appeared fine to me in IE and FF, to her it was “broken”. Apparently, on the IE 6 based AOL browser, the index.php page just refreshed when any link was clicked. I did some snooping and finally the good people on the Magento forums shed some light on the subject. (thread). Appearently AOL works through proxy servers which trip the alarms for Magento’s default settings for session validation. In other words, A user from AOL would appear to jump from IP address to IP address as the AOL proxy moved them around and Magento would see this as possible browser hijacking and stop the connection. So the following is a temporary hack at best.

Change the following settings in the admin
system / configuration / general / web / session validation settings

Validate REMOTE_ADDR “NO”

Validate HTTP_VIA “NO”

Validate HTTP_X_FORWARDED_FOR “NO”

Validate HTTP_USER_AGENT “YES”

Some people reported their sites working with only Validate Remote_addr turned off, but not for me, I had to disable the other two. Now, as these functions protect against session hijacking, it’s not really great to turn them off. Don’t display card details on the site. Hopefully there is a better fix in the future. Use at your own risk!

Edit the default Magento eMail Templates

How to edit the default Magento Email templates. The are stored in:
\app\locale\en_US\template\email\

Be aware that not all files in the folders need editing, and some templates have info in different spots, so be attentive.

Edit the following info:

replace alt=”Magento” with alt=”your store name”

replace Magento Demo Store with your store name

replace mailto:magento@varien.com with mailto:email@yourstore.com

replace dummyemail@magentocommerce.com with email@yourstore.com

replace (800) DEMO-STORE with (0800) YOUR STORE NUMBER

replace Monday – Friday, 8am – 5pm PST with your own store opening times and timezone

To replace the logo image, make a new image, (The default magento image is 169×49 for reference) name it logo_email.gif and put it here:
/skin/frontend/default/modern/images/logo_email.gif

You may also change aspects of the templates in the magento administration under
system –> transactional emails.

Clearing Your Magento Test Orders before going live

So, you are all set, everything works but you have a bunch of test orders you placed through the cart while trying everything out. As of this posting, Magento does not offer a way to fully delete orders. So the work around is to run an SQL query on the database, deleting the proper data, and reseting the store to “zero”.

Instead of running through all this I’m just going to link you to the site that helped me out, eliasenteractive.com

Be aware that you must replace the instances of YOUR_DB_NAME in the script with your actual database name.

Assigning Free Shipping on a Per Product Basis

This one threw me for a curve at first. Lets assume you have a cart with a pre existing shipping method, like UPS and a bunch of regular products. But then you have a few products, say for example, gift certificates, (my problem) that weigh next to nothing, yet the minimum UPS charge is still around $6. Customers would hate that right? So we need free shipping for those products ONLY, then simply mail the Gift Certificates out via regular USPS mail and eat the cost of the stamp. (Of course this is just an example, which happened to be my problem. You may want to have products with free shipping for all kinds of reasons.)

So, the method is two-fold. First you must ALLOW free shipping to even exist in the first place in the system -> configuration. Second, you will create a custom “shopping cart price rule” to assign the free shipping to only the desired products.

Step 1

In your magento admin, first browse to system, then configuration.

Under sales, select the shipping methods category.

Open the Free Shipping tab. You only change two things.
For Enabled: YES
For Minimum Order Amount, enter some crazy huge number. I entered 999999999. This is half of the trick. It enables free shipping as a “possibility” within the cart, yet no regular order would ever reach that level. If you already have this enabled (free shipping for orders over $50 etc..), then skip to step 2.

I’m not sure if it’s required, but I did the same thing under my standard shipping method as well. (for me it was UPS)

Free Shipping for Minimum Order Amount: Enable

Minimum Order Amount for Free Shipping: 999999999 (same crazy huge number as before)

Click the orange “Save Config” button to save your new settings.

Step 2

From the main Magento Admin menu at the top, go to Promotions, then select Shopping Cart Price Rules.

Click the Orange Add New Rule

Rule Information Tab:

Rule Name: Whatever You want
Description: Whatever You want
Status: Active
Customer Groups: As a default, Select all. (Hold the CTRL key and click)
Coupon Code. NOTHING (don’t enter anything here.)
Uses per coupon: 1000000000 (some huge number)
Uses per customer: 1000000000 (some huge number)
From Date / To Date: Leave blank to start now / end never.
Priority: 0 ?
Public in RSS Feed: no

Conditions Tab:

No changes needed, at least in my case.

Actions Tab:

Apply: Fixed amount discount for Whole Cart

Amount Discount: 0
Max. Quantity Discount Applied to: 0
Discount Qty Step: 0
Free Shipping: For Matching Items Only
Stop Further Rules Processing: NO

Apply the rule only to cart items matching the following conditions

This is key.
Click the green + button to add a new rule.
Select SKU.
Click “is” and change it to “contains“.
Click the “…“, enter the unique segment of the SKU on you free products. For example the SKUs for my gift certificates were gift25,gift50,gift75 etc.., so here, I entered “gift“. You may simply want to append your free product SKUs with the word “free” for clarity, then enter “free” back here. You can do this however you want, but be sure to not use anything that may be contained in a regular products SKU.
So for me that line read:
SKU contains gift

Click the Orange Save Rule Button.

That’s it! Try it out.
There’s another method I came across which is the same, except instead of anchoring the Shopping Cart Price Rule (promotion) to a products SKU, a custom attribute is created for that product and then the promotion is tied to that attribute instead of an SKU. See it here.

I hope these tips helped some of you out. Feel free to sign up and leave more tips, questions or set me right on a mistake I may have made in the comments.

A free image from MorgueFile

As a designer, often an occasion will arise where all of a sudden I need a certain image, of a certain subject, with certain colors and I need it fast. Project budgets, not to mention my own budget, don’t always allow me to pay for commercially licensed photography and images. Luckily for you and me, we have free stock photography websites.

As long as images have been for sale on the internet, images have been made available for free. And now there’s more places to get these images than ever. I’ve put together a list of my favorites below. Do you know of a good one that I missed? Drop it in the comments!

MorgueFile
Don’t be afraid to go to the Morgue! Weird name huh? From the site: “The term “morgue file” is popular in the newspaper business to describe the file that holds past issues flats. Although the term has been used by illustrators, comic book artist, designers and teachers as well.” Another good site. Note: This may not still be true for you by the time you read this, but as of the time of this posting, MorgueFile is undergoing a site re-design. In doing so, they are offering access to their entire archive of free images, without even registering or logging in.

Stock.xchng
It may have an awkward name and url (www.sxc.hu/) but this free stock photography site has been around for over 7 years and now has over 380,000 images in it’s bloated belly. A variety of searching options help you to find the image you are looking for. Be aware that the licence agreement that applies to all Stock.xching images has a few restrictions on usage. Read it before downloading.

Every Stock Photo
EveryStockPhoto.com has got a ton of images. Over 4 million of them. However, the images fall under a variety of different licensing agreements, including Creative Commons, GNU, public domain, and custom free licenses, so be sure to check out the license for the image you want before you run off to use it.

Open Photo
OpenPhoto.net is a smaller open source type site. Images are licensed on an individual basis by their owners. I’m not sure how many images are available, though a quick search did yield some good results. Also, no registration/login makes swooping in the grab a pic quick and easy.

Nations Illustrated
Nations Illustrated focus’ on scenic and landscape photography. You can search by geographic region. Great idea, but not a whole lot of images here yet (7,300). Still it might be worth checking out if you are in need of an outdoor shot from a specific part of the world.

PhotoRack
This site uses a basic sort of forum or messageboard style layout to browse images by category (Lifestyle, Nature, Food, Cooking etc..). They have over 27,000 images in 149 categories. This is another good site to zero in on an image you need and pick it up quick, as there are no logins or registration. The other great thing? “All pictures listed at PhotoRack are Free to use for personal and commercial projects. No limitations.”

If you are still hungry for more, check out this list of 30 free stock image websites.