Does adding an image to a product in osCommerce bug you? The only way on a default install is to use the Upload command or if the file already exists on the server then you need to know the correct path/filename.

The osCommerce File Browser contribution is a lightweight file browsing utility that allows you to upload, delete, select files within your images folder. You can create and navigate sub folders too. When editing or creating a new product simply click on “Choose file” next to the product image field and select the image you want to use from the popup file browser. This then copies the correct path back to the product image field.

Download the osCommerce File Browser v2.0.2 contribution [zip 297kB]

If you use this contribution please leave a comment giving your thoughts. A link back to my site would also be appreciated.

Features:

• browse and select files
• create new folders
• upload files
• delete files
• delete folders
• preview images
• thumbnail mode to preview all images in a folder

This package also includes the phpThumb() class by James Heinrich. (http://phpthumb.sourceforge.net)

Requirements

• GD image library is required for this mod.
• PHP 5
• osCommerce MS2
• UNIX based or Windows web server
• Folder based user validation (do not rely on osCommerce’s security)
• Mootools v1.11

MooTools is great. I am yet to upgrade to version 1.2 but will most likely integrate the latest version into my next project.

For those readers who think I am talking about a set of spanners for working on cows;

“MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.” – http://mootools.net/

Admittedly I haven’t created anything spectacular as I use it predominantly as a time saving tool when developing web sites. Some practical uses that I have found for MooTools so far:

• dropdown list population – using AJAX. Is very handy for lists where the second list is dependant on the first
• showing / hiding content on a web page, e.g. toggle Aha, you found me!
• lightbox tool for showing images – I use Roebox as it is very lightweight, e.g. view image
• client-side form validation – simply enter a class for the input field e.g. class=”val_required”

Client-side Form Validation

The following shows how easy it is to validate forms using the Mootools framework.

View the demonstration of form validation in action

The javascript:

var fields = f.getElements('*[class^=val_]');
fields.each(function(element) {
  var lsElementName = jly_get_human_field_name(element.name);
  if((element.hasClass('val_required')) && (lsElementValue=='')){
    laValidateFields.push(new jly_validator(element,lsElementName+' is required.\n'));
    lbReturnValue = false;
  }
}

The HTML:

<input name="name" id="name" class="val_required" />
<input name="email" id="email" class="val_required val_email" />
 
 

As you can see, it is a very simple process of adding validation. All that is required is adding a class to the input field. The two examples shown here are val_required and val_email. Have a look at the source code of the demo for more information.

The demo uses alert boxes to inform the user that something is missing but you could take it a step further and add inline messages using MooTool’s injectAfter command.