Who Just Ordered – osCommerce

I was browsing a site this morning and found a really nice little feature showing “who just ordered”;

You can see it in action on the “Taunton Leisure” website – towards the bottom of the right hand column – I’m not quite sure which ecommerce application this shop is using, I can say for sure that it is not standard osCommerce!

Anyway, I liked that little feature so much that I made the same thing for osCommerce 2.3.1;

I’m not sure if this will actually help with sales, but it goes some way towards making a shop more “interactive” to customers. The only downside I see is that it would be useful only for shops that have quite a lot of orders – after all, I’m sure that shop-owners don’t want to advertise the fact that they get 1 order per month for example!

Let me know what you think? Can you see any way to make this more interactive?

Lingerie Template for osCommerce 2.3.1

Made a nice template for Lingerie shops, here’s the overall view;

And some of the more interesting features…

If the cart is empty, the shopping bag is “black”;

And if it’s not empty, it turns “green”;

And if the shopper places his mouse over the green bag, they see a summary of the cart as product images;

Here’s a video that shows this in a bit more detail;

Cool looking search facility;

Mini “welcome” and “new products”;

Rotating images, no extra code or admin settings needed;

Column shows everywhere except the index page;

Summary

I think a nice looking template that would suit any store that needs to be stylish. Style and colours are very easy to change.

Cost

$199, which includes 1 hour of my time for installation/changes. If interested, please email me on oscshops AT gmail DOT com

Another osCommerce Template for 2.3.1

I spent some time over the past couple of days making up a new theme for 2.3.1. I tried to chop up the structure a lot to make it look less osCommercey than a standard osCommerce site.

Here’s the overall view;

And some features in close-up…

New Product boxes

These boxes contain more information than usual, including a short description of the product with NO cut-off words. In most templates, a substr is used to chop off the description at x number of characters. That’s not good enough for me, so I make sure that words are NOT chopped in half.

Rotating Banners

Just drop a file into the “rotating” folder, and it gets auto-linked to the product you choose! No code or admin changes necessary…

Search in Header

A nice looking search facility, designed to be noticed!

Angled Logo

An angled logo, which is a bit different. Easy to swap out for a new .png image!

Side column

The side column has a cool, clean look. I got rid of the “infoBox” look in favour of a solid background.

How much is the template?

This template costs $99, and comes with 30 minutes of my time for installation and/or minor code changes.

How easy to change the look and colour?

Pretty simple. It’s just .css and images. Make new images, change the .css. The possibilities are endless. Don’t like the green? Change it to pink, blue, red, whatever.

Interested?

Email me on oscshops AT gmail DOT com. This template is ready to go, and by this time tomorrow you could have it live on your osCommerce 2.3.1 webshop.

My Account, mashed, diced and sliced in osCommerce

I have a site on which I regularly work – it’s a pet shop – the shop owner has really excellent ideas on what is needed within the shop to promote a good customer experience and increase sales. I enjoy working on this shop a lot, as the ideas are good and workable, and the client is down to earth and really easy going.

Here’s a quick rundown of the most recent changes, where I was tasked to mashup, slice and dice the “My Account” page.

The normal look of a “My Account” page is like this in RC2a;

and like this in 2.3.1;

Not very interesting for the customer and not at all useful for the Shop Owner…so the idea is to make this page more useful by showing more information…hence the mashup!

The new page greets the customer by name. He can also change some of his basic details (such as name, surname, email etc). He can also un/subscribe the newsletter in this page. Extras added also include tickboxes to show the Shop Owner which animals the customer owns, and a couple of extra information inputs for more details.

These extra inputs show to the Shop Owner in the admin section of the site.

What can be better than for any shop to know exactly WHY a customer is buying products? Now the Shop Owner has the information, can do all sorts of good advertising with that.

But that’s not all….

Scroll down the page a little bit, and the customer can also see his “primary address” and any “secondary addresses” added. He also can see a list of his “previous orders” (these link to each order summary) and a list of the “products purchased”.

And scroll down a bit more, and the customer has links to elsewhere, which in this shop is a wishlist and some of the regular “account” links which are shown in a normal “my account” page. You might have noticed that this shop is based in Denmark, hence why the screenshots are not containing much of the English language. The customer will translate my english into danish before the new style “My Account” page goes live on site.

A really nice little project, I am very pleased with how it turned out.

First ever osCommerce 2.3 template is available

Pleased to say that the very first commercially available 2.3 and 2.3.1 osCommerce template/theme is exclusively available here at Club osCommerce.

‘True Blue’ osCommerce Template

Cool welcome message and shopping cart summary;

Fade In and Out Banner Rotator, drop in images to link to products;

Currency, Language, Bestsellers in the Footer;

Social Bookmarks takes the place of Bestsellers when on a product page;

Cool Twitter feature – easy to link your Twitter account;

Nice looking Search Box in the header;

Great dropdown menu categories;

And here is an overall idea of the template;

Cost

For this template/theme I am charging $199. The price includes 1 hour of my time for colour changes and installation on top of your existing 2.3 or 2.3.1 osCommerce shop.

Interested?

Email me on oscshops@gmail.com to ask any questions.

osCommerce and 960 grid system

