In any case, it makes no sense to let people navigate through pages where there is nothing to select and no information presented. All your visitors can do in such a case is to press the “continue” button, and this is something the system can do automatically

In this way, you can cut of 2 of the 4 checkout steps and that’s a huge improvement. People will be transfered directly from the shopping cart page to the checkout confirmation page. Please note, that it case you enable a second shipping or payment module, the page will appear again by it self

The tip presented here comes from the “tip and trick” section of the osCommerce forum, to the topic there I contributed my self, unfortunately it’s getting lost in the crowd and I thing it’s worth to have it clearly presented. Like each forum post, it evolved over the time.

Lets start, things are easy, you’ll need just to copy paste

The files you’ll be working on are

• catalog/checkout_shipping.php
• catalog/checkout_payment.php

Make a copy of that files and store them somewhere on your computer, in that way you’ll be able to get back to the previous status in case you mess up

1. checkout_shipping.php

open the file and find following line, it’s number 97 in a default file

// process the selected shipping method

Add just before following

// bypass if only 1 shipping method available or free shipping
if ( (tep_count_shipping_modules() <= 1) || ($free_shipping == true) ) {
if (!tep_session_is_registered('shipping')) tep_session_register('shipping');
if ($free_shipping) {
$quote[0]['methods'][0]['title'] = FREE_SHIPPING_TITLE;
$quote[0]['methods'][0]['cost'] = '0';
} else {
$quote = $shipping_modules->quote($method, $module);
}
$shipping = array('id' => $shipping,
'title' => (($free_shipping == true) ? $quote[0]['methods'][0]['title'] : $quote[0]['module'] . ' (' . $quote[0]['methods'][0]['title'] . ')'),
'cost' => $quote[0]['methods'][0]['cost']);
$shipping = $shipping_modules->cheapest();
tep_redirect(tep_href_link(FILENAME_CHECKOUT_PAYMENT, '', 'SSL'));
}

Done !

2. checkout_payment.php

Open the file and find following line, it’s number 81 in a default file

  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CHECKOUT_PAYMENT);

Add just before

// skip if only 1 payment method available
$payment_module_selections = $payment_modules->selection();
if (sizeof($payment_module_selections) <= 1) {
  if (!tep_session_is_registered('payment')) tep_session_register('payment');
  $payment = $payment_module_selections[0]['id'];
  tep_redirect(tep_href_link(FILENAME_CHECKOUT_CONFIRMATION, '', 'SSL'));
}

Done !

Mini template system users, you can do exactly the same if your want, your files are identical to the default osCommerce version

Thats all people, try it out

All credits to the original posters at the osCommerce forum

Even this question has been asked – and answered – really many times in the osCommerce forum, it still seem to be a hard thing to do for many people. I recently got an email from a osCommerce user asking exactly this: How to add more buttons to my header, just beside the existing “cart”, “checkout” and “my account” buttons.

This is how the section look by default

That is really very easy to do, lets start. The file to work on is catalog/includes/header.php. Make a copy of it for backup reasons and open the file (not the copy)

Step 1: Locate the existing buttons

They are very easy to find, very close to the top of the file you’ll see following:

  <div id="headerShortcuts">
<?php
  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }
?>
  </div>

Each of that lines is a button. Well, the term “button” is maybe to exactly correct, since they don’t submit anything. In fact they are just links looking like buttons. This happens because of the “tep_draw_button()” function of osCommerce, that take a plain link and make it look like a button

Step 2: Create a new button

Each button need at least following information

• a link: To where should your button link to? It can be any page of your store, like eg “contact us”, any product, any category
• a text: There should be a text, so that people know what the button is for
• an icon: This is the small symbol on the left of your button

Here is a single button

tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'))

In plain english we could say

tep_draw_button(button text, button icon, button link)

As an example, lets create a button to the contact us page. So we want to link to “contact_us.php”, we want the button text to say “contact us” and the icon to be an envelope

2.1 The button link

This is this part of the button code

tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')

This is the regular tep_href_link() function used all over osCommerce. For the “contact_us.php” page, the link would look like this

tep_href_link(FILENAME_CONTACT_US)

We don’t need the SSL part of the link, since contact us is a regular page not SSL protected. As you can see, we did use the constant (FILENAME_CONTACT_US) instead of just typing in the filename (contact_us.php). This has no difference to the link functionality, but it’s highly recommended to keep this practice. You can find a list of all files and their constants in file catalog/includes/filenames.php

2.2 The button text

This is following part of the button code that we use as a reference:

HEADER_TITLE_CHECKOUT

As you can see there is again a “constant” used, instead of just typing in the text. This way the store can be multilingual. Even you use just one language in your store right now, it’s better to keep it that way instead of typing in plain text. Additional benefits are that all text is in one file and that you can change it easily there. Finally, the same text can be reused anywhere in the store

We will use

IMAGE_BUTTON_CONTACT_US

The file to define the text is catalog/includes/languages/english.php (or german.php, italian.php, swahili.php etc). Here you can add to anywhere (maybe after all other defines that are like IMAGE_BUTTON_XY)

define('IMAGE_BUTTON_CONTACT_US', 'Contact us');

What we did here is, to define, set, declare, that constant IMAGE_BUTTON_CONTACT_US be “contact us”in English. Same you need to do for all languages of your store and translate accordingly

2.3 The button icon

Here we cant use anything we want, but need to pick an icon from the existing icon set of jQuery UI. There is a large selection available, you can see it on the themeroller website. Going to the bottom of the site, you’ll see a listing of all available icons. Hover over each and you’ll see its name.

For the contact us button, where we want the envelope icon and got the text “ui-icon-mail-closed”, so the text I need for the button is “mail -closed”

2.4 Putt it together

Now after we have the button link, button text and button icon, lets put our new button together again. Here it is

tep_draw_button(IMAGE_BUTTON_CONTACT_US, 'mail-closed', tep_href_link(FILENAME_CONTACT_US))

3 Place the button to the header

You can place that button to anywhere you like. Now, since we said we want it in the header, lets add it to there.

  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  echo tep_draw_button(IMAGE_BUTTON_CONTACT_US, 'mail-closed', tep_href_link(FILENAME_CONTACT_US));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }

If you want to place the button between the existing “cart” and “checkout” buttons it would look like this

  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(IMAGE_BUTTON_CONTACT_US, 'mail-closed', tep_href_link(FILENAME_CONTACT_US)) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }

