Make the forms nicer in osCommerce

osCommerce and most other ecommerce scripts make a lot of use of forms. They can be found all over the place including most of the checkout procedure, product_info, login, create_account and so on.

And forms are damnable ugly. So, my idea was to hunt out some code that would replace the standard ugly form elements with something a little nicer.

I found a nice jQuery script called “jNice” – you can see an example at the authors homepage. The code allows us to go from this standard, grey, ugly form:

To this, which is a lot nicer:

Also, we can control the look of the actual dropdown via CSS, as so:

Which I am sure you will agree is a lot nicer that the usual dropdown.

As this is all controlled by javascript, we need to make sure that it degrades nicely for those few people who browse with JS turned off. As this is mainly a cosmetic exercise, it’s fine – lack of JS only causes problems when we are looking at functionality – cosmetics is somewhat simpler! So, it’s all good!

Sexy Best Sellers in osCommerce

I’ve been wanting to “jazz up” the boring osCommerce interface for a while. So I took some time out today to make the “Best Sellers” a little sexier…going from this:

To this:

Much better, isn’t it?

No, I hear you say…what’s the point in just showing 1 image?

OK, so how about if I showed you this video where the best sellers that I pictured above is seen “in real time”…

Now, tell me that this is not nicer than a boring old list of products 😉

How did I do this?

Easy – a few bits of recoding in the file /includes/boxes/best_sellers.php, then use the “innerfade” jquery script and a bit of .css to make it look nicer. You can do the same, here’s the link for innerfade – all you need to know is that you need to recode the best sellers to use an unordered list rather than the mashup of tables and crazy numbering function that the original uses. Go to it!

Product Lists in osCommerce

Some time ago on one of my other blogs, I spoke about my frustration with how osCommerce lists products. It’s a mish-mash of 4 or 5 different ways.

To see what I am talking about have a look at this (New Products for Month), then this (New Products Page), then this (Products of a certain Manufacturer) and finally this (Advanced Search Results).  You can see the difference in the looks straightaway.

My idea is to get a standardised look for all lists.  So what I am going to attempt to do is to use one module to create all the lists – in this way, we know that any lists of products will look the same where-ever you are in the store.

I’ve been working on this off and on for some while (admittedly more “off” than “on” but there you go), and have so far managed to get the following lists standardised:

1. new products for “month” (in the index page)
2. category drilldown lists
3. sub-category drilldown lists
4. manufacturer lists (needs further coding to add “paging”)
5. advanced_search_results list (however, this needs further coding to add “paging”)

I still need to recode products_new.php to use the module rather than it’s own mishmash of code.

More lists

I can think of the “shopping_cart.php” list (eg, when having 2 or more items in cart), but this would need to stay as is, as it needs extras such as “remove” column, “quantity” column etc.

What other lists are there in osCommerce – off the top of my head, I can’t think of any more.  Can you?

Seeing the results

Once I have all the lists covered, I’ll introduce the new module as a contribution – in my opinion it’ll be much more useful to have the look of the lists standardised across all osCommerce pages.

Hot 100 Update – we have 100!

I haven’t made a Hot 100 blog post for a while, so now is the time, particularly as we surpassed 100 extraordinary osCommerce sites! The other day I added a few more sites which brought the total to 101 – now I have to work out a way to only show the Top 100…

My idea is to show maybe 110 or so, with the bottom 10 being in a “sandbox” – these will be votable into the Top 100. Each time I then add a new site, the site at the bottom of the “sandbox” will be bumped. I think that should work well.

Current Standings

ONO Tea (6.3/10 with 61 votes cast)
Prodotti tipici e vini piemontesi (5.5/10 with 563 votes cast)
Mobili e arredamento – decoracasa.ch (4.8/10 with 363 votes cast)
LojaMac.com (4.6/10 with 218 votes cast)
TexereSilk Online Store (4.2/10 with 545 votes cast)

My personal favourite

My favourite at this point lies at #6 and is Holte Vinlager – there are some exceptional features on this store – check out the custom bottle builder feature. Whoever built it, well done!

Deleting Sites from the list

I’ve also had to delete a couple stores due to persistent vote rigging – I really don’t know why people do this. It’s sad.

Users adding stores to the list

Many thanks to those of you who have added stores for inclusion on the list – I’ve added lots of stores by your recommendations. However, people (usually the store owner) are adding stores that are;

~ not osCommerce
~ standard install of osCommerce

Please don’t bother – I delete them as these show nothing exceptional about osC. Thanks!

osCommerce Template updated to RC

A quick post to let you know that I have now updated this well known theme to RC2.  This theme makes osCommerce look, act and feel totally different than normal. The basis of this theme is making everything easy to find.

The categories infoBox is “open”, it has category tabs along the top and category subtabs underneath which change dynamically…also the theme has a best sellers box in the index page (rather than in the column)…

It also has a different column colour for the right hand side.  When you move an infoBox from left column to right column (or vice versa) the look of the infoBox you moved will change automatically to match whichever column it is in.