So the new osCommerce 2.3 and 2.3.1 have Nathan Smiths 960 grid system as part of the core code.

I’ve looked about the web and come to the conclusion that some users will really like it – it allows a person to layout the page in rows and columns very easily. You want 3 boxes side by side? Just use the correct .css call and there you have it. Done.

Basically, my thought is that the grid system acts very like a tables based layout, though I am obviously aware that it is not tables 😉 And having .css act like this is not how .css should be.

Anyway, in order to get a better handle on the 960/osCommerce I decided to make a real life client project using 2.3.1 as downloaded. The first thing I did was sketch out the design on a piece of paper;

As you can plainly see, it suits the gridded layout. Next up was to install 2.3.1 and start playing with the code and css. I ended up with a completed site that looks like this;

Please note that I blurred a few bits out. Once the client has signed off, I’ll divulge the site URL…

Which, as you can see is very close to my original sketch.

The only significant change is the extra box that contains the “welcome guest” message and the summary of the cart contents. In order to achieve this I stuck as much as I could to the ethos of the 960 system for the layout, but added extra code to make the site look prettier.

Here’s that area of the site in full size;

and here’s some of the code to show you the layout of that area – pay particular attention to the outside div’s (960) and the inside div’s (my own);

My conclusion

960, as i have said all along, is not for me – I don’t like the feeling of being forced to do something “because I have to” just to get something to line up. Alpha, Omega, Push, Pull, Grid, Container – these things mean NOTHING to a designer and not much at all to a Developer.

However, I can see it being very useful for those people who are coming from a “tables based” background (as most people using osCommerce are) – 960 can be considered a halfway house between tables and pure css layout – which isn’t a bad thing, but doesn’t cut the mustard for me personally.

Who the heck made the decision to add 960 to osCommerce, and why? Perhaps one of the osCommerce Team Members reading this could explain the rationale behind it. I am wondering if HPDL saw this being used in the ‘osc2css’ contribution and thought “that’s near enough”…

Another Horizontal Menu in osCommerce

I’ve been looking for some more options to create nice looking menu’s in osCommerce using semantically correct “ul” and “li” (with some nested lists) layout.

I recently found a very nice one called Menumatic from Green Gecko Design – it took me a fair while to get working in osCommerce, but the end result is very nice;

Should osCommerce use a Templating System

Interesting conversation ongoing at the osCommerce forum. Some people for, some against.

On the one hand the beauty of a monster mess of code that is osCommerce means that it is possible to do anything you want with it if your skill level is suitable.

On the other hand separation of logic from presentation is important I suppose.

So, should osCommerce use a templating system? Well, first of all, we need to define templating. When you think of a template, what do you think – I bet you are thinking a new look for your site. The sort of thing sold by “Template Monster”, or the sort of thing that STS (Simple Template System) was designed to be used for. Forget it, this is just simple themage that anyone can do given enough time.

More to the point, when we talk about templating, it is meant that we take osCommerce and recode it to use a framework setup. We then poke and prod that framework to produce results rather than poke and prod osCommerce directly – hopefully this makes sense?

Now, what framework to use? There are many out there;

Smarty, Dwoo, PHPTal and many more. In the osCommerce forum thread, the author is talking about integrating SUIT.

All of these solution are similar. All of them could be used in osCommerce. Is it -really- needed? No, in my opinion. Would I like to see one (or more) of them implemented? Yes! I’d love to change my opinion.

We will see if any of these, or others ever make it into an osCommerce repository.

More Image Swapping in osCommerce – mouseover

Interesting site build the other day for a client, who wanted a cleanly coded way to upload multiple images per product, then have them change on mouseover of a thumbnail.

To enable this, I had to change the admin/categories.php file to alow an extra 7 images in addition to the existing one. That was painless as it’s just a matter of copying code and renaming the product variable for each.

Obviously this also means I have to add extra rows in the database table “products” to hold the 7 extra images.

Once a new product has been made, the product page then looks like this:

Note that these products are all available from osc books and I used them in this example as the thumbs and larger images are already created (hence saving me the effort of making multiple images for this blog post!).

As you can see, I laid out the 4 thumbnails in a 2 x 2 formation and the larger image is on the right. When I mouseover any of those thumbnails, the larger image changes automatically…here’s a video;

You might also notice that I prettied up the mouseover cursor by using a .png file (I think this does not work in IE unfortunately). But it looks great in better browsers! A simple piece of .css does this, you can search google for “custom cursor using css” for more info on that.

Not bad, and this is all controlled by just a simple line of javascript in jQuery like this:

$("#images").html('');

As I mentioned, this client wanted something cleanly coded – there are many contributions for osCommerce which have multiple images, and no doubt there are some which can do mouseover based swapping – have a hunt for them and post back to this thread. Let’s see if we can get an images resources going here!

Image Swapping based on attributes in osCommerce

I was tasked by a customer to create some sort of image swapping device for a tshirt store. With some thought my idea was to use a piece of javascript based on the attribute selection which updates the image.

Then my customer decided he only wanted to upload 1 image rather than multiple images.

In the end I decided to do it in a different way, using only 1 image, can you guess how? Here’s a video;