More osCommerce Breadcrumb funkiness

I really wanted to try out a menu system that I found online, in osCommerce. The menu system is the one at Izzy Menu…and integrating it into osCommerce was fairly simple.

The code from the Izzy site is quite straightforward, so I simply used it on the breadcrumb osCommerce function. You can see the results in this video;

It looks pretty good and (as far as I recall) only needed changes in one osCommerce file and the stylesheet,as well as moving the breadcrumb to the top of the header.php file. I’ve tested it in Firefox and IE8 and it seems OK.

Really interesting osCommerce project

I just completed a really interesting osCommerce project. I gave a shop a makeover based on the clients PSD file – easy enough. Then I had to change the way that the products display.

1. remove the product_info.php page entirely
2. create a new products module to display product_info in the index page or the category page.

That probably sounds a bit weird, but if I show you a couple of images, it might be more clear. This is the standard index page, the “new products” module is located on the right. The module on the left is a recoded “new products for month” module.

So, the “new products” module changes when the shopper clicks on an item in the “new products for month” module. As so;

In other words, the “month” module does not now click through to the product_info page at all. Similarly, inside a category is the exact same layout;

I also needed to have the “buy” button and a “wishlist” button on the new module. It’s osCommerce, but it is nothing like osCommerce – which is always a good thing in my opinion.

Designing osCommerce, out of the box

Whenever I design an osCommerce site, I try to add in something that makes it look different to other osCommerce sites. 99% of osC sites have the standard

header
column, content, column
footer

layout. The next site you build, try doing something completely different. Here’s an idea;

1. remove both the left and right columns. These mostly hold useless infoboxes anyway – who the heck wants a “tell friend” box or a “write review” box? What this will do is make the content column 100% wide. So, the next step is to;

