Outdoor Action osCommerce Website

Posted June 25th, 2004 in Case Studies (Updated June 22nd, 2008)

Outdoor Action is a New Zealand based e-commerce website selling outdoor goods such as kayaks, sleeping bags, packs and navigation and hiking aids. The physical store is based in Takapuna in Auckland and they decided to revamp their online commerce store in March 2004. It originally utilised the ecommerce functionality in their "Counter Intelligence" POS software but has been replaced with an implementation of the osCommerce open source ecommerce solution which uses PHP and MySQL.

Please note: the Outdoor Action website has since been redeveloped by another party and features a new design and backend system.

Design and CSS Positioning

The design for the Outdoor Action site was created by Nicola Wright of Deluxe Design using Adobe Photoshop. I created the base templates for the site also using Photoshop and used the Zend Development Environment to create the necessary HTML files and CSS stylesheets.

The site itself is laid out using CSS positioning and was tested in a wide variety of browsers and platforms to ensure a consistant look and feel for all visitors to the site. The DHTML/Javascript layered navigation has been designed to work only for browsers that support document.getElementById() to avoid additional workarounds required for older browsers. For those that do not support this, subcategories can still be selected by drilling down into the categories from the main navigation.

osCommerce Customisation

Screenshot of a product page from the Outdoor Action website

Typically, osCommerce websites all tend to look very similar as in most cases the developers of the various websites simply use the default layouts and maybe change the colours in the style sheets. For the Outdoor Action site we wanted a nice look that breaks away from the plain boring default template. The result can be seen in the example screenshot above and from visiting the Outdoor Action website.

This required quite a lot of customisation to the various templates and the creation of new classes and functions to display the products and categories in a three column listing with images. Every template was modified and the layout HTML removed and placed into top and bottom include template files. This makes it much easier to make changes to the template that will be reflected across the entire site.

Screenshot of the shopping basket page from the Outdoor Action website.
The basket in this screenshot contains one item.

The shopping basket function, shown in the screenshot above, was modified slightly so that clicking the "Checkout" button has the same affect as clicking the "Update" button, and then proceeds to take the shopper to the checkout page. This means that the order is updated as well as progressing them to the next step; this is intended to cut down on steps and make it easier for the shopper. In a tradional osCommerce site the visitor must first update the basket and then proceed to the checkout afterwards.

Daily Automated Updates

The Outdoor Action website database is refreshed on a daily basis by running PHP scripts on an inhouse Linux server to extract data from the Counter Intelligence POS database (which uses an Microsoft Access database). This script updates existing products, adds new products and deletes any old products from the database, and takes care of uploading new images to the database and updating various scripts on the site that drive the navigation.

Screenshots on this page were taken using the Gimp 1.2. The browser is Konqueror 3.2.2 on KDE/SuSE Linux Professional 9.0 using the Plastik theme.

Visit the Outdoor Action website