This is how things look like so far

4 Some more button examples

A nice thing to have would be a login button in the header that would change to logoff in case the customer is already logged in

Here you can change this

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }

to this

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  } else {
    echo tep_draw_button(IMAGE_BUTTON_LOGIN, 'key', tep_href_link(FILENAME_LOGIN, '', 'SSL'));
  }

and it will to exactly this

An other thing you can do, is to add a link to an external website, for example your blog. Here we don’t need to use the tep_href_link() function to create the link since the session will be lost anyway. What we want here is, to make the link target open in a new browser window and to be “stronger” than the others

Here is the button:

 echo tep_draw_button('My blog', 'person', 'http://multimixer.gr', 'primary', array('newwindow'=>'newwindow'));

You can check the parameters that the tep_draw_button() function accept in file catalog/includes/functions/html_output.php

Here is how our header look now with all that buttons

While you are doing in the header section, you could take a look about other things you can do to make it look nicer: Make a nice header for your osCommerce store

Mini template system users: Please don’t do anything of all this, it’s not necessary. You can use link manager to create links and add them to any link groups and menu maker to place them either to your main navigation or to your link boxes. There is no need to modify any file

That is how the shopping cart page look by default

Let’s change this, and let’s create a multilingual button, that will look consistent with all other buttons all over your store. The file we need to work on is

catalog/shopping_cart.php

Make a copy of that file so you can replace the file you are working on, in case you mess anything up. At about line 97 we can see there following piece of code

      $products_name .= '<br /><br />' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') . '   or <a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product') . '">remove</a>';

To make it a bit more clear what’s happening here, let’s break the code into separate lines

$products_name .= '<br /><br />' .
tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') .
tep_draw_hidden_field('products_id[]', $products[$i]['id']) .
tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') .
'   or <a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product') . '">remove</a>';

The “remove” link is following

'   or <a href="' . tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product') . '">remove</a>'

As you can see, the words “or” and “remove” are hardcoded into the file and the result is the plain text link you can see on your screen. This we are going to replace by a nice button. This is the code we are going to use

tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'))

As you can see, the link part, including it’s “action” is exactly same as before. New is, that we use the tep_draw_button function of osCommerce

IMAGE_BUTTON_REMOVE is the text for our button, this we wil add later to file catalog/includes/languages/english.php. The word “trash” is for the icon we want to use on the button, we can use any of the available icons of the jQuery ui theme.

So, our code looks now like this

$products_name .= '<br /><br />' .
tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') .
tep_draw_hidden_field('products_id[]', $products[$i]['id']) .
tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') .
tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'));

and in one line, as it was before, like this

  $products_name .= '<br /><br />' .  tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'size="4"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . tep_draw_button(IMAGE_BUTTON_UPDATE, 'refresh') . tep_draw_button(IMAGE_BUTTON_REMOVE, 'trash', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'));

Copy-pasters in a hurry, can just replace line 97 of their file with this line here

Next thing we need to do is, to define the text we want to have displayed on our new button, this we do in file

catalog/includes/languages/english.php

Here you can add anywhere before the last closing ?> following into the file, it will be better of course if you add it close to the other button text defines

      define('IMAGE_BUTTON_REMOVE', 'Remove');

Please note that this define is globally available all over your sore, so you can use the same constant anywhere else you want to have the text “remove” displayed. You can change the text of course to anything that fit your needs, eg to “kuku” and you need to add the same define to your other main language files in case you use more languages (eg german.php, spanish.php, swahili.php etc)

Lets lake a look now how our shopping cart page look like

Easy not? Enjoy and lets hope that nobody is going to press this :)

In case you are interested, here’s an other interesting post about how to remove all items from the shopping cart

Front page trash can image taken from wp clipart, thank you guys

All of that modules have a common css styling: The ui widget styling. The module heading is class “ui-widget_header” the content is “ui-widget-content”. That’s all fine and can be styled very nicely using themeroller and you can read here about how to change the ui theme of your store easily. But what is in case you have more than one module on the same page? Does it not start to look a little boring?

If you like to change the look of one – or all – the modules on your product information page, keep on reading, it’s really very simple. We are going tho change the look of the “also purchased” module, that is the most common, since it exist in each store by default

That is how the module look like on an unmodified store

Applying and other ui-theme, it looks already much different

Please note that the image above shows a store designed with mini template system, other design changes you see in relation to the default set up are because of that. The ui theme will change the colors of your module, not more

So, what to do to change the look of that module?

First lets go to apply a unique id to the whole module, so we can be sure that any setting we do will affect just this and not anything else too.

The file we need is catalog/includes/modules/also_purchased_products.php. All we do here is to add one id to the wrapping div as follows

Change this

  <div class="ui-widget infoBoxContainer">

to this

  <div id="alsoPurchased" class="ui-widget infoBoxContainer">

You can close and upload the file.

Anything else we do in file catalog/stylesheet.css (for mini template system users the file is catalog/mts/themes/theme_base_001/style_custom.css)

Here is some css that I used

#alsoPurchased .ui-widget-content{ border:1px solid #7ba6d3; padding-top:30px;  -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
#alsoPurchased .ui-widget-header{border:none; background:none; margin:0; font-size:14px; font-weight:normal; position:relative; bottom:-10px;}
#alsoPurchased .ui-widget-header span{color:#fff; background:#7ba6d3; padding:10px; border:1px solid #7ba6d3;  -moz-border-radius:10px 3px 3px 0; -webkit-border-radius:3px; border-radius:3px;}

And that is how the result look like

The orange separation lines can also be added easily. And of course you can change the css settings completely as you like Here is an other example of styling the “master slave” listing module that I added to an other site

Now go on and make your store a little more pretty

Enjoy

Honestly, if your store doesn’t make enough money, you should focus on that, or start advertising for the store and not on the store

Anyway, this was the request, so if you like something like this too, here you go

Step 1: Create the files

All boxes are in osCommerce in folder catalog/includes/modules/boxes/

The corresponding language files are in folder catalog/includes/languages/english/modules/boxes/ and have exactly the same filename as the box it self

What we do now is to take the most simple box that exist, that is bm_information.php, make a copy and rename it to be bm_adsense.php. Same we do with the corresponding language file. So we have 2 fies now called bm_adsense.php.

Keep them open in your editor, do not upload them and more important do not install and activate them in admin, you will get errors at that stage

Step 2: Basic setup

