Introducing the osCommerce HOT 100

I’ve been working on coding up a new twist on the “Lives Stores” area of the official osCommerce site.  I went through lots of shops over the past few days, trying to find those that have something exceptional about them.

So far, I am at 42 Stores which (in my opinion) show some skill with regards to the look/theme.  I’m going to call it the osCommerce HOT 100 – hoping eventually to reach 100 outstanding osCommerce sites.

Not only will a list of sites give us all something to look at, it will also help other sites to become better.  Anyway, I would like to introduce the osCommerce HOT 100.

If YOUR site is listed, well done!  You are one of the best looking osCommerce Stores out there.   If you know an exceptional osCommerce site that should be on the list, click the Orange “Add URL” button and input the URL and Shop Name (Anchor Text).  It will then get added to a list which I will then go through and authorise.

Remember that your site needs to have something exceptional about it’s appearance in order to make the list!

So, come on guys – vote for the HOTTEST of the osCommerce HOT 100!

Horrible or Awesome #3 – Optimise Your Images

Optimizing your images in Photoshop or another image editing program takes time – your valuable time. Just leaving them huge and making the customer download 3MB of images for each page in your site takes time too – the pesky customer’s time.

Everybody knows customers love to wait to buy your products. Play a game! See how big you can make your images, see how long your load time suffers, and then see how your conversion rates fare!

Challenge yourself to approach dialup speeds over your cable modem using your stellar layered uncompressed image design – I’m sure your customers will love it.

Do you optimise your images as much as possible?  Doing so will make your site look better and make your customers shopping experience better.  Read on…

There are many image editing programs out there, and I can’t cover each and every one. However, the process for all of them is roughly the same.

You need to either “Save for Web” in Photoshop or “Export > JPEG/GIF Optimizer” in Paint Shop Pro. What this does is allow you to compress your images in quality and color depth so that they download quicker. Quicker loading images means happier customers that spend more time looking at your products and not waiting for the page to load. Happier customers mean more sales and higher conversion rates.

You will find that some images save smaller in GIF (usually images with fewer colours) and some save smaller in JPEG (photos, product images, larger images, headers). Play around, and try to find the best mix of quality and size.

Remember: To pop the page up in less than 8 seconds on 56k, you need to have less than 30k of images.

This is probably impossible with an ecommerce site, but it gives you a measuring stick of how long your images are going to take to load.

This post is courtesy of my good friend Jason over at JC Commerce.

MySQL Server DOWN – oh no!

In the official osCommerce Forum I got into bit of a conversation with a Store Owner, part of the conversation was all about what happens if your MySQL server goes down whilst the webserver is still up and running.

For those who don’t know, MySQL runs on it’s own little server as part of the overall web server.  So it is possible for one to be down whilst the other is functioning OK…

OK, so, in a standard osCommerce shop, what will happen is that a message will be displayed, like this:

Unable to connect to database server!

Which isn’t so great for anything – after all, it is your CUSTOMERS who will see this!  So, my idea was to make this message a little better for you and your customers.

Open up the file /includes/application_top.php and find

tep_db_connect() or die(‘Unable to connect to database server!’);

This line of code is simply saying “Connect to the Database OR kill the connection and show the “unable to…” message.  We are going to change this line of code to;

@tep_db_connect() or header(“Location: busted.html”);

Now we are saying “Connect to the Database OR redirect to a page called busted.html”.  Easy, eh?  Notice that we also put an “at” (@) sign in front of tep_db_connect – this is important as we wish to make sure we suppress any other error messages.

Save the /includes/application_top.php file and upload it to your server to replace the old one (which you might like to backup first!).

The next step is to make a new HTML page called “busted.html”.  On this page you can have anything you like – maybe an error message, maybe a “contact us by phone” message – maybe something else entirely!

However, there is one VERY IMPORTANT CAVEAT – the “busted.html” page MUST NOT connect to your database!  As your database server is down, it would be completely pointless to do so.

Of course, the page can be .php if you wish and it doesn’t have to be called “busted.html” – it can be called anything you like.  Just make sure that the name fo the file and the “Location” line of code match exactly!

You could send yourself an error message by email, or you could even send a signal to the server to restart the SQL server (this would be for very advanced users who have control of their own server).  For most of us, a simple HTML page will suffice.

Why 404 redirect won’t work in this case

If your SQL server is down, pages are still presented by the webserver, so they do not 404 (error out) and redirect.  What this means is that you could go to;  site.com/product_info.php?products_id=123 and see “Unable to Connect” – this is NOT a 404 and so it won’t redirect to an error page.   Does this make sense?

Make A Comment, Ask A Question

