enable SSL (https) for osCommerce

So, this article is for enabling SSL (Secure Sockets Layer) for your osCommerce installation. Before you go ahead with this step you first need to get yourself a Private SSL Certificate. I advise you go with a private one rather than a shared one. A shared one will display another URL for the certificate and you may scare away some customers that way.

So, since we’re hosting homedecorr at siteground we decided to buy the certificate from them. We thought it would make things easier and we would avoid a few emails back and forth. Their current price is $74 for a year.

After this purchase is done maybe a wait a couple of days and then edit two files. Both files are named configure.php but they’re in different directories. And don’t confuse them with configuration.php.

The files you need to edit are admin/includes/configure.php and includes/configure.php.

Let’s start with admin/includes/configure.php. The lines you need to edit are at the top:

  define('HTTP_SERVER', 'http://www.homedecorr.com');
  define('HTTP_CATALOG_SERVER', 'http://www.homedecorr.com');
  define('HTTPS_CATALOG_SERVER', 'http://www.homedecorr.com');
  define('ENABLE_SSL_CATALOG', 'false');

You actually need only two changes in this chunk of code. Make that ‘false’ a ‘true’ and add an ’s’ for the HTTPS_CATALOG_SERVER URL.

  define('HTTP_SERVER', 'http://www.homedecorr.com');
  define('HTTP_CATALOG_SERVER', 'http://www.homedecorr.com');
  define('HTTPS_CATALOG_SERVER', 'https://www.homedecorr.com');
  define('ENABLE_SSL_CATALOG', 'true');

Now let’s edit includes/configure.php. Again the lines you need to edit are at the very top:

  define('HTTP_SERVER', 'http://www.homedecorr.com');
  define('HTTPS_SERVER', 'http://www.homedecorr.com');
  define('ENABLE_SSL', false);
  define('HTTP_COOKIE_DOMAIN', 'www.homedecorr.com');
  define('HTTPS_COOKIE_DOMAIN', 'www.homedecorr.com');
  define('HTTP_COOKIE_PATH', '/');
  define('HTTPS_COOKIE_PATH', '/');
  define('DIR_WS_HTTP_CATALOG', '/');
  define('DIR_WS_HTTPS_CATALOG', '/');

After these changes reload your page and now every page where customers need to enter their information should behind SSL:

And that’s it.

upgrading from RC2.1 to RC2.2a

It was tedious but it at least it went smoothly. Yes, I upgraded from RC2.1 to RC2.2a. I followed the upgrade notes and with the help of a text editor I avoided undoing my own changes by overwriting the old files. homedecorr.com now has the latest and greatest osCommerce.

use lightbox

lightbox-01.jpg
I do not like the original image pop-up provided by osCommerce. Not only it doesn’t look so good but it always cuts off the bottom of the image for some reason.

Therefore I’ve decided to use something called Lightbox2 which is a simple script that overlays an image on top of the current page while darkening the background.

Installation is quite simple. First off go ahead and download the library. Create a directory at your root location called js. For example for my site this location would be homedecorr.com/js. Upload the javascript files (4 of them for the version I’m using) into this js directory.

And then copy the contents of the provided images directory to your own images directory.

Now take the lightbox.css file and upload it to your root folder - same place as osCommerce’s own stylesheet.css

OK, now we’ve uploaded the necessary files. Time to change an existing file. We need add a few lines to product_info.php. Add these lines between the <head> and <head/> tags.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

And then near the end of the same file find this line:

document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

and change it to:

document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

That’s it. Now the same pop-up looks like this:
lightbox-02.jpg

use thumbnails

By default osCommerce does not resize images for thumbnails. This will slow down your site quite a bit since all the original images are sent to the browser - and the browser takes care of resizing of thumbnails. Therefore you need generate thumbnails (a smaller version of your images) so your osCommerce can speed up.

To resolve this issue I installed ‘On The Fly’ Auto Thumbnailer using GD Library. A nice extra is that this contribution also it fixes another major problem which is the stretching of your images to the predefined numbers in your admin panel. This contribution does not stretch (or squish) your images - and actually creates better looking thumbnails then the what the browser can generate.

Highly recommended.

php info

If you need to check the PHP info before installing contributions all you need to do is to create a file; say phpinfo.php and put this text into that file:

<?php
	phpinfo();
?>

And then point your browser to this file to see all the variables / parameters associated with your PHP installation. I needed to do this to check if the GD library was installed. Make sure you delete the file when you’re done. It may be a security issue. It reveals too much information.

prevent spider sessions

spider-sessions-01.jpg
The latest version of osCommerce has a nice feature called called Prevent Spider Sessions which prevents known spiders (search engine crawlers) from starting a session.

If search engines index your site with sessions the result may not be very pleasant and it may even be a security concern. In the image below you’ll see that Google has the session ID indexed:
spider-sessions-02.jpg