The “login” page is rejigged substantially – to make it more like the very old osCommerce login page – which I preferred – I’ve also made it so that it redirects to “create_account” when the person does not have an acocunt already.

All in all, a nice version of osCommerce.  Have a look:

And if you would like to purchase this design, that’s possible – see my other site, osCommerce Templates.

Top 100 Update

Haven’t had an update for a good few weeks, so let’s do that – the Top 100 osCommerce sites;

The Top 5 as at 9am on 3rd may 2008 are;

  1. TexereSilk
  2. Prodotti Tipici e vini piemontesi
  3. Click A Deal
  4. Breast Pumps Store
  5. Arabella Miller

These are the 5 Hottest Stores right now, according to the votes 😉  What do you think?  Agree or Disagree – make your vote now at the osCommerce HOT 100.

New Additions

  1. Custom Fit

Those that didn’t make it

I’m still getting sites submitted that are absolutely crap – please don’t bother submitting if your site has the look of a typical osCommerce site.  If all you have done is made the infoBoxes a different colour or removed a column then your site will not be authorised.  You need to have at least one EXCEPTIONAL design feature…

If you don’t know how to make a good looking site, then use a template!  Anything is better than standard osCommerce!  See here for a design tutorial – I’m tired of having to look at horrible osCommerce sites 🙁

Change Header Background Colour Per Category

Interesting questions posed at the osCommerce Forum;

i want to make the header color change when the visitor selects a main category. each main category should have it’s own color.

My reply;

Use a switch on $current_category_id with a stylesheet named the same number.

In depth;

  • We know that $current_category_id gives the ID of the category that is currrently active. We therefore are able to create lots of different stylesheets in order to make each category look different.
  • We know that index.php is the only file that controls Categories – so the code change needs to go in this file.
  • We know that CSS allows us to cascade the style – in other words, css is overridden by later css of the same name.

So, we are able to use a PHP function called “switch” to show a 2nd stylesheet! Like this:

[php]‘;
break;
case 2:
echo ‘‘;
break;
case 3:
echo ‘‘;
break;
}
?>[/php]

This code would be added to index.php right underneath the existing line of code;

[php][/php]

Contained in each .css file would be css code for background colours to OVER-RIDE what you have already defined in the usual stylesheet.css – I’m not going to go into css on this blog post, as I only want to give a brief overview of how I would enable a different theme per category – once I have made a “purple.css” this would then be automatically used for Category ID 2.

Hopefully this blog post will give you some ideas for your own site.

Information Pop Up – Cool Feature

I’ve been trying to make the front page of osCommerce a little less intimidating – it’s my opinion that a typical osCommerce store is too “busy”. What I wanted to do was find a way to have less information in the page, in other words make the page more bare.

A good way to do this is to remove some text! Well, that’s easy to do – just amend the welcome greeting etc. Then you can cut down on the number of infoboxes and maybe even remove a column (or both columns)…

It’s Web2.0 baby!

I wanted to go a step further so went on the hunt for a feature that I had seen – “information pop up bubbles”. Here’s what I came up with, which is full integrated into the “New Products for Month” box in the front page of osCommerce.

The actual look is much smoother than you see in the video – basically, the “name” and “price” and “view product” link are contained within the popup. I think it adds a lot of style to a store! What do you think?

What else could this be used for?

Well, it would be ultra simple (assuming you had a small/large image modification installed) to show the larger image in the pop-up. Or it could be used for the “Welcome Guest” greeting or anywhere else – maybe the “Your Previous Orders” box. The possibilities are endless.

Got STS, Got the Tutorial – Now you need a Template

As readers will know, I spent some time the other day updating the STS eBook for 2008 – my own knowledge has come on leaps and bounds since I first wrote that STS Tutorial, and STS itself has had at least 2 or 3 major updates as well.

Now that the eBook is up to date, I wanted to try to find a resource for purchasing templates. A reader of this blog pointed me at this site, on which there appears to be loads of designs ready and available for download.

Please note that I receive nothing at all, no commission, no kickback, no fee, no nothing if you purchase from the site – I have absolutely NO connection to it at all. I am simply pointing you at a site where you might like to buy a template.

I also have seen this site, which appears to offer much the same. Again, I receive nothing, no fee, no commission, no kickback should you buy from this site…

And, as I receive nothing – I don’t want anyone moaning at me if the template they buy turns out not to work, or be rubbish, or whatever! OK?

I cannot and do not vouch for the quality of templates that you purchase! The only template I can vouch for at the moment is my freebie that I posted about a while back.

Top 100 osCommerce List Update

Another couple of sites added in the past few days;

Which brings the total list of shops up to 71.  Only 29 more to go and then the lowest voted ones start to fal off the bottom of the list!

As of right now (March 30, 11am), the Top 5 shops look like this:

  • TexereSilk 6.6/10
  • Click A Deal 5.8/10
  • Templates Shop 5.3/10
  • Punk Baby Clothes 4.7/10
  • Assault Shirts 4.7/10

Have a look and see what you think of the shops in the Top 100 list.  There really are some exceptional ones – not only in look, but also in the codebase!