When you are making a comment (on this blog) or asking a question (by email), please follow these “rules”;

  1. Be polite. 
    Goes without saying.
  2. Ask your question (or make your comment) usefully. 
    Ask your question giving as much detail as you can, if it would help to show a URL, please do so.  If you give me nothing to work with, I cannot answer you!
  3. Use a real email address
    This is mainly for Blog Comments – if you use an email address which doesn’t exist, eg “dontspamme@spam.com” I will not set your comment live and you will not get an answer.  You be fair, and I’ll be fair.
  4. Realise that time is money
    I take exception to people thinking that they somehow own MY time.  So, don’t expect to get me on “messenger”, you need to wait for an answer.  If you email, realise that I usually don’t email back – I put your question(s) and my answer(s) on this Blog.

Follow these rules and I’ll do my best to help you out.  If you bypass these, I simply won’t bother.

Thanks!
Gary

Horrible or Awesome #2 – Thumbnail Images

Why would you want to speed up load times for slow connections, or make your pictures look better? Good looking images are the sign of professionalism and class, and you surely don’t want your site to have either of those.

Sure, successful shop owners say better images sell more products, but you don’t have to listen to those people. After all, what does a successful shop owner know that you don’t?

Never mind that image contributions like the excellent On The Fly Auto Thumbnailer or the UltraPics contribution actually decrease your workload while producing better images. Keep posting your 800k images to your site, and laugh at those people who talk about “Site optimization” and “load times”. You think jagged images are nice, and that’s just fine with me.

How does that grab you – if you are running standard osCommerce, maybe with a template – I can almost guarantee that you have not truly considered YOUR CUSTOMERS satisfaction. Read on…

Thumbnail contributions are the bee’s knees. They rock, and you are going to love them. They improve load times, they make your images look better, and a site with thumbnails projects an overall more professional appearance to the customer than one with browser-resized images.

There are quite a few thumbnail contributions out there. Some allow you to upload small, medium and large pictures, some allow additional product images to go along with your main image, and some automatically resize large images into multiple sizes using image libraries like GD, GD2 or ImageMagick installed on your server (contact your host to see which you have). The point is, you can get an image contribution that will work with your hosting plan even if you don’t have the advanced image library features.

A couple I have checked out and liked (I am sure there are more):

UltraPics: Allows multiple images, multiple file sizes, optional automatic resize using php libraries.

On the Fly Auto Thumbnailer: Simple, automatic thumbnail generation for your single product image. Not as much cool added stuff like multiple images, but easier to install. Requires GD2 or ImageMagick libraries to function.

Most of this post is courtesy of my good friend Jason over at JC Commerce.

What I usually do for my clients is amend a couple of files, like this;

  1. admin/categories.php – in here I add calls to “large_product_image”. I usually just copy “products_image”.
  2. I then add an extra row in the database to deal with this.
  3. A couple of language changes to make the customer aware that “products_image” is now a thumbnail, and “large_products_image” is now used for a larger image only in the image pop-up.
  4. Change 1 line of code in “popup_image.php” to check whether a large image exists and show it. if it doesn’t exist, then show the thumbnail.

All of that is maybe 5 minutes work and is less complicated in my opinion than adding other contributions. Here is one I made earlier which you can drop in on an unmodified store…

largeimage.gif

As you can see, it just adds another browse button.  And then does the rest of the processing when you “update” the product.  Easy as 123.

What Category are you looking at?

Sometimes you are not able to tell which Category you are looking at as the template that you are using might have changed (or even removed!) the Categories infobox. I’ve seen a few sites which use a horizontal dropdown menu (eg Easy Menu) which looks good, but takes away the visual representation of where you are. In addition, many sites remove the “breadcrumb”…

So, just how can you find out which Category you are in?

It’s rather easy. osCommerce has a variable called “current_category_id” – it shows the ID of, guess what, the Current Category ID for the product that you are looking at. You can use this such as; <?php echo $current_category_id; ?>

In simple terms, you can use this to show the Name of the Category that you are in, or to construct a breadcrumb etc etc.

Use it to show a banner!

Recently a question was posed in the official osCommerce forum where someone wanted to show a banner on, and only on, 1 particular category. The answer given by some well meaning but ultimately completely incorrect “helper” (aka “oscommerce hack job”) was to use $cPath – well, this would work if, and only if, the category the person wanted to show the banner had did NOT have subcategories, thus;

Imagine we want to show a banner only if the Category ID is 3. With this code; <?php if ($cPath == “3”) echo “banner”; ?> the banner would show on category 3 and any if it’s subcategories. With my idea, <?php if ($current_category_id == “3”) echo “banner”; ?> the banner would show ONLY on category 3 and NONE of it’s subcategories.

Another good reason to use this might be to place a message to your buyers on some Categories – maybe you want to point them towards an upsell or a special offer?

There are lots of little pieces of code like this within osCommerce – it’s always best to try to do what you want using the best piece of code for the job – otherwise you are trying to ram a square peg into a round hole!

FishEye Menu in osCommerce

I’ve been trying to break away from the standard “header, footer, 3 column grey layout” that osCommerce ships with out of the box. I find that particular look awful – and I would never buy a product from such a store. After all, if the Store Owner is too lazy to change the layout a bit, they are probably going to be as lazy when it comes to delivery, customer service and all the rest of it.

