Tabbed Information in the Product Info page

Sometimes it is desirable to split blocks of information up, to make it more readable. A good example would be a product that needs “technical specs” – example.

In osCommerce there is only 1 input box for the products description – so we need to think a way to separate the inputted information. I was pointed at this contribution by one of my good clients running on a 2.2 shop – this contribution uses webfxtabpane to show the tabs, based on some custom coding in the products description field.

It ends up looking like this;

The image above is taken from the download. The tabs are ugly in the extreme in my opinion, and the tabpane system is rather outdated I think.

My idea was to juice those tabs up using the jquery UI. A small coding change in product_info.php (as well as the addition of jquery ui backported from 2.3.1 to 2.2) allows the output to look like this;

Much nicer, much cleaner and more useable!

You’ve added XYZ to your cart

For the build I’ve been working on for the last couple of days, a really nice feature is a message that shows when the buyer adds something to their cart. Basically it’s a reinforcement of the action they just took;

Let me know what you think.

The code is based on the last added product ID in the cart item list array. I had to create 1 function to grab the product model to get it working as I wanted.

In the video you might also notice a kinky “Best Sellers” box – I might blog about that tomorrow.

Quick Add To Cart using Product Model

Over the next couple of days, I’ve been tasked to recreate the look/theme of a Magento site, to osCommerce. In addition, I also will port as many of the features as I can (given the complexity of code and time frame).

One of the features on the Magento site is a “quick add to cart” box, where the buyer can insert the product model and quantity – this then reacts with the shopping cart to add the given product…

I don’t know Magento well enough to say if this is a core feature, or a commercial extension. But it looks like this (in my clients Magento cart);

With a bit of thought, I was able to make some -experimental- code to to do the same job, here is how it looks in osCommerce;

Note; I will obviously be re-styling this to look like the Magento example!

And here it is in action;

Note that in the example I inserted the product model “pc-twof” which in a base install of osCommerce is the product called “The Wheel of Time”. If you can read between the lines, this functionality requires every product to have a unique product model.

I guess it is good if you have a shop that has a printed catalog that carries the product models – the good news is that customer won’t have to search or drill down through the category structure to press the buy button.

Let me know what you think of this idea? Can you see any drawbacks or benefits?

Clean and Healthy 2.3.1 Template

Here is another template, ready for purchase…

Overall View

Logo, Currencies and Languages in the Header

Good looking Cart Contents box in the Header

Rounded Infoboxes, Category box includes arrow images

Nice display of Products in the Product Listing pages

Sexy “Payment Images” in the Footer area

“More Info” buttons in the Whats New and Special Infoboxes

And, of course, my own coded solution for Banner Rotation.

Summary

A clean and cool template perfect for any type of shop!

Cost

Normal Price $199. Special Offer from now until the end of January, just $99. Price inclusive of installation. Interested? Email me on oscshops AT gmail DOT com

Technical Notes

This is an osCommerce 2.3.1 template, it will not work in any earlier versions of osCommerce. It is a TRUE template, not a full download of osCommerce like most template vendors sell.

Column backgrounds in css

So, now that 2.3.1 uses the 960 grid system, we no longer have “trusty” tables to give full depth column styles. Instead we need to create the illusion of columns by using a technique known as “faux columns”. It’s very easy.

We know that a typical 2.3.1 osCommerce site is 960 pixels wide, so the first thing to do is create a blank image of that width, and approximately 100 pixels deep. I did this in photoshop, but you can use whichever graphics application you are comfortable with.

We now need to ascertain the width of the left and right column. To do this, we simply need to open up /includes/classes/osc_template.php and find the line of code that begins;

[php]var $_grid_column_width =[/php]

The number is how many columns (aka grids) the column is in width. In my example that I am using, the line of code reads;

[php]var $_grid_column_width = 6;[/php]

We further can work out that 1 grid is worth 40 pixels. How; 960 divided by 24 is 40. So, 6 grids is 240 pixels.

Go back to that blank canvas that you created, and make the right hand portion of it a solid colour that is 240 pixels wide. Do similar for the left hand portion 240 pixels wide – remember that if your “grid_column_width” is 4, then you would make these portions 4 by 40 wide (160 pixels)…

I further “prettied” mine by adding a thin vertical black strip…

Save the image you created as bg.gif into the /images/ directory of your website.

Now open up stylesheet.css and find this;

[php]#bodyWrapper {
}[/php]

Change it to this;

[php]#bodyWrapper {
background: url(images/bg.gif) repeat-y;
}[/php]

If you don’t understand that, please read a primer on css.

Save the stylesheet and view your site. It should look somewhat like this;