So we’re going to go ahead and turn on this feature to prevent search engines from grabbing my page with the ugly osCsid. But how about the pages already indexed with the session ID? Easy. Just change your ‘osCid’ text to something else. Maybe ’secureID’. This may not be a good idea if all your pages are already indexed with the session ID since when the bots come back they won’t find your pages anymore which probably won’t help with your search engine rankings. However my site is brand new and I don’t care if I lose the couple of indexed pages I have.

To make this open /includes/application_top.php and around line 132 and 144 find the code that looks like this:

// check if sessions are supported, otherwise use the php3 compatible session class
  if (!function_exists('session_start')) {
    define('PHP_SESSION_NAME', 'osCsid');
    define('PHP_SESSION_PATH', $cookie_path);
    define('PHP_SESSION_DOMAIN', $cookie_domain);
    define('PHP_SESSION_SAVE_PATH', SESSION_WRITE_DIRECTORY);

    include(DIR_WS_CLASSES . 'sessions.php');
  }

// define how the session functions will be used
  require(DIR_WS_FUNCTIONS . 'sessions.php');

// set the session name and save path
  tep_session_name('osCsid');
  tep_session_save_path(SESSION_WRITE_DIRECTORY);

I’m going to change mine to ’secureID’ so the code will now look like this:

// check if sessions are supported, otherwise use the php3 compatible session class
  if (!function_exists('session_start')) {
    define('PHP_SESSION_NAME', 'secureID');
    define('PHP_SESSION_PATH', $cookie_path);
    define('PHP_SESSION_DOMAIN', $cookie_domain);
    define('PHP_SESSION_SAVE_PATH', SESSION_WRITE_DIRECTORY);

    include(DIR_WS_CLASSES . 'sessions.php');
  }

// define how the session functions will be used
  require(DIR_WS_FUNCTIONS . 'sessions.php');

// set the session name and save path
  tep_session_name('secureID');
  tep_session_save_path(SESSION_WRITE_DIRECTORY);

Don’t forget there are two instances up here…

While you are at it go ahead and update your spiders.txt which is under /includes as explained here.

category name instead of “let’s see what we have here”

see-what-have-here-change-01.jpg
osCommerce is a great e-commerce platform but some basic features are not implemented. Take for example the “let’s see what we have here” page heading that shows up in every category listing. Wouldn’t make a lot more sense if it just said the category name? This would also a help a lot with SEO.

You’ll only need to modify index.php. First do a text search for HEADING_TITLE in this file. There should be five occurrences. We’ll change two of those occurrences that look like this:

<?php echo HEADING_TITLE; ?>

into this:

<?php echo $myCategory['categories_name']; ?>

Don’t touch the one around line 290 - this one prints out the one on the main index page.

The other two will look like this (between commas):

HEADING_TITLE

change those two:

$myCategory['categories_name']

And finally you’ll need to add these two lines to your code right after line 57:

<?php
  if ($category_depth == 'nested') {

Now should look like this:

<?php
$myCategory_query = tep_db_query("select cd.categories_name, c.categories_image from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = '" . (int)$current_category_id . "' and cd.categories_id = '" . (int)$current_category_id . "' and cd.language_id = '" . (int)$languages_id . "'");
$myCategory = tep_db_fetch_array($myCategory_query);
  if ($category_depth == 'nested') {

And now we can enjoy our category name when visiting categories like this:
see-what-have-here-change-02.jpg

siteground down

Come on guys…
siteground-down-01.jpg
It only took a few minutes but still.

add category name to page title

Just like adding product name to page title, adding your category names to your page title’s is also very important in terms of SEO.

This also requires one little change to one single file. This time open index.php and around line 39 find where the TITLE tags are:

<title><? echo TITLE; ?></title>

and change it so it looks like this:

<title><?php if ($categories['categories_name']!='') { echo $categories['categories_name'] .' - '; } echo TITLE; ?></title>

What we’re doing here is that we’re checking if the categories_name is defined - which means the visitor has clicked on a category. And if that’s the case we’re adding category name and a dash in front of the store name.
category-name-title-01.jpg

add product name to page title

This is a MUST for search engine optimization for osCommerce. By default osCommerce will only display your store name in the page title. That’s not enough. You must put your product name in your page title.

I am going to keep the store name in the page title but add the product name right in front of it. If your store name relates to your products somehow you can do the same. If not I suggest just put the product name in the title and nothing else.

The change is very simple, it only requires you to make one change in one file. Open product_info.php and find this code around line 24:

<title><?php echo TITLE; ?></title>

and change it to:

<title><?php echo $model['products_name'] .' - '; echo TITLE; ?></title>

And if all goes well when you browse to a product page your product’s name now should show up in page title just like this:
product-name-title-01.jpg
Next we’re going to learn how to add category name to page title.