2. Increase the number of products shown in columns from 3 to (say) 6. You do this by amending each of the -modules- around about here; if ($col > 2) { – just change that to 5 or 6 or whatever suits you.

3. Then let’s move some of the infoboxes to the header area – languages, currencies would be good to move.

4. Create some new infoboxes to show some info, eg, a very tiny shopping cart that just says “You have 2 items in your cart, totalling $9.54” (for example).

5. Move the breadcrumb to above the header rather than below it. You could even remove it totally, to be honest the breadcrumb is barely used on any osCommerce site.

6. In the footer, place the following infoboxes side by side; information, whats new, shopping cart, specials and perhaps 1 or 2 more to suit yourself.

7. The only thing left is to place the categories box somewhere. If you have loads of top level categories, it really needs to stay as a box somewhere (perhaps the header area?). if you have only a few (let’s say 6), then it can go where the breadcrumb originally was, and it’ll look great.

8. Now all you need to do is make a logo and place it in the header area. And of course make some new colours in the stylesheet.

That’s about a days work, I’d say. Reckon you can do it? Why not try, and post back with a link to your new look site.

New Template Available for RC osCommerce

I spent some time creating a template for RC versions of osCommerce. I’m going to sell this at the same sort of price that Template Monster sell their templates for…but read on to learn how to get this template “at no cost”…

Overall Idea of the template look

The header area includes;

  • search box
  • language flags
  • currency selector
  • cart contents

Then I have used jQuery to rotate a few images (in the template I rotate between some adverts for my oscbooks.com site, but you can change these to anything you wish, of course!). I also created a funky logo – which you’ll probably want to change before using on your live site.

I then added a few buttons underneath (home, new products, my account etc).

In the sidebar I stripped out a lot of boxes to only leave navigation – you can add boxes back in really easily – just amend the column file. I amended the categories box substantially to only show top level categories with a nice design;

In the image, the current category is the one with the grey background…nice and easy to see where you are, I think.

I also wanted to draw your attention to the product listings. I’ve recoded a number of them to look as much alike as possible. So they mostly now look like this:

Much better I think. This layout is standardised across a number of files so it looks decent!

Conclusion

All in all I’m pleased with how this design turned out. I used the exact same methods as can be found in one of my best selling osc books – designing oscommerce – so, if you want to learn how to make good looking sites, take a look at my oscbooks.com website!

Special Offer

Do you like this template? I’m going to sell it at $175. However for anyone who purchases the designing osCommerce eBook before friday, I will send you this template absolutely FREE OF CHARGE on sunday of this week.

Look, you won’t find a professionally coded to osCommerce standards template hardly anywhere – especially for “free” – so do yourself a favour and buy the “designing osCommerce” eBook before friday – then on sunday you’ll get this template at zero cost. After friday, you will pay $175 for the template alone. So save yourself $175 NOW…

Got questions?

Fire away.

osCommerce Makeover Service – price increase

My Makeover Service is proving to be a big hit so I am putting the price up from $200 to $250 with effect from today, 1st July. However, for anyone who orders this service until friday, I will charge the $200 price.

You can read more about my makeover service. I’m doing 10 or 12 of these per month, and really it’s the same price as you pay for a template from the like of Template Monster – but what you get with my makeover is a uniquely designed site that only you have – rather than some poorly coded piece of rubbish that perhaps 1000 other stores are using!

My latest makeover

The latest makeover I made went from a standard grey osc shop to a much nicer looking shop. I recoded a number of the modules to make them standardised throughout the shop (eg the new_products contentbox is the same theme as the specials.php page, which is the same as the what’s new infobox and so on). I recoded the categories box to output nicely, without subcategories. I then removed a column and added some things in the header area (shopping cart, languages, currency selection). Also added the logo across the header along with a language dependent banner and the search facility. Then I came up with a whole new colour scheme for the site. It turned out really well!

Here’s an idea of the new look;

So, how do I do the work?

First step is for you to make a deposit of 50% – I then book out a full day in my diary. I ask you for any sites that you like the look of and for your prefered colour scheme. I download your site and make a mirror on my localhost and then make the necessary design changes to your files. Once complete I upload ONLY the changed files to your live site – now your new design is LIVE!

In this way I can ensure that there is ZERO downtime on your live site and I can ensure that any contributions you have already loaded are not affected by my changes! You now pay the remaining fee. After about a week, we (that’s me and you, the client) revisit the site to see if you want any changes made.

Interested?

Email me on oscshops@gmail.com – and remember the $200 price is good until friday.

osCommerce Multiple Images using Fancy Box

The other day I spent some time “doing up” a site. I had a list of to-do’s and was basically given carte-blanche to do whatever was needed to make it work…

One of the requests was the ability for some products to have more than 1 image in the pop-up. I know that there are a handful of image mods available, but I wanted to do something that hasn’t been done before…

As I use “Fancy Box” quite a lot for thumbnail/large image purposes, I decided to utilise the core code and have an extra 5 images, for 6 in total;

1 thumbnail – used everywhere as per normal osCommerce
5 large images – used in the pop-up

Admin Section – product adding/editing page

In here I added the ability to upload an extra 5 images (in addition to the usual thumbnail).

Shop Section – product info page

The usual thumbnail image shows, when it is clicked on the old style popup is no longer used. In it’s place is “Fancy Box”. As you can see in the video, Fancy Box enables us to have a previous & next arrow system to scroll through the multiple images.

I think it looks good. What do you think?

Upgrading to RC2a

As Liuk rightly pointed out, upgrading from an older version of osCommerce to the latest version is not straightforward. There is at least 5 steps that need to be done:

multiple version upgrades, database upgrades. database transfers etc.

The existing shop that I am upgrading is based on the osCommerce 2.2-MS2 architecture (which is now at least a few years old), but has been highly modified by myself with all manner of code changes to make it more functional. As this particular shop as only 17 live products I am NOT going to do a manual upgrade…

What I am going to do is simply use a new RC2a, with some contributions – and then add in the 17 products manually. I only have to make sure that the old product ID matches the new product ID and that any category ID’s in the old shop match the ones in the new shop. This is so that all product URLs remain the same from old to new.

So…first up is to use a “pre loaded” (by myself) version of RC2a – you can find more details about this pre loaded version in this previous blog post. What I will do is load this up on localhost (aka my home computer) to get the products and category structures correct.

For posterity sake here is a screenshot of how the existing site looks at this point in time:

And if you wish to visit the site to have a look around, it is here. It’s actually based on a theme I purchased a few years ago, which does look good, but I think is a bit tired now.

Task to complete…

Install pre-loaded version onto localhost and duplicate the category, product, and page names – in order to preserve the URLs of the site exactly as they already are.

Watch out for the next installment of the Makeover!