Delivery Time in osCommerce

The other day, I was asked about the possibility of including a time selection field in the shipping page of an osCommerce site. A typical example would be a delivery service such as a flower shop.

This is very alike my previous code for selcting a delivery date which works well. Basically, all I had to was copy that but make it “time” instead of “date”.

With some Googling, I found a nice jQuery based timepicker which i integrated into the checkout_shipping page.

So, the checkout_shipping.php after the changes;

In the admin, on the orders.php details, it looks like this;

Obviously I chose that date and time in the checkout page. Th selcted date and time also shows in the customer facing order history page(s) as well. Sweet!

As you can see I prettied up the time selector by adding a clock image. Looks pretty nice!

Update on Hot 100 osCommerce sites

I found some time yesterday to update the osCommerce Hot 100 list. It’s surprising how many Shop Owners let their domains lapse, or just give up entirely. I found one shop had the “whos_online” error showing for over 3 months, which was a bit sad as this was a shop that was using one of my coolest templates.

Anyway, I cut the list down from about 135 to 92 – so there were over 40 stores that were broken, disappeared, not using osCommerce anymore, pretty much standard osCommerce or vote rigging (yes, this does happen, how sad!).

So, as of right now, 1pm on 3rd November 2009, here are the Top 5 HOTTEST osCommerce Stores as voted by you;

1. Lojamac
2. Swedish Hasbeens (one of my personal favourites)
3. Teknosit
4. The Wedding Printer
5. Crazy Bbaby Clothing

Nice work, you 5!

Adding sites to the list

If you know of any outstanding osCommerce sites, please do add them! It takes only a few seconds. All I ask is that any sites added are NOT templates, are NOT standard osCommerce, and do have something special about them (be that the look, or some cool coding or whatever).

Getting your own list for your site

Have you ever thought about adding a list to your own site? It’s a great way to get traffic and repeat visitors – think about it.

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.

Display Price in two different sizes?

At the official osCommerce forum, Matt asked;

How can I get the prices to display with two different sized fonts ie $129.95

You can plainly see that he is trying to show the cents in a different way than the dollars. This is very easy to accomplish;

Open up /includes/classes/currencies.php

Find:
[php]if ($calculate_currency_value == true) {
$rate = (tep_not_null($currency_value)) ? $currency_value : $this->currencies[$currency_type][‘value’];
$format_string = $this->currencies[$currency_type][‘symbol_left’] . number_format(tep_round($number * $rate, $this->currencies[$currency_type][‘decimal_places’]), $this->currencies[$currency_type][‘decimal_places’], $this->currencies[$currency_type][‘decimal_point’], $this->currencies[$currency_type][‘thousands_point’]) . $this->currencies[$currency_type][‘symbol_right’];
} else {
$format_string = $this->currencies[$currency_type][‘symbol_left’] . number_format(tep_round($number, $this->currencies[$currency_type][‘decimal_places’]), $this->currencies[$currency_type][‘decimal_places’], $this->currencies[$currency_type][‘decimal_point’], $this->currencies[$currency_type][‘thousands_point’]) . $this->currencies[$currency_type][‘symbol_right’];
}[/php]

Change to:
[php]if ($calculate_currency_value == true) {
$rate = (tep_not_null($currency_value)) ? $currency_value : $this->currencies[$currency_type][‘value’];
$format_string = $this->currencies[$currency_type][‘symbol_left’] . number_format(tep_round($number * $rate, $this->currencies[$currency_type][‘decimal_places’]), $this->currencies[$currency_type][‘decimal_places’], $this->currencies[$currency_type][‘decimal_point’], $this->currencies[$currency_type][‘thousands_point’]) . $this->currencies[$currency_type][‘symbol_right’];
$format_string = explode($this->currencies[$currency_type][‘decimal_point’], $format_string);
$format_string = $format_string[0] . $this->currencies[$currency_type][‘decimal_point’] . ‘‘ . $format_string[1] . ‘‘;
} else {
$format_string = $this->currencies[$currency_type][‘symbol_left’] . number_format(tep_round($number, $this->currencies[$currency_type][‘decimal_places’]), $this->currencies[$currency_type][‘decimal_places’], $this->currencies[$currency_type][‘decimal_point’], $this->currencies[$currency_type][‘thousands_point’]) . $this->currencies[$currency_type][‘symbol_right’];
$format_string = explode($this->currencies[$currency_type][‘decimal_point’], $format_string);
$format_string = $format_string[0] . $this->currencies[$currency_type][‘decimal_point’] . ‘‘ . $format_string[1] . ‘‘;
}[/php]

You can style the “sup” appropriately using css, this would be done in the stylesheet.css file.

Easy as 123.

Traffic Lights for showing Stock in osCommerce

The other day a client approached me about a feature which he had seen on a store (not an osCommerce store). To cut a long story short, it showed available levels of stock in a “traffic light” system;

More than 10 on hand = green
Between 2 and 9 = orange
Less than 2 = red

With a bit of thought, I adapted a previous idea of mine, blogged here. And ended up with a good way of showing what’s in stock, what’s limited etc.

In the Categories structure (index.php)

In the Product page (product_info.php)

In the New Product listing (prodcuts_new.php)

Let’s say I want to show traffic lights in the “New Products for Month” box

I open up /includes/modules/new_products.php and add this:

[php]
‘ . clubosc_products_stock((int)$products_new[‘products_id’]) . ‘[/php]

Right after:

[php]’ . $new_products[‘products_name’] . ‘[/php]

So now instead of looking like this:

It looks like this:

Function this, function that

Because I used a function to “power” this, it is really easy to change – so let’s say the shop owner wanted to change the word “Available” (green traffic light) to “We got loads, buy now!”, he can just go to 1 file (includes/languages/english.php), change it and this will be reflected on ALL the pages that show the “traffic lights” – meaning the shop owner doesn’t have to change lots of files. Good, eh?

osCommerce v3 and Thrashbox

Thrashbox is a css way to create great looking boxes. You can view the homepage and a load of reading material at http://www.vertexwerks.com/tests/sidebox/. Enjoy!

It’s really simple to get this effect into osCommerce, image below;

Look good, don’t they. All you need to do id be using the “default” layout of osc v3 (not the tables based version). Amend each of the template infobox files directly so that they read a bit like this:

Then add the thrashbox .css to the template stylesheet file and save the thrashbox images into the right place in your template file structure. Once you got it done and working, you will want to make your own images to suit the look of your site – simply open up each original thrashbox gif, change it and resave as the same name.

DONE!

Show Products Ordered on Order Summary

Yesterday an osCommerce client of mine asked me to come up with some code for showing what the person had ordered WITHOUT having to click on the individual orders…

So, I set to thinking and came up with the idea of showing the products ordered in the orders.php page. So, instead of seeing a normal orders summary like this:

An extra column is added to show the products ordered, and the quantity thereof, as so:

After some twiddling with the codebase, it turned out fairly decently I think.

Remember…

1. Make the SHOP side as easy as possible for your customers to use
2. Maker the ADMIN side as easy as possible for YOU to use

Mash the Product Info Page

HOw many times have you seen an osCommerce store that has the same boring old layout for the product_info.php page? 100s of times, I bet.

Even some of the templates from Template Monster etc have only amended the larger picture rather than concentrating on smaller changes to individual pages.

Today, whilst I was doing one of my popular osCommerce makeovers, I decided to experiment a bit with a slightly different take on product_info.php – basically I wanted to put the buy button etc at the TOP of the description rather than at the bottom. My view is that it’s better to get the important stuff at the top of the page…

Anyway, here’s an image of what I came up with;

Basically, I moved the “price” information down below the product name. I also updated the price layout to read nicer (our price, you save etc). I then moved the “product attributes” and “buy button” up alongside the price, so it all looks like it is on one line. I then added a bit of candy (the faded underline effect) to break up this area from the “price” line and the “product info”.

I think it looks decent, what do you think?

Nice Testimonial

Done with the E-book
That sure made things easy.
Wish I had heard of it along time ago.
I would recommend it to any one that is learning
to use the OSC program. That is not php savvy.

Many Many Thanks
Ben

It’s always nice to receive good words from people who have found my tutorial useful. Thanks Ben!

If you would like to learn a bit more about how osCommerce “hangs together” in terms of a design have a look right here for the tutorial that Ben found so helpful.

osCommerce Makeover Service

You did a truly wonderful job!! The credit card images are great, I just love how that looks, and the add on for the specials is awesome. I am so happy that I found you in the forums, and I will definitely call on you first in the future if I need anything else done. I would recommend you a hundred times over, you are worth every penny. Thanks again for the makeover.

The above quote is a real email that I received after completing a makeover…

There must be thousands of osCommerce based sites out there that are either standard installation (the awful grey theme) or have just a couple of colour changes in the stylesheet.

Each time I check new additions to the Top 100 list there are at least 5 such sites – and I have to tell you that none of them get set live!

So, what I’d like to introduce is a new service I am offering called “osCommerce Makeover“. Basically I will take a standard (or close to standard) osCommerce shop and make appropriate changes so that it is better looking and more functional.

In a typical osCommerce shop, I would suggest that the following list would be fairly standard of the service offered;

1. Come up with new colour scheme to suit the products that you are selling.
2. Implement colour scheme via stylesheet
3. Remove left or right column
4. Nuke useless infoBoxes and move others appropriately
5. Make text larger
6. Implement fixed or fluid set-width and create a background or shadowed image
7. Implement some jQuery (javascript/ajax) to make things more intuitive for your shoppers
8. Pretty up the infoBoxes to suit the theme of the makeover
9. Shorten the checkout procedure and make more logical for your shoppers
10. Other small bits and pieces to pretty the whole thing up

As you can see, some major changes and some minor ones – all done with design & usability in mind.

The Cost

The cost of this service is just $250 (however, please note that this price does not include installation of any existing contributions, I would create any needed as part of the theme).

How It Works…

I take a 50% deposit from you which enables me to book your makeover into my diary. At the same time I inspect your site and come up with some ideas for you based on what I see.

Once I get your agreement on changes to be made, I carry out the work as per my diary schedule. When I have completed the agreed works, you pay the other 50%.

Get in touch…

For further discussions or to book a spot in my diary, please email me on oscshops@gmail.com – I’m expecting this service to prove very popular, so if I do not get back to you same day, know that I will get back to you ASAP.

My aim for this service is to get each site I modify to at least a good enough standard to be added into the Top 100 list.

Other options

It’s only fair that I mention other options. One is to go to the likes of Template Monster and buy a template – downside of this is the fact that others will be using the same template and a major downside is that Template Monster use non-standard code in their oscommerce templates. Another option is to DIY – but I am guessing that people looking for a makeover service won’t have the knowledge to be able to do this…