As we know, all boxes are so called “classes” and do write configuration values (constants) to the database. That mean that some parts of the content of that files must be unique.

Before doing anything else, we need to make the file contents “unique” in that meaning. We do this by replacing class function names and constants as follows:

1 Box file: class and function names – 3 replacements

Replace all instances of  ”bm_information” with “bm_adnsense”, so for example, on top of the file, it was

  class bm_information {
    var $code = 'bm_information';

and it will look like

  class bm_adsense {
    var $code = 'bm_adsense';

2 Box file: Constants – 18 replacements

replace all instances of “MODULE_BOXES_INFORMATION” with “MODULE_BOXES_ADSENSE”  Please note the capital letters.

For example it was

      if ( defined('MODULE_BOXES_INFORMATION_STATUS') ) {
        $this->sort_order = MODULE_BOXES_INFORMATION_SORT_ORDER;
        $this->enabled = (MODULE_BOXES_INFORMATION_STATUS == 'True');

and now it look like

      if ( defined('MODULE_BOXES_ADSENSE_STATUS') ) {
        $this->sort_order = MODULE_BOXES_ADSENSE_SORT_ORDER;
        $this->enabled = (MODULE_BOXES_ADSENSE_STATUS == 'True');

3 laguage file: Constants

Same thing you do in the language file, well, ok, you don’t need all that defines, so you can basically replace the contents of that file with this

  define('MODULE_BOXES_ADSENSE_TITLE', 'adsense');
  define('MODULE_BOXES_ADSENSE_DESCRIPTION', 'Show adsense box');
  define('MODULE_BOXES_ADSENSE_BOX_TITLE', 'adsense');

Right now you can upload the files if you like and go and enable them in your admin panel under modules>boxes. What you have now is a clone of the information box. Next step will be to modify the file for our purpose

Step 3 :File modification

All we have to do now, is to create and add to that box a new text input field to where we will add our adsense code in the administration panel

We need one more configuration constant for the database, that we create as follows in function install()

        tep_db_query( "insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ( 'adSense code', 'MODULE_BOXES_ADSENSE_CODE', '', 'Paste the adSense code into here', '6', '4', 'tep_draw_textarea_field(\'configuration[MODULE_BOXES_ADSENSE_CODE]\', false, 35, 20, ', now())" );

And we need of course to add that constant to the array of keys, as follows

    function keys() {
      return array('MODULE_BOXES_ADSENSE_STATUS', 'MODULE_BOXES_ADSENSE_CONTENT_PLACEMENT', 'MODULE_BOXES_ADSENSE_SORT_ORDER', 'MODULE_BOXES_ADSENSE_CODE');
    }

Last thing to do is, to set our box to display whatever we entered into the text box. This we do in function dataF() that will look after our changes, just like this

    function dataF() {

      $data = '<div style="text-align:center;">';
      $data .= MODULE_BOXES_ADSENSE_CODE;
      $data .='</div>';

	  return $data;
    }

Please note that if you did not do the changes as described here you will not find such a function in your box. You will need to do that changes to function execute() accordingly

Guess what?

We are done ! Really !

Lets go to the administration panel to see what we did. We will find our box under modules>boxes, we will need to install it, and by clicking on “edit” we have following

and a preview in the admin

And that is how the box look like on my clients site

If you like this idea too, then go ahead and do it, and if you ge rich because of your ads, you can buy me a beer :)

In the same way you can create of course any box. Even this bo here can be used for other purposes too, for example to display plain text (just add plain text into the textarea in admin instead of the adsense code) or images or anything like that

Instead of answering each time by email, I thought to make a quick post about so that anyone who is interested can do it. Instructions are same for regular osCommerce users and mini template system users

Why should somebody want to move that social bookmarks into the page body? As we know, there is a special box in osCommerce, called “bm_social_bookmarks.php” that do exactly this. Well ok, it happens that some users don’t want to have any columns, but still want to have that bookmarks

Lets start, there are 2 ways to do it

Way 1: Output the box contents to the product information page

Things are very simple here. First you need to do the changes to all of your boxes as described here

Then, all you have to do is to output the contents of box “bm_information.php” to anywhere you would like the social bookmarks to appear, like this

if (class_exists(bm_social_bookmarks)) {
$boxdata = new bm_social_bookmarks;
echo $boxdata->dataF();
}

Now, ok, you may say that you don’t want this “boxed look” on the product information page. Unfortunately data is still mixed with html in osCommerce, so, the only thing you can do is to style that box via css (an article about that will follow) or to go on with way 2

Way 2 : use the box code on the product information page

The only file to work on is catalog/product_info.php Into this file, we are going to add following code

<?php
      if (tep_not_null(MODULE_SOCIAL_BOOKMARKS_INSTALLED)) {
        $sbm_array = explode(';', MODULE_SOCIAL_BOOKMARKS_INSTALLED);
        $social_bookmarks = array();
        foreach ( $sbm_array as $sbm ) {
          $class = substr($sbm, 0, strrpos($sbm, '.'));
          if ( !class_exists($class) ) {
            include(DIR_WS_LANGUAGES . $language . '/modules/social_bookmarks/' . $sbm);
            include(DIR_WS_MODULES . 'social_bookmarks/' . $class . '.php');
          }
          $sb = new $class();
          if ( $sb->isEnabled() ) {
            $social_bookmarks[] = $sb->getOutput();
          }
        }
        if (!empty($social_bookmarks))  $social = implode(' ', $social_bookmarks);
      }
?>

There is nothing new here, it’s just the code used in the bm_socials_bookmarks.php box. Only addition is that, we do check if any social bookmarks modules are installed before we proceed, to avoid the case to look for a class if there is nothing there.

Anyway, you can place that code to anywhere you like in product_info.php. Just take care to remove the opening and clsing hp tags (<?php …. ?>) in case you are already in php mode. This code does not display the bookmarks yet, so it really doesn’t matter to where you will place it, so lets say you add it after this section

    if (tep_not_null($product_info['products_model'])) {
      $products_name = $product_info['products_name'] . '<span class="smallText">[' . $product_info['products_model'] . ']</span>';
    } else {
      $products_name = $product_info['products_name'];
    }
?>

Next part is to decide about the display of that buttons. All we have to do is, to echo or variable $social that we created with the code above. This is completely up to you and your design I will add that code just before the buttons section, that is where it says

  <div class="buttonSet">

I will also wrap that into a <p></p>, so that it looks like this

  <p class="social"><?php echo $social ?></p>

  <div class="buttonSet">

You noticed that I gave a class to my new <p>, I call it “social” but you can call it “kuku” or “titanic” or anything you like. I can now style that section as I like, for example some basic css looks like this

.social {text-align:right; padding:0 20px;}
p.social{margin:0;}
.social img{ vertical-align:middle;}

This you can add to the bottom of your stylesheet.css file

Mini template system users, please use following basic css

#product_info .social {text-align:right; padding:0 20px; position:relative; top:-20px;}
#product_info p.social{margin:0;}
#product_info .social img{ vertical-align:middle;}

and add it to file catalog/mts/themes/theme_base_001/style_custom.css

That’s all, and here is how it looks on one site where I did this

Enjoy

Image of article heading on the front page is from logorunner you can go and pick some nice icons from there

It looks like the osCommerce world didn’t heard about this yet. Like all of the osCommerce stores that I’ve seen use either the default fonts (Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif) or any other combination of the so called “web safe” fonts.

I wonder why, since this is a great and easy way to get, or to improve, the look and feel of your store

This is a short and easy to follow “mini tutorial” about adding (almost) any font type you like to your osCommerce store. There are various tutorials and posts out there about @font-face usage in general (for example here and here), so I want to concentrate here just on how to implement this in osCommerce

Step 1: Get the font you like

There is a great site that provide free complete font face kits that you can simply download and use on your site: Font Squirrel There are so many font’s to choose from that you’ll find for sure something that fit your needs.

Select the one you like and you’ll get to a screen that offers even more details for the selected font type

Now click on “@font-face kit” that will take you to the download screen

Now, just click on “download font face kit”. You will get a zip file to your computer. Unzip it.

Step 2:  Add the fonts to your store

The contents of the folder you just got will look like this. There can be more files included, depending on the font type you selected, since some of them have many sub variations, such as thin, bold etc

Now open the file stylesheet.css and copy all of it’s contents into the top of your file catalog/stylesheet.css. The content will look like this, again, there is maybe more, depending on the selected font type

@font-face {
    font-family: 'MichromaRegular';
    src: url('Michroma-webfont.eot');
    src: url('Michroma-webfont.eot?#iefix') format('embedded-opentype'),
         url('Michroma-webfont.woff') format('woff'),
         url('Michroma-webfont.ttf') format('truetype'),
         url('Michroma-webfont.svg#MichromaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Leave this as is for now, keep the file open, and zip again the downloaded font folder. You don’t need to include the demo.html and the stylesheet.css, just the rest of the files. In any case, do not rename the folder.

Create 2 new folders named /css/fonts/ within folder /ext/ on your server, so you get following folder structure

[catalog]/ext/css/fonts/

Now upload the zipped font folder to this location and unzip it again. You should now have following folders on your server

[catalog]/ext/css/fonts/michroma-fontfacekit/

It’s not necessary to mention that the actual folder name depend on the font kit you selected, so please do not rename you folder to this folder name here, this is just an example

Next thing is to set the right path in the stylesheet.css file. This is the path to the folder to where you just uploaded the font kit. So, your file catalog/stylesheet.css will look like this now

@font-face {
    font-family: 'MichromaRegular';
    src: url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.eot');
    src: url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.eot?#iefix') format('embedded-opentype'),
         url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.woff') format('woff'),
         url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.ttf') format('truetype'),
         url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.svg#MichromaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Step 3: Use the new fonts

Final step now is to start using the new fonts. You can use them in the complete store or for selected areas of your store.

If for example, you want to use them everywhere, then apply them to the <body> tag as follows

body, .ui-widget {font-family:MichromaRegular, Arial, Helvetica, sans-serif;}

You can see that here I use this font in all text and in anything that has the class .ui-widget. Also you see that I added some common fonts, that is “just in case” something goes wrong with the new fonts

You can be much more selective with your fonts, for example use them only for the page headings, like this

h1 {font-family:MichromaRegular, Arial, Helvetica, sans-serif;}

Here is an example of applying a font-face to just the <h1> tag

What else you can do? You can use more than one font-face, for example have ne for the headings, an other one for the product information page, an other one for the footer etc etc. Just take care to keep a nice balance

Now, go on and add some nice fonts to your store

Let’s take things from the beginning and step by step, there are actually just to steps to do

1 Get your code from google

First please go to the google analytics website. In case you don’t have a google analytics account, you will need to create one, if you have, just login.

Second step is to create an account and a profile for the website you want to start tracking, your store in this case. The instructions about how to do that are very detailed on the google website, so there is no reason to repeat this here. The screen you will face will look like this

You could also create just a new “profile” in case your store is just a pert of your complete website, this depends on how you want your data to be grouped and displayed

Important to start tracking your store is to get the unique tracking number, that looks like this

The number we need is the one that start with UA- in the image above. Please do not use the number on the image here, you will get your own number from google. In case you want to add “ecommerce tracking”, press on edit on the right hand side of your profile line and enable it from there

2 Install the google analytics module

Now, after we have the google analytics number, lets add it to our osCommerce store. We need to login to the administration panel and then click on modules>header tags and install on the top right corner. They may be several modules available for installation, the one we need is called, how else, “google analytics”. Install it

Last step is to add the google number to the module and to enable ecommerce tracking in case we have it enabled at google too.

Just type in the number, that’s it. As for the “Javascript Placement” I personally prefer to add it to the footer, it makes no difference to the tracking results

Enjoy

It is a great help to get a concrete information about the clients vision on how the website should look like and even more to get a message like this one: “You have free license to do what you think works best and looks good. I believe in your artistic taste.”

Since this looks like a very promising project, the design is far away of whatever could be called a “stock osCommerce design”, I decided to post the progress of designing this new theme here. The post will be updated as I go, so if you like you can check back from time to time to see what I’m doing. Feel free to post any comments about anything.

The store is live and you can visit it if you like here Mas Design

Installing osCommerce

First step of course is to install osCommerce on my local computer using XAMPP. I’m going to use the latest production ready version, and hat is version 2.3.1 (version 3 is not ready to be used on live stores)

That is how the product information page look like by default (I’m going to start the design with this page). Columns have been removed, that is very easy to do in the administration panel under admin>modules>boxes. You can disable there any boxes you don’t want, if you disable them all, you will get a layout without any columns or boxes

I’m also going to use mini template system for the design. (please note that mini template system is a commercial addon for osCommerce, do not click the link if you are not interested in anything that is not free and keep on reading here)

The reasons to use mini template system for this are following:

• To have all design and template related files in one folder and not all over the osCommerce installation
• To be able to switch to an other template any time and for any reason, without having to modify any file
• To be able to use all the mini template system features to create the design easier, but most important
• To give the ability to my client to manage his template easily maknig any necessary adjustements him self without having to contact (and pay) me or anyone else for this

Having mini template system already installed on osCommerce, next step is to create a new template and activate it in the administation panel

That is how the same product information page look like after installing the template.

On this base and within this template folder we will create the new template. Although I will use mini template system, following explanations will mainly point out what I would do if working on a default osCommerce store so that anyone interested can follow

Changing header and footer, adding background image

Header and foter affect the design the most. Changing them will give us immediately a new look and feeling and also, hopefully an inspiration on how to go on. To have the background image right away will give a feeling for all colors to be used

The background image can be added easily in the css file, this is in case of mini template system the file catalog/mts/themes/themplatefolder.style.css for default osCommerce it is catalog/stylesheet.css. We do add the background directly to the <body> as follows

body {background:url(images/backgroundPlain_2000x1718.jpg)}

There are of course many settings you can do here, depending on what type of background image you’re going to use (eg a large one as in this case here or a small one that you want to repeat etc) You can read more about at w3schools. It is important in any case to have the image uploaded on your server and to set the correct path to it, in this case it is in folder /images/ but it could be in any folder

In the header section only thing we do right now is to remove any menus, backgrounds etc and to leave just the logo in place. We will add a menu in a later step. The file to do this (in a default osCommerce set up) is catalog/includes/header.php, if using mini template system, you will find the file in catalog/includes/mts/themes/templatefolder/files.

In the footer section we can already do more. Since we don’t want a thick footer with many links and stuff in in, all we have to do is a simple <ul><li> structure, add the links we need to there (placeholder links for now) and style a little in the css file. The file to work on is called “footer.php” and is at the same location as the header file. As an example, the section of the footer that holds the left hand links, look like this in the file

        <ul class="left">
          <li><?php echo '<a href="'. tep_href_link(FILENAME_DEFAULT) .'"' . 'class="menu"' . '>'. 'home' .'</a>'; ?></li>
          <li><?php echo '<a href="'. tep_href_link(FILENAME_DEFAULT) .'"' . 'class="menu"' . '>'. 'one link' .'</a>'; ?></li>
          <li><?php echo '<a href="'. tep_href_link(FILENAME_DEFAULT) .'"' . 'class="menu"' . '>'. 'one link' .'</a>'; ?></li>
          <li><?php echo '<a href="'. tep_href_link(FILENAME_CONTACT_US).'"' . 'class="menu"' . '>'. 'contact' .'</a>'; ?></li>
        </ul>

That is how the website look like after doing this changes

Already coming closer, not? Lets concentrate now on the contents and the layout of the product information page it self

Change the layout of the product information page

First we want to change the page structure, so we need to know how the various eements, like the image, description etc are placed. To visualize this, we just add stroong background colors to each “container”

Now that we can see each area clearly, lets move the product images area to the left and the description to the right. This is easy to do, just open your file catalog/product_info.php, find following line (2 times in the code) and change the “right” to be “left”

    <div id="piGal" style="float: right;">

It’s however recommended to not use inline styles but to add any rules to your css file.

We also move the <h1> area (holding the product name and price) and the button area to be on the right of the product image.

That is how it looks

Next thing we want to do is, to move the additional images to be on the left of the main image and not under it. That’s also not hard to do, instructions are on the bx slider site, that is the script that osCommerce use to create the image gallery. Also important, to make the correct settings for the sizes of the main and additional images. They are done directly in file catalog/product_info.php, the default settings look like this, you need to change them according to the image sizes you plan to use

<script type="text/javascript">
$('#piGal ul').bxGallery({
  maxwidth: 300,
  maxheight: 200,
  thumbwidth: <?php echo (($pi_counter > 1) ? '65' : '0'); ?>,
  thumbcontainer: 300,
  load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>

An other thing to do is to get the “social bookmarks” directly into the body of the product information page.  I wrote a separate post about how to do this, please read here about how to move social bookmarks to the body product information page in oscommerce

I also reorganized the way the information is getting displayed like price, add to cart button etc. The add to cart button is still the default, this will change later after the general button style is decided.

Let’s check how things look now

Next thing will be to add “related products”, that is an area to show any cross- or up-sell items of a product. There is an addon existing for this in osCommerce, called “optional related products“. This need of course to be upgraded to work with version 2.3.1 of osCommerce. Also the way the product information get printed to the screen, need to be adjusted to the particular layout. An other layout, than the one shown here, is posted here and also used live on this site

However, in this case we need just the related product images to be dispayed, all other info will appear as a toltip upon hover, or in a “jquery dialog” upon click, I’m not sure yet. After adding this, the website look like this

We are more or less done with the layout. Lets remove the help background colors and replace them by semi transparent rgba colors (for IE we will use png images) and that is how everything look like now

There are still more things to do of course, like to improve the page functionality: I don’t want the various links  (like “ask a question about this product” or “reviews” etc) to lead to other pages, I don’t think that it is a good idea to let customers leave the product information page (except of course towards checkout), so all this information need to pop up within the product information page. For this I’m going to use either one of the existing scripts (the jQuery UI dialog or a fancybox style) or something totally different

After doing some smaller changes, and after adding the real products and real images, here is how the product information page look like

What is new here, compared to the previous “version”?

Option types: That are the radio buttons that let users to select the iPhone model they use. For this I used the addon “option types v2” that I modified a little to work with osCommerce version 2.3.1. Additionally I added some more improvements made by me, like the ability to add short and long option descriptions etc. Unfortunately, I didn’t found time to upload a new version of the addon, all information is posted however at the osCommerce forum

Here is an example of how the option description pop up window look like

An other “new” thing is the “ask a question” feature, that enables store customers to send a question about that product to the store owner without having to leave the product information page. I think there are some addons available that promise to do this, I preferred however to create the functionality by my self from scratch.

I will make a separate post about this, for now just to say that what I did was, to create an ordinary form, same/similar to the contact us form of the default osCommerce, include it into file product_info.php, wrap it into a div and link to that div using fancybox, you can read more about at the fancybox usage instructions

Additionally I added the image of the product in question to the left and a jQuery valitadition. This is how the screen look like after pressing the “ask a question” link

An oer issue that had to be solved was the space issue. As you can see the text side of the product info page has the same height as the image side, so the text is limited by this. It appeared now the case, that some products needed some extra text, and there was absolutely no space for this.

One way was to add a scrollbar  to the product description it self. This is technically easy, by adding an “overflow:auto” to the <div> that wraps the product description, but the result is really very ugly:

What to do then? Since the additional text is related to the images, why not to add it over the images and make it appear upon hover? This is what I decided to do, but how to implement? Not all products have this extra note, and the text can be different from product to product.

Someone would say to go on as follows: Make a new field in the database for the extra text, an input filed in admin to enter this text, then change the query in product_info.php to get this text, and finally modify the file one more time to display it. Such a trouble !

I did something totally different, using jQuery. Since we have it in osCommerce why not to use it? The particulat jQuery method to use is append() Using this, all I had to do is to type in the text into the product description, wrap my extra text into a <div>, give to that <div> an id, eg <div id=”kuku”> and then, using append() to move that <div> from its original place (the description) to the <ul> that holds the large image. To get the hover effect all you need is some css, there are many tutorials all over

Here is how it look like upon hover over the image:

Index pages: Product listing, category listing and home page

Next step is to do something about the homepage and the product and category listing pages. In osCommerce product listing and categories listing happens on the index page. This may be a little confusing, because usually we call “index” the “home” page. However, in osCommerce, the index page has 3 “cases”:

• case to list subcategories
• case to list products
• Case not to list anything, that case is if no “cPath” is given, that is the so called “front-” or “home-” page

That “cases” are clearly to indentify in your catalog/index.php file, and look like this:

  if ($category_depth == 'nested') {
.
here we have subcategory listing
.

  } elseif ($category_depth == 'products' || isset($HTTP_GET_VARS['manufacturers_id'])) {
.
Here we have product listing
.

  } else { // default page
.
here we dont have anything = front page
.
  }

Index page: listing subcategories in a simple grid

This is the first “case” we will start with. The file we will work on is catalog/index.php and particularly the section that starts with

  if ($category_depth == 'nested') {

You will find this at line about 37 in a default index.php file and the default output look like this

First thing we activate our template, the one we are working on, and now it looks like this

There is not really much to do here, things look almost ok. I’ll do following:

Disable the new products module. Very easy to do, in the file, at line about 88, comment out the new products module “inclusion” like this

<?php //include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>

Next, I will remove any borders and make the subcategory name to be placed on the image and not under it. The part of the file to work on is this here (line about 73)

      echo '        <td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br /></a><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . $categories['categories_name'] . '</a></td>' . "\n";

What I will do is to place the contents of the <td> into 2 nested <div>, the first one will get the full <td> width and will be used to add a background, the second one will be positioned relative and will get the width of the image and will be used as a wrapper for the next element, an absolute positioned <p>, wrapped by the 2 div’s that will hold the category name

Final step is to adjust the subcategory image size, this I do in the administration panel under admin>configuration>images. Number of items per row can be set under admin>maximum values>Categories To List Per Row

The rest is a few lines of css to set margin and padding for the elements and to choose the background colors that will be again set as semi transparent rgba colors. I do also play a little with opacity values, so I can get a nice effect upon hover. For browsers that support transitions, there will be also a small delay in the effects

That’s how the site look like now

On hover over any subcategory, opacity values change and it look like this

Because I’m not sure yet about the image ratio that will be used, I created 2 more subcategory listing layouts, one with a dark background and one on a white background.

To switch from one listing layout to an other is quite simple, all that I needed to do is to change the number of “categories to list per row” under admin>configuration>maximum values and the subcategory image size of course under admin>configuration>images.

The colors can be set and changed by modifying a couple of lines in stylesheet.css

The final subcategory listing section of the index page, using the real product images look like this. The category name appear upon hover over the image

Index page: Product listing using bxGallery

The osCommerce product listing page (index,php for “case” products) looks by default like this.

After activating the template, we see that the “body” of the listing remain almost the same. How it comes? It has the css class “.ui-widget-content” and since we didn’t change the ui theme yet, the result looks same.

Before changing anything in colors and backgrounds, we want to change the way of product listing. The default osCommerce way is maybe suitable for stores with many products and very practical, since it gives a fast overview, but, in this case here, it doesn’t match the whole design.

How and where to change this? The file to work on is catalog/includes/modules/product_listing.php This one get included into the index.php file in “category_depth” products, at about line 238

    include(DIR_WS_MODULES . FILENAME_PRODUCT_LISTING);

All data get collected in index.php, product_listing.php is responsible for the display. That mean that, if you want to have any other data displayed on your product listing, you need to make sure this data is taken from the database in index.php and then you can decide how to display it modifying this file here.

What we want to do is to change the listing style completely, to turn it into a “gallery” style. Since osCommerce has already the very nice bxGallery script (by  Steven Wanderski) installed, there is no reason to look for an other one.

bxGallery must be applied to an html unordered list, so, first thing is to change the table structure of product_listing.php into an unordered list. (An “unordered list” is a list created by <ul><li> etc oposite to the “ordered list”, that means numbered, that is like <ol><li> etc)

After doing this, the file looks like this (in a simplified form)

 echo '<div id="liGal"><ul class="mainImage" >' . "\n";

    $pi_counter = 0;
    while ($listing = tep_db_fetch_array($listing_query)) {
    $pi_counter++;

            $pi_entry = '<li>';

	$pi_entry .= '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'] . '</a>';

            $pi_entry .= '</li>';

    } // end while ($listing = tep_db_fetch_array($listing_query)) {

    echo '</ul></div>';

To say the truth, all you need to do is, to look how it is done in product_info.php that use the same gallery. You can of course add anything you want into each <li></li>, in the example above it is just the image. I will add also the name, price, buttons etc, wrapping everything into <p> within the <li>.

If you want to keep the admin settings, about what to show on the listing, you can use the switch/case structure that exist in the file, just make sure you replace the table structure by <div>’s or anything that suit your needs

Do not forget to add this after your list is done

<script type="text/javascript">
$('#liGal ul').bxGallery({
  maxwidth: 375,
  maxheight: 375,
  thumbwidth: 185,
  thumbcontainer: 565,
  thumbplacement: 'left',
  opacity: .7,
  load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>

You can find more information and setting options on the bxGallery site. However, hat are the settings I used to create a list like on the image below

All products of a category are listed in “thumbnails”, upon hover the main image on the left change. This is what the installed gallery script do

Upon hover over the main image, a short product description and the “buy now” and “details” buttons appear.

I’m not absolutely sure if I maybe prefer the large image to be on the right, that is easy to change by changing the thumbplacement: ‘right’, to be thumbplacement: ‘left’, in the bxSlider settings

Tell me what you like more, left or right? I really can not decide

An issue I had to solve here was that, the thumbnails generated by bxGallery are not links, they can not be clicked, or let’s say, if clicked they only change the main image. Here I did a temporary fix, I’m not posting it because it’s not very “elegant” and it also requires changes to the bx gallery script it self, so I think it will cause more questions than necessary.

Index page: product listing in a grid

Well, finally I decided to go with a much more simple and “lightweight” listing in a grid style, that looks like this

Things are much more easy here, than in the bx gallery case. All you have to do is, to modify the code of file includes/modules/product_listing.php to create a <td> for each product instead of a <tr> as per default. Within this <td> you can add any information you like, such as name, price etc. This I wrapped all into <p>, that are the <td> of the original file.

Next thing to do will be, to copy the “logic” of the products to display per row for example from the new products module, that is located in file catalog/includes/modules/new_products.php

In case you are a mini template system user, there are good news: This all and much more will be included into version 1.4 that will be released soon, so you can make all adjustments from your administration panel.

Index page: Front page with banners

We all know the default osCommerce frontpage, showing the new products and the famous”welcome guest” message

To show new products may be fine, depending on the store, but the “welcome message” is something that need’s to be removed in any case and for every price. People do not visit online stores to login or to create accounts, so, if you still have this on your store, remove it asap !

Having mini template system installed, it get really easy to configure the front page. Using the front page manager and the banner manager we can configure the front page very quickly without having to modify any file at all. (please note that mini template system is a commercial addon for osCommerce, do not click the link if you are not interested in anything that is not free and keep on reading here)

We are going to use the 2 banner modules, the first one to display a large image and message, the second one can be used to promote featured products or specials or anything. I won’t get to much busy with the content, since this is very easy to manage and change by the store owner himself.

That’s how our front page look like after a few clicks in the admin panel

Well, finally, the front page includes just 1 banner slider and look like this

This is however the easiest part of the whole design process, technically I mean. The hard part is to get the right inspiration :-)

As said, this is all done using mini template system. Let’s see what you would need to do in case you don’t use it. The file we need to work on is index.php and concrete the last “section” of it that starts at about line 244 in a default osCommerce installation and look like this

  } else { // default page
?>

<h1><?php echo HEADING_TITLE; ?></h1>

<div class="contentContainer">
  <div class="contentText">
    <?php echo tep_customer_greeting(); ?>
  </div>

<?php
    if (tep_not_null(TEXT_MAIN)) {
?>

  <div class="contentText">
    <?php echo TEXT_MAIN; ?>
  </div>

<?php
    }

    include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS);
    include(DIR_WS_MODULES . FILENAME_UPCOMING_PRODUCTS);
?>

</div>

<?php
  }

Here you can basically delete everything, so that this area of the file look like this

  } else { // default page
?>

<div class="contentContainer">
  <div class="contentText">

  </div>
</div>

<?php
  }

You are free now to add anything you want into here, this is plain html and you can do whatever you want, no limitation. If you want for example to add a slider, there are many nice jQuery based sliders around, I personally would use bxSlider as I did for mini template system. However, here is an other slider overview, but please do not feel limited to this, there are for sure more.

Most, if not all, of them will require to make an unordered list (<ul><li>) of the images you want to display. Some others allow also some text, however each slider has it’s own specific setup. What you need to do is to add the unordered list into the <div> structure left in index.php, link to each image separately and of course make sure the images are on the server and the path to them is correct.

Finally you will need to add the new script files and link to them in includes/template.top.php

If you want to have new products, or upcomming products or any other module you may have installed, you can add it to here like this for the new products

<?php include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>

If you want to style this module too, you need to do it in its file, for example the file that displays the new products is catalog/includes/modules/new_products.php

So, we are done with the front page, not so hard, not? Next step is no make the main navigation menu on top.

The header and the main navigation

This is something that I left for the end, for sure you noticed that on the final images, the header is already there. Here is how I did it

First of all to say that, even the main navigation is in the header, I didn’t modify the file that holds the header information at all ! Well, this is because of mini template system, if you have the default osCommerce, you will need to do a couple of changes to the file includes/header.php

The header section consist of 3 elements: The logo, the main “slogan” on the right and the menu under it

• The logo is easy, just upload it under admin>configuration>store logo. That’s all
• The slogan, at the top right is in real a banner. Instead of an image, I typed in my text into the “html” textarea in admin>tools>banner manager. I added this banner to banner group “my_theme_name_header”.The first row is a <h2> tag, the second one a <h3>. The rest is css styling
• To set up the menu, I created a link group using mini template systems link manager and enabled the main navigation bar setting it to display my just created link group.

That was all. Lets see now what I had to do if not using mini template system. Here is a useful article to read, that explain the osCommerce header structure. If you want such a header, what you need to do in file catalog/includes/header.php is

• replace the contents of <div id=”headerShortcuts”> by the banner code. You will find such a code example in file catalog/includes/footer.php Choose a link group name and add the content to that group via admin, same as I did before
• Strip out the complete breadcrumb section and replace it by your menu. I’m sorry, but I can’t go into details here about how to create such a menu, maybe there is something in the osCommerce addons area, I’m not sure. As a general orientation, you need to get your categories structure into an unordered list (there is an addon for this) and then apply a script to create the dropdowns, what I use is superfish, but there are others too.

Additional information

I used a custom ui widget theme to fit the needs of the template. This I created using themeroller, all I had to do was to install it, you can read here about how to install a new theme to your osCommerce store

I used also custom fonts for the header section and all page headings, you can read here about how to do this

Well, people, I maybe forgot to mention some things I did, feel free to ask. I’m sorry for not going into detail in some things, the post would be too long, it is already long, I’ll try to cover particular issues in separate posts. Target of this post is finally to give you inspiration and not to teach you each technique step by step

Conclusion

Files that I had to modify (starting from a default osCommerce 2.3.1 store and without mini template system in use) are

• stylesheet.css
• index.php
• product_info.php
• includes/template_top.php
• includes/header.php
• includes/footer.php
• includes/modules/product_listing.php

Total = 7  files.

Please realize that changing just 7 files changed the overall look of the store completely. Consider this when you are planning to purchase a template and ask (before buying) how many files will need to be modified or replaced by he template. Most of the poorly coded templates will require a complete reinstallation of osCommerce. A properly coded template will not require changes to more than 10 files, something aroud 5 to 10 files. Also to say that, if using mini template system most of the files don’t need to be modified at all.

The store is live and you can visit it if you like here Mas Design Feel free to browse around and to check whatever I posted here. Please do not make any test orders because the store is live, I guess that real orders are welcome of course, I can only say that this titatium backcovers are really a nice thing.

Enjoy

PS Please do not ask me to send you this template. I’m not selling it and not giving it in any form. This is a custom work, the design and layout are unique, the store owner participated him self at many stages of the design process, making images, suggestions, giving ideas etc. So, there will be no second exactly same store. If you need a custom store, you can get in touch of course, I’ll be happy to discuss any details with you, but please don’t ask for exactly this one

What I’ve got is a box that display for each cross or up sell product it’s name, model, manufacturer, it’s image, part of the product description, price and quantity and the buttons “buy now” and “details”.

I won’t go into more details about this, the topic here is an other, it’s about the old and well known problem about how to get an equal height for each box.

Here is an image of the problem. The background in in green on purpose to make the problem clear

You see that each product column has it’s own height and that doesn’t look nice at all. Even I’m using an example here for the product information page, you will face the same if you want to do similar listings for the index page or the new and specials modules.

What to do now?

To understand the following comments lets take a look on how this box is structured in a simplified form (I will leave out anything that is not related to the issue. The complete and real code will be available at the osCommerce addons soon anyway)

<div class="outer">

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

</div>

1) Limit the number of characters used for the description

Yes, this is done already. But even we set eg just 300 characters to be displayed, there is maybe a product with just 100 in it’s description. So we can set the limit to 100. But do we really want to limit all product descriptions, just because one of them has a short or no description?

So, that’s not a satisfying solution, at least not completelly

2) Set a fixed height for the description.

That is exactly what I was doing till now, to add to my stylesheet.css a fixed height for the element that containns the product description like this:

.description {
  height:200px;
  min-height:200px;
}

A side note: If you are copy pasting anything here, please be careful and use your own names for the css classes, or add an id to the whole container. It can be that the same names are used elsewhere in your site and this could cause problems

But again, is this solution a good one? I say no, or at least not 100%. I don’t like the idea that each time I want to change the length of my description I have to modify several files to make it look ok again

3) Faux columns

This is a well known technique, that can be realized in 2 ways: The one way is using background images (you can read here about faux columns in osCommerce) the other way is to faux using css. Second solution I do use for example for the side columns of osCommerce

Do this solutions solve our problem? again, no. The image solution requires a fixed width, and we don’t know how many boxes there will be per row, the content is dynamic and can change any time.

What comes next? A google search and one more solution based on css

4) The css way

Here is the article I found that explain how to get equal height using css only. Please take a look and then come back here.

Sounds great not? But again, we can not predict how many products we will have per row. So we don’t know exactly what classes to apply to where. Trying to create some logic to make all those percentage calculations, I really got a headache. Conclusion: This solution sounds good for a static html layout, but is not good for our purpose

Back again to google. This time some more solutions based on jQuery. From all results, I took 2 to try them out

5) The jQuery way 1

This solution, to set equal heights with jQuery comes from the same people who also did the themeroller that we all use in osCommerce 2.3.1. Very promising, so lets try it out.

First, we copy the script into a .js file and upload that file to the server. Lets say we call the file equalheight.js. You can place it into folder catalog/ext/jquery/ of your osCommerce installation

Second, we link to that file. In file catalog/includes/template_top.php add just before the closing </head> following line

<script type="text/javascript" src="ext/jquery/equalheight.js"></script>

Then, we go to the file we create the listing. This could be the file catalog/includes/modules/product_listing.php if you do something for the index page, or catalog/includes/new_pproducts.php if you alter the new products module, or whatever. Here we are going to use the simplified example posted above

We need to apply a css class or id to the outer element that contains the columns of our product listings, like this

<div class="outer equalHeight">

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

  <div class="inner">
    ......
  </div>

  <div class="inner">
    ......
  </div>

</div>

Last step is to call the script in following way

$('.equalHeight').equalHeights();

The script will apply the height f the tallest direct child to all other direct children (in our example the div with class=”inner”).

The result look like this (the equal height area is marked orange

So, ok, we come closer. We see that the buttons section is not at the bottom, closest thought is to position it absolute into it’s relative positioned “inner” conteiner.

Our css look like this

.inner {
  float:left;
  position:relative;
}
.buttons {
  position:absolute;
  bottom:0px;
}

Again, copy pasters, please be careful with the class names, choose your own. Also, only the css related to the issue is shown here

And the result look like this

What is now? The buttons section covers part of the description of the tallest element. Again a solution to this, to add some bottom margin to the description, that need to be equal to the height of the button section.

So, lets go, but… wait: Do we know this height? No we don’t because if depends on the content of the buttons area, and there can be a price or not, a quantity or not, the buttons themselves or not, according to the administration settings

Conclusion: We came very close, but that’s also not exactly what we need.

Back to the google results. But first lets think again what our problem is: We have a description that is not equal in length for all items and we want to make the container (in our case the <p class=”description”> to have the same height. In other words: We need something to apply to the inner element (the description) directly.

Is there something? Yes there is !

6) The jQuery way 2

This solution about divs of equal height using jQuery script has one main difference to the previous. It apply to the inner element, and that’s exactly what we need

The procedure is the same as at point (5): Paste the script into a file, link to the file.

Then in the file we are working on we add a class to our <p> that contains the description as follows:

<div class="outer">

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description equalDesc">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

  <div class="inner">
    .....
  </div>

  <div class="inner">
    .....
  </div>

</div>

Finally, we call the script in the same way as before, only difference the class name and the script name

$(".equalDesc").setEqualHeight()

and how does everything look like? (The description is now in orange)

Yes, that is it ! That’s the way to go. One more last image without the help colors

Try it out and enjoy

I will try it out for the columns left and right now