With that in mind, I’ve been coding up little cosmetic tweaks and trying to make things “sexy”. I’ve been using jQuery (basically a javascript toolkit) on a number of sites and I came across “FishEye”…

What is FishEye?

It’s a graphical “menu” that interacts when you pass your mouse over it. In this case, the images get bigger. It looks cooler than it sounds, trust me.

Here’s a video

This video is very jerky, but that’s because of my screen capture software – the operation of the images getting bigger and smaller is actually very smooth.

The upside

For starters, it looks great! And I have also managed to pass the SID (Session ID) through the links as well. So it all works well, osCommerce-wise.

The downside

There is a big downside, which means that this code is not really usable on a live commercial site…the script requires JavaScript to be turned on in the viewers browser. If JS is not turned on, this menu doesn’t degrade at all well. This is a major problem and is something I need to take a look at before using in a live store.

Horrible or Awesome #1 – Leave the layout stock

Leave the layout stock

Because after all, if it wasn’t the best layout of all time then why did they distribute it as ‘stock’ in the first place? Never mind that your site will look like every other lazy guy who decided that product presentation was overrated. Never mind that it has no flow, coherence, or style. And totally forget that it makes you look like some high school kid in your basement trying to take their money and run.

Lack of design talent? We understand. After all, if you could make nice websites, you wouldn’t be trying to sell whatever it is you make online – you would be selling nice websites.

Never mind that you can get ready made, beautiful drop in designs. Nevermind that the fine folks of the osCommerce community have made a number of easy to understand template systems that cut out nearly 100% of the PHP programming and let you design your site in a simple, free HTML editor. You picked a FREE cart, and darnit it’s going to be free if it kills you (or your chances for success). Those people that say you have to spend money to make money are all full of garbage…

Does that sound like you? Now read on…

Ok guys, nobody says you have to go buck wild with the layout, change the layouts of the columns and headers, and try to switch osCommerce over to a pure CSS XHTML Valid masterpiece. However, I think everyone will agree that the osCommerce stock blue-gray color info boxes just don’t work with every product. So what can you do?

Edit the Stylesheet! It’s called stylesheet.css, and it’s right in your catalog root folder. The cool thing is, you can change colours just by replacing their hex code (like #FFFFFF) with a word like “blue” if you don’t know color hex codes! This is the most drop dead simple way of getting away from stock without design changes. Change your colors! Please!

Want to change it even more but don’t know how? Download and install a Template System contribution.

There will be purists like myself who will say ‘Template systems are bad’ and ‘Template systems break compatibility with future versions’ and ‘Template systems are the devil’. It does not matter – pound for pound, a template system like STS or BTS is going to improve the visual layout of your store and make it more pleasing to the customers eyes if you have little or no design or php experience. What both of these systems do is give you just one page to edit plain HTML in, and it ‘skins’ the entire osC site.

BTS contribution. STS contribution. The great thing about the template systems is that there are numerous free templates that other community members have made available in the contributions section. Just search the contributions for ‘template’ and I am sure you will find them.

Changing the stock buttons is another quick and easy way to update the look of your cart. In the contributions section there is a variable cornucopia of free button sets that community members have uploaded for your use. Just check the ‘Image Contributions’ section for button sets, or see my previous post about an online button generator that I found.

Another option is to purchase a commercial template, and of course, I made another post offering just that. This is the quickest and easiest way to give your Shop a whole new look in seconds.

Did you enjoy reading this? Did the first part really hit home?

What are you going to do about YOUR shop and YOUR customer experience?

Most of this post is courtesy of my good friend Jason over at JC Commerce.

osCommerce and Template Monster

Almost every day, there is someone in the official osCommerce Forum who is moaning about how they bought a pre-made osCommerce template from Template Monster.

Template Monster have loads of osCommerce designs available, but 99% of them are based on outdated osCommerce code.  The outsourced programmers used by Template Monster to integrate the designs have usually made lots of mistakes, many small mistakes, some big mistakes.

Heck, I’ve seen Templates that have hardcoded links rather than using the usual tep_href – so sessions can’t be carried throughout the shop. That might sound like no big deal to you, but I assure you, it IS a big deal.  Smaller mistakes like hard-coded language settings are not such a big deal – but can still cause problems for multi-language shops.

Just recently I installed a TM template for a client of mine – it actually turned out to be not very problematic.  On closer inspection, the underlying code was found to be very poor – I spent at least 5 hours solidly cleaning the code up.

I’d suggest to anyone thinking of buying a osCommerce Template Monster that it shuld should be used as a starting point.

Buy the template, find a good osCommerce developer, and pay that developer to PROPERLY integrate the LOOK of the template, making sure that the developer uses correct osCommerce coding practices.

Yes, this might be expensive, but it will save you a lot of headaches long term.

So, when all that is said and done, shuld you use Template Monster?  I say yes, why not – but only if you are aware that the template will most likely be poorly coded by someone who knows very little about osCommerce.  You’ll also need to be aware that you will get hardly any help in the official osCommerce Forum – as no help is given for 3rd party products.