Which you can plainly see has the column showing the purple background. If you scroll down the page, you will further see that the purple extends all the way to the bottom of the page, even though the column actually ends halfway up the page – hence why this technique is known as “faux column”. Faux means false, in french.

If your faux columns don’t show, then there is one more thing that you need to do. And that is to “clear” the divs. So open up /includes/template_bottom.php and change it like this;

That’s it! An introduction to how to create columns in a div based css layout. It’s not the only way, but it is certainly a very easy way.

You may have noticed that the columns also show in the header area, which is probably not desirable. In the future I’ll write a complementary blog post to show how to change that to something a little better looking.

Easy as 123, or clear as mud ? You decide.

Need YOUR help, give me 1 minute of your time!

A plea to all my readers, please take a minute to go to the osCommerce Hot 100…choose 5 stores that you like the look of and give them a good vote. And/or choose 5 stores you hate, vote them down.

Trying to get as many votes on this as possible in the next few days so that I can remove some of the more disliked layouts.

Thanks!

If we can have the cream rise to the top, then we can ALL gain inspiration from some of the most beautiful osCommerce shops out there right now.

Images, breadcrumb, osCommerce

My friend Paul recently asked about how to have images in the usual osCommerce breadcrumb…I answered it as a comment to a very old post in this blog, but thought it deserved it’s own post. So…

Step 1. Make yourself a “home” graphic and an “arrow” graphic, save them into the usual osCommerce images directory. I called mine “home.gif” and “arrow.gif”.

Step 2. Open up /includes/header.php and find this:

[php]$breadcrumb->trail(‘ » ‘);[/php]

Change it to this:

[php]$breadcrumb->trail(tep_image(DIR_WS_IMAGES . ‘arrow.gif’, ”, ”, ”, ‘align=”absmiddle”‘));[/php]

This is telling osCommerce to use the arrow image. The parameter align=”absmiddle” is not great, but does OK for this demonstration. Better would be to add a class and then vertical align the class (I’ll cover that another time). align=”absmiddle” lines up the image with the text.

Save the changes and upload the file.

Step 3. Open up /includes/application_top.php and find this:

[php]$breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);[/php]

Change it to this:

[php]$breadcrumb->add(tep_image(DIR_WS_IMAGES . ‘home.gif’, ”, ”, ”, ‘align=”absmiddle”‘) , HTTP_SERVER);[/php]

Save the changes and upload the file.

Refresh your osCommerce, and you’ll get a breadcrumb that looks something like this;

Mine is ugly in the extreme, but if you take your time in creating nice images, and then play with the stylesheet, you can come up with all sorts of great idea. Here is what Paul made;

Which I think looks great!

What can you come up with for the breadcrumb in your osCommerce site? More ideas.

Fancybox AND image swapping in osCommerce

One of my very good clients came to me with an example website where the website had 3 or 4 different product images. These product images could be mouseovered to change a slightly larger image, and they could be clicked on to popup a much larger image.

Well, I’d done both these things before, but never at the same time. I was fairly sure that it should be relatively straightforward in theory…but as with anything osCommerce, theory and practice are usually like cat and dog, or chalk and cheese.

So, I set out to make it a reality, and here is what I came up with;

In the video, you can see that I have 4 product images (1,2,3,4 for ease of videoing!). The first is also shown as a larger image. If you mouseovered the smaller image, the slightly larger one changes – I thought this was pretty cool to get a quick overview of the product (imagine a front, back, side view)…

But also, if the user clicks the smaller images, the jquery fancybox kicks in and brings a web2 styled popup. All in all, it seems to work well. A little bit of work to get it all to play nicely, but worth taking the time to do, I think.

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.

    Flower Shop – No sundays, but Mothers Day!

    One of my clients runs the “delivery date” script that I integrated into osCommerce a while ago. I recoded it substantially for this particular client to allow Saturdays but not Sundays, and also to allow same day delivery if the order is placed before 11am (UK time).

    One of the main flower selling times is the period before Mothers Day. So, for this one particular sunday, deliveries are needed!

    Because the datepicker is already set up and substantially recoded, it was going to prove difficult to amend the codebase to allow this Sunday whilst also keeping the other rules (before 11am, no sundays and so on) that the client needed.

    So, as an alternative I came up with the idea of having the usual datepicker, and a separate link to click on for Mothers Day delivery.

    So, it looks like this:

    The datepicker functions as it normally should do, and the link, when clicked inserts the date of Mothers Day. And then the rest of the system functions as normal. Sweet!

    If there are any other osCommerce Flower Shops who want a delivery date/time integrated, please feel free to email me on oscshops@gmail.com