vGer stands down

http://forums.osquantum.org/index.php?showtopic=1967

I cannot continue as head of the osQuantum Project but have to stand down and let the rest of the team take over. I am sure they will do a better job than I have been doing since last year.

Date Bookings in osCommerce, using jquery

We finished up a very interesting project the other day. The client basically required a way to link dates to individual products, thereby allowing his customers to select a date as an attribute.

Really very easy, if you think about it. Just add the dates as options then apply to each product as required. Then the customer will see a dropdown box in the product_info page. Easy as 123.

But what if the shop owner wants a better experience, both in the admin side and in the shop side?

An example would be adding a date range – imagine you wanted to add the whole of August – you’d need to insert 31 product attributes (the dates in August 1st to 31st) then add these one by one to the product you want to add them to. What a nightmare. Instead, why not have the ability to select a date range, press insert and all this is done automatically in the background. With a bit of thought, it’s do-able.

Step 1 was to change the product_attribute page in admin to allow the ability to add a date (or dates) to a product.

In the example, I am adding the the whole of August to the product called “Lethal Weapon” (which is a standard product in the base install of osCommerce). This functionality is achieved using Kelvin Lucks datepicker project.

if we now look at the product page, the dates of August now are available as an attribute dropdown;

But, that is very ugly and not all nice for the customer to select his chosen date…so, changes needed;

Step 2 was to make the attribute dropdown into a text box, which when clicked will popup the datepicker allowing the buyer to select a date.

If this is clicked, up pops the datepicker;

showing the selectable dates (in green, using .css). If I select the 14th August, then this shows in the input box;

The customer can now add to cart and checkout as normal;

All this was made possible by using jquery and the datepicker module for it – along with a bunch of custom coding (osCommerce code in backend and frontend, javascript, css) to make it all play nicely in osCommerce.

Summary

This change enables the shop owner to easily link dates to products. These dates are selectable and any other dates are non-selectable. Using javascript to control this makes the whole system intuitive.

If you need something similar, contact me via email.

Horizontal Menu in osCommerce

I recently found a new contribution that creates a horizontal menu in osCommerce, it can be found here. I tried an install, and here is how it looks;

Ugly in the extreme, and simply does not work – I didn’t have the time to debug it unfortunately. What is supposed to happen is a mouseover of the top category (eg hardware) shows a list of subcategories underneath. This list actually does show, but as soon as the mouse is moved towards the list (in order to click a subcategory) the list disappears.

Doh. I’m pretty sure I followed installation instructions properly.

So, I spent a bit more time hunting and came across this sexy dropdown menu. With a bit of trickery I managed to get it working in osCommerce;

Which looks much better and appears to work. Tested so far in Internet Explorer 8 and Firefox 3. More tests to complete before I show what/how to do it.

Making an EZ Banner Script…

osCommerce comes with banner functinality already, but it’s not the greatest system out there. Certainly useable though.

I was tasked to come up with a system which would allow the site owner to maintain a hands off system of linking a banner to a product or category or page in osCommerce. The customer did not want anything fancy like counting the number of clicks, graphs etc.

What the customer did want was the ability to fade the pictures in and out, you see this on a number of sites just now – off the top of my head I can’t think of any, but I’m sure everyone reading this knows the effect that I mean.

Anyway, with some lateral thinking I came up a concept which allows the shop owner to upload images into a certain directory. These images have to have certain names. Eg: p-123.gif would link to product id 123. c-3.jpg would link to category id 3, and f-name.gif to go to the given page in the shop (eg, a link to conditions.php) – jpg, gif, png can all be used.

I then came up with some code to extrapolate the necessary information from the filename and link to whatever is neccessary. Kind of hard to explain, but this is the basis of the code;

[php]$to_show .= ‘

  • ‘ . tep_image($img) . ‘
  • ‘;[/php]

    Which outputs something like this in HTML;

    [php]

  • [/php]

    Obviously the more images, the more links, each link going to the correct place. As I am putting each of these links into a list, I can now easily join the jQuery Innerfade script to allow the fading effect.

    How easy to use?

    Well, to add in a new link, the shop owner simply creates an image, names it correctly and uploads it to the images directory. To remove a link is just as easy – simply delete the image. All the code is auto updated! Easy as 123.