Brisbane Web Design - Jellygnite - Website Design, Web DevelopmentAdvice on web design, web techniques and all things good

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]

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.

While osCommerce is not my favorite e-commerce package, it does work and is relatively easy to get up and running. And of course, being open source, is free. I have implemented it for a number of clients. One problem I did have with it was with the process of adding an image to a product. The default way of adding or changing an image was very awkward. Also, every image was placed into the single folder “/images”. There was no obvious method for organising images into sub-folders.

What the system needed was a file browser utility to let the administrator insert some organisation into the images folder. There wasn’t a contribution at the time that suited my needs so I decided to create one myself.

Based on the simple File Browser from by Steve Blinch [code.blitzaffe.com] and using his excellent DirecTemplate system I have created an easy to use File Browser for osCommerce.

The current version is a complete rewrite of version 1. Version 1 was a bit quick and dirty. Version 2+ has addressed any CSS problems and now runs on both Windows and *NIX based servers. It also has some new features including thumbnail view and a more intuitive preview mode.

Version 1 is available from the contributions section at the osCommerce web site and I will post Version 2 very soon.

The osCommerce File Browser v2 contribution is available for download now.

This was said to me the other day while talking about my website or lack of. Thus prompting to me to get into gear and get my new website up and running. I had been putting it off for too long due to an overload of paying jobs to get through. A single banner stating “website coming soon…” doesn’t really cut it.

So, after a few nights work, here it is. I plan on adding useful information to this blog that hopefully you will find helpful.

Ok, I don’t know how useful this is but I just found out how to change the background colour of the workspace in Photoshop. I could only change the background of an open image, not the overall workspace background.

Instructions

1. Ensure you have an image open in Photoshop
2. Choose the paint bucket tool
3. Set the foreground colour to one of your liking
4. Hold down shift while left clicking in the workspace area surrounding your open image
5. This should fill the workspace with your selected colour

All future images will use this workspace colour.

Keep in mind that grey (RGB 128:128:128) is the best colour to use as it is least likely to affect the appearance of the colours within your image. I am using Photoshop 7.0.