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!

Lavalamp Breadcrumb in osCommerce

Rick asks;

I can tell from your posts that you are familiar with jquery. What would you charge to make this work with my oscommerce store:

I would like this implimented into the breadcrumb trail. I tried it a few different ways. If you do not have time to take on any more work… perhaps a few tips to get me going properly on this. I tried implimenting it into classes/breadcrumb.php. I could not figure out how to properly do it.

I managed to find time to have a go at this, and I am quite pleased with the results on my Test Store. You can see a video of what I have come up with:

Obviously this is on my localhost test store, so don’t mind the missing images – they are nothing to do with the Lavalamp script. Hoping to get this released as a contribution, looking for a sponsor to allow me the time to clean it up and write instructions.

It looks and works great in Firefox, and it works great with JS disabled (the only difference if you have JS disabled, is that the darker background effect does not move from link to link).

It does not want to work very well in Internet Explorer – there’s a surprise – but with a bit of a kludge piece of css I finagled it to work good enough.

For a live store, my idea would be to have a nice background across a whole table row (or div) and have the breadcrumb and the login links working in this way. Would look cool!

How To Show Special Price More Clearly

This question was asked in the official osCommerce forum:

How can i make it so in product_info it shows original price, discount price and percentage off?

The question asker also linked to a website, which I won’t link to, but will show a partial screenshot of what he/she wants osCommerce to do:

My answer was as follows:

Use the “specials” feature of your admin, and then write a new piece of code that shows the % discount.

Honestly, that should be enough to give most people, non-coders included a good clue to get on and write something. Then I thought it might make a good blog post, so…

Step 1 – change the layout of the special price!

OK, so first, we need to slightly amend the way that the special price is shown in the product pages – this is simple, find this code:

[php]$products_price = ‘‘ . $currencies->display_price($product_info[‘products_price’], tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘ ‘ . $currencies->display_price($new_price, tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘‘;[/php]

What we need to do for starters is put a line break between the two prices. Easy as 123, just change the code like this:

[php]$products_price = ‘‘ . $currencies->display_price($product_info[‘products_price’], tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘
‘ . $currencies->display_price($new_price, tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘‘;[/php]

You can see the <br /> I added. This makes the layout of the prices go over two lines…

Step 2: Add a couple extra pieces of “text”

All this is doing is allowing us the ability to add text in the correct osCommerce fashion. So find the piece of code to which you just added a <br /> and change it to:

[php]$products_price = TEXT_LIST_PRICE . ‘‘ . $currencies->display_price($product_info[‘products_price’], tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘
‘ . TEXT_SPECIAL_PRICE . ‘‘ . $currencies->display_price($new_price, tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘‘;[/php]

Now your price should look like this:

Don’t worry that it looks awful – we will be changing this right at the very end of this howto tutorial.

Step 3: Add the code to show the “saving” price

This is a very simple calculation, it’s simply the old price LESS the new price! So, change the piece of code to:

[php]$products_price = TEXT_LIST_PRICE . ‘‘ . $currencies->display_price($product_info[‘products_price’], tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘
‘ . TEXT_SPECIAL_PRICE . ‘‘ . $currencies->display_price($new_price, tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘
‘ . TEXT_YOU_SAVE . $currencies->display_price(($product_info[‘products_price’] – $new_price), tep_get_tax_rate($product_info[‘products_tax_class_id’]));[/php]

Now the price area looks like this:

As you can see, it’s starting to come together.

Step 4: Showing the % saved

We now need to add the % saving – this is a slightly tricky piece of code as it’s quite hard to understand what’s going on…fortunately, this code already exists within the admin page for specials.php and the code looks like this (lifted from admin/specials.php):

[php]$contents[] = array(‘text’ => ” . TEXT_INFO_PERCENTAGE . ‘ ‘ . number_format(100 – (($sInfo->specials_new_products_price / $sInfo->products_price) * 100)) . ‘%’);[/php]

Now, we need to use part of that code and tack it on the end of our “price” code! So, change up the code to look like this:

[php]$products_price = TEXT_LIST_PRICE . ‘‘ . $currencies->display_price($product_info[‘products_price’], tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘
‘ . TEXT_SPECIAL_PRICE . ‘‘ . $currencies->display_price($new_price, tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘
‘ . TEXT_YOU_SAVE . $currencies->display_price(($product_info[‘products_price’] – $new_price), tep_get_tax_rate($product_info[‘products_tax_class_id’])) . ‘ (‘ . number_format(100 – (($new_price / $product_info[‘products_price’]) * 100)) . ‘%)’;[/php]

Now, our price view looks like this:

As you can see, this is now showing all the calculations that we require. All that is left is to change the wordings…

Step 5: Language Defines

Open up /includes/languages/english/product_info.php and add the following code:

[php]define(‘TEXT_LIST_PRICE’, ‘List Price: ‘);
define(‘TEXT_SPECIAL_PRICE’, ‘Price: ‘);
define(‘TEXT_YOU_SAVE’, ‘You Save: ‘);[/php]

You’ll see where to add this when you open the file – it’s very straightforward. Repeat for each language that you use in your store.

Now, assuming all of the above went smoothly, your price view should look like this:

Voila! If you liked this How To, please consider buying me a beer, it keeps me motivated 😉

Nice Words!

Your books are amazing and in all honestly everyone that no nothing about this stuff should really use them. I have learnt so much in the past couple of weeks just from those and your blog then I have done in months on searching info out.

Nothing better than to find an email from someone who took the time to write. Thank You!

IF something do this ELSE do that

Did that title make any sense to you? Basically it’s saying;

IF (something is true) do “this”
ELSE (something is false) so do “that”

Let’s put that into as clear english as I can, using a simple example;

IF (you want to learn how to make a good looking osCommerce Store) buy an eBook
ELSE (just use osCommerce out of the box)

If/else is simply a true/false expression. Let’s take it to PHP Code and find something in osCommerce that would be useful to use it on…

How about IF a customer is logged in, show a link to “log off” ELSE (he is not logged in) so show a “log in” link…

This is really quite simple example, and would be written like this (in standard osCommerce coding conventions):


The above (or something very like it) can be partially found in /includes/header.php – it’s basically going in and out of PHP parsing 5 or 6 times just to create 1 line of (changing) code.

Now, I prefer to write things out so that they are simpler to understand and easier to parse, so I’d do that same code something like this:

[php]‘ . HEADER_TITLE_LOGIN . ‘‘;
$logoff = ‘‘ . HEADER_TITLE_LOGOFF . ‘‘;
echo (tep_session_is_registered(‘customer_id’)) ? $logoff : $login ;

As you can see we go into PHP once, and stay there to parse the whole thing, then out of PHP mode. I believe that this is definitely easier to understand when written down and is probably quicker to parse (but literally only by milliseconds). But milliseconds can add up!

In my code, we are assigning two new variables $login and $logoff. Then using a TERNARY operator based on tep_session_is_registered to determine which of $login or $logoff to show. Easy, eh?

Amazon Checkout => osCommerce

I’m pretty sure that almost every reader of this blog will know what “Google Checkout” is. Well, Amazon have just released their own version, read more.

Checkout by AmazonTM is a complete ecommerce checkout solution that provides your customers with the same secure and trusted checkout experience available on today. It offers unique features including Amazon’s 1-Click® and tools for businesses to manage shipping charges, sales tax, promotions, and post-sale activities including refunds, cancellations, and chargebacks.

The good thing is that Amazon have already made an add-on available which you can install to get it up and running without a lot of fuss.

I have not tested it, though I have had a look at the codebase – I’d have preferred to do things a little differently to how they’ve coded it, but all in all, if it works, why not make use of it. The osCommerce download is available here.

It’s released under GPL (as it should be), but you will need to look at the terms of use of the actual Amazon Checkout to make sure that it is what you need.

If anyone does use it successfully, please comment below – would love to hear anything you have to say about it.