Remove all Items from Shopping Cart

In this post, I’m going to show you how to add a new button into the shopping cart page that will allow your customers to remove all items from their shopping cart in just one click…

In standard osCommerce, each product has it’s own individual “remove” link – which is fine and works well. My idea is to remove the whole lot in one go…

It looks like this:

Step 1 – add the new button to the shopping cart page

All we need to do here is add a new button just like the existing “checkout” button in shopping_cart.php – but we make it different by using different parameters;

Explanation of parameters;

text – the text that the button shows, see step 2.
icon – the tiny icon that shows in the button, I’ll cover this in a future post, but you can see the available icons at the bottom of this page.
action – what the button does, see step 3

Step 2 – add the language define to the english language file

Should be completely self explanatory…

Step 3 – making the “action”

This is where we delve a little bit into the “engine” of osCommerce. Open up the file includes/application_top.php and find this line of code;

switch ($HTTP_GET_VARS[‘action’]) {

This is where we can set up the new action called “clear_cart”. Without going into too much depth, the action needs to do the following;

1. Clear the Cart
2. Redirect back to the shopping_cart.php page
3. Stop the script continuing by “breaking” it

To clear the cart, we can use the inbuilt function “remove_all” from the shopping cart class. To use it, we need a line of code like this; $cart->remove_all();

To redirect, we can use the inbuilt redirect function called “tep_redirect” – we just need to tell it where to redirect to.

To stop the script continuing to process, we use the php break command.

So the portion of new code looks like this;

And here it is in action;

Recently Viewed infoBox in 2.3.1

I needed to code up a feature for a client which tracks a visitor “product_info.php” page views to basically show them what they recently viewed. I have to say that although I never thought about it, this is quite handy to have, as I have often been on the point of buying, looked at something else, then forgotten what product I was about to buy.

So, as the client is on 2.3.1 and we all know that there are barely any well written contributions for it, I decided to hack up an older contribution from kymation (Jim Keebaugh) who I know writes code in a very decent way…his contribution is here (5 Nov 2008 download).

The parts I used were the changes in product_info.php and logoff.php, this gives enough information to build an array of product IDs that have been visited. The array of product IDs is stored as part of the browsing session.

I then created a new infoBox to take that array and build up a gallery of recently viewed products. It looks like this;

I particularly made the images quite small in order to fit 4 in a row. The images are also linked to their respective product pages.

If there is nothing in the array (or, in plain english, the person viewing your site has not looked at any products) then this box does not show at all, no point in showing a box that has no contents!

I’m still fine-tuning the system, but overall, it seems to be solid.

Give me your views on it, please. Can it be changed to make it better, more interesting? I did think about changing the code showing the images to make it more like a fade in and out type effect, but then thought “whats the point” – after all this is a navigation history so everything needs to be seen at the same time.

960 Grid Tutorial – Understanding Alpha and Omega classes

Number three in my short series explaining a little bit about how the 960 Grid system works in osCommerce…

Alpha and Omega Classes

The Alpha and Omega class is used to align the first and last “child” divs of a parent div to the outermost margins of the page…what is a child div? Have a look at this code;

Which produces this layout;

The next image shows the same code with a bit of explanation;

If I remove the alpha and omega class, the display reacts badly;

Why is this? It is because the “alpha” and “omega” classes “remove” the gutter left and right (not exactly but it’s the easiest way to explain it). In the image below I have shown this in red to illustrate the area that adding the “alpha” class changes;

Adding the “alpha” class back in;

shifts the yellow div back over to it’s rightful place;

Yet the pink child div is still in the wrong place. This is because we need to add the “omega” class to it. Once done, everything lines up perfectly;

Summary

The “alpha” class is used on the FIRST “child” div. It shifts the div to the left to make it line up with your design.

The “omega” class is used on the LAST “child” div. It shifts the div to the right to make it line up with your design.

You should use “alpha” and “omega” classes when the div’s you use them on are also grid_* divs, and are inside a parent grid_* div.

As always, if anything looks wrong, let me know – I am by no means an expert on 960 grid, and always looking to learn more about it. These tutorials are only made by my trial and error over the past few weeks.

960 Grid Tutorial – Understanding Push and Pull classes

Number two in a mini-series explaining a little bit about how the 960 Grid system works in osCommerce.

Push and Pull Classes

The Push class is used to “push” the DISPLAY of a div, and the Pull class is used to “pull” the DISPLAY of a div. Imagine an anchor at the left hand edge of your page, and then imagine yourself pushing content away from that anchor, or pulling content towards that anchor…

Take this standard code;

Which we know will produce a 2 column layout; 25% menu and 75% content area, like this;

That should be really easy to understand what is going on, right? Now, what if you want those columns to be the other way around? So, you end up with the menu on the left hand side and the content area on the right?

You could do this;

which would be just fine, and does exactly what we require;

But, the downside of this is that the menu is being rendered before the content, which is undesirable for Search Engine Optimisation (SEO), and undesirable for Accessibility (with regards to screen readers etc).

Instead, we can simply PUSH and PULL the display of our menu and content div’s to achieve the effect we need…and it is very simple…I’m reverting to the code back we started with and will instead add an extra PULL class to the menu div;

This has PULLed the menu div 18 blocks towards our “anchor” (the left hand edge of the page);

However, as you can see, it now displays on top of the content, which is undesirable. So what do we have to do?

The obvious answer is to PUSH the content div away from our anchor by 6 blocks;

so the display now shows;

which is exactly how we want it. And we have achieved this nicely in terms of SEO and of Accessibility. The content is being rendered in our underlying code BEFORE the menu, but the menu is displaying first in our output.

Hopefully this intro to PUSH and PULL classes will help you to design your osCommerce site with thought to SEO and to Accessibility.

Please remember that I am far from expert when it comes to 960 Grid, so if anything looks wrong, please let me know!

960 Grid Tutorial – Understanding Prefix and Suffix classes

The first in a mini-series of posts explaining a bit about the 960 Grid system that is now used in osCommerce.

The first step for me, to enable you guys to easily see what I am doing is to install the 960 Gridder extension from Andrée Hansson – this useful gadget shows the gridded overlay on top of a website that uses 960! Here’s a couple of examples;

A lingerie template I made;

And the standard osCommerce layout;

You can see that the “green” lines show the padding, and the white in-between “blocks” show the available grids for template positioning. Hopefully this makes sense to you…

Prefix and Suffix

So, as you will already know if you have started playing, the 960 Grid System is a series of “arcane” css tags to control the layout of your page.

Imagine that you want to have a 10 block grid placed in the header, you might do something like this;

That’s pretty straightforward and produces this;

But what if you wanted that block aligned exactly in the center of the page? You could do this;

Where we are adding two extra divs, each of 7 blocks width to align the original div between them. It outputs this, which works fine;

Instead of that, revert the code back to original, and simply add a prefix and suffix class of 7 each!

and what we end up with is exactly the same effect as before, but with a lot less code;

Summary

The prefix and suffix classes are used to horizontally position your block of content. If you think of a “sliding” effect, you’d be pretty close. The suffix class is used to stop any content overflowing into the “tail end” of the area you are working in.

Another quick example;

Say I wanted that pink block to be positioned 3 blocks in from the left, I’d change my code like this;

which produces this;

So, what happens if you wanted the pink area to start 3 blocks in, then a yellow area next door to it, aligned horizontally. Well, it’s easy! Simply don’t use the suffix class, and make a new omega div to fill out to 24 blocks. Did that make sense;

So, the parent is grid_24, and the children add up to 24; grid_11, grid_10, prefix_3 and it looks like this;

I hope that this first tutorial has helped you understand a bit more about osCommerce and the Grid System. Please note that I am not an expert, so if anything looks wrong, tell me!

Lingerie Template for osCommerce 2.3.1

Made a nice template for Lingerie shops, here’s the overall view;

And some of the more interesting features…

If the cart is empty, the shopping bag is “black”;

And if it’s not empty, it turns “green”;

And if the shopper places his mouse over the green bag, they see a summary of the cart as product images;

Here’s a video that shows this in a bit more detail;

Cool looking search facility;

Mini “welcome” and “new products”;

Rotating images, no extra code or admin settings needed;

Column shows everywhere except the index page;

Summary

I think a nice looking template that would suit any store that needs to be stylish. Style and colours are very easy to change.

Cost

$199, which includes 1 hour of my time for installation/changes. If interested, please email me on oscshops AT gmail DOT com

Another osCommerce Template for 2.3.1

I spent some time over the past couple of days making up a new theme for 2.3.1. I tried to chop up the structure a lot to make it look less osCommercey than a standard osCommerce site.

Here’s the overall view;

And some features in close-up…

New Product boxes

These boxes contain more information than usual, including a short description of the product with NO cut-off words. In most templates, a substr is used to chop off the description at x number of characters. That’s not good enough for me, so I make sure that words are NOT chopped in half.

Rotating Banners

Just drop a file into the “rotating” folder, and it gets auto-linked to the product you choose! No code or admin changes necessary…

Search in Header

A nice looking search facility, designed to be noticed!

Angled Logo

An angled logo, which is a bit different. Easy to swap out for a new .png image!

Side column

The side column has a cool, clean look. I got rid of the “infoBox” look in favour of a solid background.

How much is the template?

This template costs $99, and comes with 30 minutes of my time for installation and/or minor code changes.

How easy to change the look and colour?

Pretty simple. It’s just .css and images. Make new images, change the .css. The possibilities are endless. Don’t like the green? Change it to pink, blue, red, whatever.

Interested?

Email me on oscshops AT gmail DOT com. This template is ready to go, and by this time tomorrow you could have it live on your osCommerce 2.3.1 webshop.

osCommerce 2.3.1 and Coupon Discounts

A Discount Coupon system fully compatible with osCommerce 2.3.1 – yes please!

Admin

Link is in the Customers InfoBox;

You can see the number of uses and the date/time of the last use;

You can easily turn a coupon on and off;

Coupon can be set up in a very easy to follow form;

As you can see, coupons can have lots of different options, including “percent discount” or “cash discount”, “use once per customer”, use multiple per customer”, “use once, one time”. Coupons can also be set to expire at midnight on any day in the future and they can have a minimum spend amount. Coupon can also give “free shipping”.

Coupon Usage can be seen on the order invoice;

Shop Side

Coupon Input box shows in the shopping_cart page (in other words, BEFORE the checkout is initiated);

After a coupon is applied, the discount amount and the new order total are immediately shown;

And the shopping_cart infobox also shows the discounted order total;

The shopper checks out, and progresses through your checkout system, at the end of which, the confirmation page again shows the discount;

Coupon Usage can be seen in the Order History;

How to get this script

This script is a commercial script available fully installed by me at a cost of $100, though the first 3 get it for $50. It is the ONLY coupon script that has been re-written for 2.3.1 and is the ONLY coupon script that (as far as I am aware) allows the coupon to be applied at the Shopping Cart Stage. If you would like this professionally installed with minimum of fuss, email me on oscshops AT gmail DOT com

First ever osCommerce 2.3 template is available

Pleased to say that the very first commercially available 2.3 and 2.3.1 osCommerce template/theme is exclusively available here at Club osCommerce.

‘True Blue’ osCommerce Template

Cool welcome message and shopping cart summary;

Fade In and Out Banner Rotator, drop in images to link to products;

Currency, Language, Bestsellers in the Footer;

Social Bookmarks takes the place of Bestsellers when on a product page;

Cool Twitter feature – easy to link your Twitter account;

Nice looking Search Box in the header;

Great dropdown menu categories;

And here is an overall idea of the template;

Cost

For this template/theme I am charging $199. The price includes 1 hour of my time for colour changes and installation on top of your existing 2.3 or 2.3.1 osCommerce shop.

Interested?

Email me on oscshops@gmail.com to ask any questions.

osCommerce and 960 grid system

So the new osCommerce 2.3 and 2.3.1 have Nathan Smiths 960 grid system as part of the core code.

I’ve looked about the web and come to the conclusion that some users will really like it – it allows a person to layout the page in rows and columns very easily. You want 3 boxes side by side? Just use the correct .css call and there you have it. Done.

Basically, my thought is that the grid system acts very like a tables based layout, though I am obviously aware that it is not tables 😉 And having .css act like this is not how .css should be.

Anyway, in order to get a better handle on the 960/osCommerce I decided to make a real life client project using 2.3.1 as downloaded. The first thing I did was sketch out the design on a piece of paper;

As you can plainly see, it suits the gridded layout. Next up was to install 2.3.1 and start playing with the code and css. I ended up with a completed site that looks like this;

Please note that I blurred a few bits out. Once the client has signed off, I’ll divulge the site URL…

Which, as you can see is very close to my original sketch.

The only significant change is the extra box that contains the “welcome guest” message and the summary of the cart contents. In order to achieve this I stuck as much as I could to the ethos of the 960 system for the layout, but added extra code to make the site look prettier.

Here’s that area of the site in full size;

and here’s some of the code to show you the layout of that area – pay particular attention to the outside div’s (960) and the inside div’s (my own);

My conclusion

960, as i have said all along, is not for me – I don’t like the feeling of being forced to do something “because I have to” just to get something to line up. Alpha, Omega, Push, Pull, Grid, Container – these things mean NOTHING to a designer and not much at all to a Developer.

However, I can see it being very useful for those people who are coming from a “tables based” background (as most people using osCommerce are) – 960 can be considered a halfway house between tables and pure css layout – which isn’t a bad thing, but doesn’t cut the mustard for me personally.

Who the heck made the decision to add 960 to osCommerce, and why? Perhaps one of the osCommerce Team Members reading this could explain the rationale behind it. I am wondering if HPDL saw this being used in the ‘osc2css’ contribution and thought “that’s near enough”…