Category: Makeover

A guest post from Matt over at www.sweetnessandlight.com – purveyor of chocolate and other goodies.

Selecting a bunch of products to create 1 overall product

When you need your customers to be able to choose from a variety of products to create one final product to add to their cart, you will find that the basic osCommerce comes up quite short.

An example of this was on my own shop: I needed customers to be able to choose from a selection of items to create their own chocolate assortment box. The items they are choosing from are other products on the site which had to be turned into attributes. Those attributes also had to be able to be chosen in quantities. The total amount they can choose is is determined by you when you setup the products in your admin.

Two of the neat things with this project are:
1. The attributes can be chosen in quantities (not standard osCommerce which allows you to add only one of any given attribute per product added to cart).
2. The attributes have an image and description so the customer can see and read about what they are choosing.

As the customer is choosing options, the drop down menus count down along with them. If all the dropdowns start at 15 and they choose 2 of an attribute, all the other drop downs on the page repopulate with 13 and so on until 15 attributes have been chosen. This is done through javascript and there is also a counter at the top of the page so the customer can see how many options are left until they are done. It all gets a little confusing so here is a video to demonstrate the feature:

This project was very in depth and changed lots of things in the shopping cart and order classes. It also did a pretty good overhaul of the attributes system. This type of thing could be used in all kinds of different shops and is only limited by your creativity. Almost anything is possible with osCommerce! Thanks Gary for working so closely with me to get all the bugs worked out and helping me bring my thoughts into reality.

Gary says…

The project was very complicated – and as such needed a good base to work from. Between us we managed to get a wireframe working example based on a new osC 2.3.1. Because Matt had made many changes to his 2.3.1, we then needed to somehow fit it into his existing code, which was not easy at all. In the end though, we’ve come up with a system that has already allowed Matt to expand his online sales, and give his customers a really nice feature that no other osCommerce shop has.

There are a couple of Terms and Conditions addons floating about, but I decided that none of them were quite suitable for the needs of my latest client.

What the client wanted is three-fold;

1. Have a link in the checkout_confirmation page, which, when clicked pops up the Terms and Conditions for the buyer to read. This popup to also have a “cancel” button which kicks the user, and a “continue shopping” button which allows the user to remove the close the popup.

2. Have a tickbox in the checkout_confirmation, which, when clicked makes the “continue” button appear. In the popup, if the “continue shopping” button is pressed, this tickbox is automatically ticked.

3. Have the Terms and Conditions popup automatically as soon as the checkout_confirmation.php page is accessed.

So, now we know the needs, it is possible to make it happen. I used the jquery modal dialog box to show the info. This linked to the text to make it appear.

Link and Tickbox (no continue button):

When the Tickbox is ticked (continue button appears):

And if the Link is clicked up pops the information:

Remember also, that this information popup is also open by default each and every time the checkout_confirmation.php page is accessed – meaning the buyer must either choose to “continue” [in other words continue to checkout] or “cancel” [log off].

It’s kind of hard to explain, so here’s a video;

In this blog post I’m going to show how to add a dialog “cart contents” popup to the breadcrumb area of the theme made in the 2.3.1 Design eBook.

First of all, I’ll show you a couple of images…

The “cart summary” link in the right hand side of the breadcrumb;

And the Dialog Box PopUp, which is what shows when the link is clicked;

Step 1: Open up /includes/template_top.php

Add:

Step 2: Open /includes/header.php

A. Reduce the grid_* by two on both the searchbox and the breadcrumb.
B. Remove the omega from the searchbox
C. Add the following block after the searchbox div:

D. Email me for the new “head cart” module (code doesn’t play nicely in this blog for some reason).

As easy as that. A couple of extra style bits in the user stylesheet and the job is completed.

Been a bit quiet here and elsewhere recently, so thought I would make a splash return by writing up a new eBook for oscbooks.com

Designing 2.3.1 – The Complete How To

This eBook takes you on a journey from standard out of the box 2.3.1 to a site which is completely different and very good looking.

You’ll have a primer on the 960 grid system, .css, html, a little bit of PHP. And how it all hangs together in osCommerce…

Not just that, you’ll learn some good tricks of the trade as well as how to make and integrate your own code. I also found a good “slider” powered by jquery, which I show you how to install on your front page.

Here’s the site you’ll make

What you learn while following this tutorial will be invaluable when you come to make your own osCommerce site(s).

Go and have a look at Designing 2.3.1 on oscbooks.com

Had a potential client contact me who had purchased a Template Monster osCommerce template. “oh no”, thought I. The client had some good ideas to try to make the template less like a template and more to their own design.

The majority of changes took place in the header and footer files (including the template_* files) and I soon came to realise that the 2.3.1 templates from Template Monster are coded just as badly as the older 2.2 templates. Absolutely horrible.

All in all, we did some quite cool things, such as HTML5 image swapping menu, nicer cart in header, search box in header, newsletter sign up in footer, better “guest” welcome messages in header, paypal logo in footer, social icons in footer, new breadcrumb layout and other cosmetic changes to better reflect the company ethos.

A very nice project, and I am quite happy to have recoded quite some portion of the TM code, bringing the template from something that many sites could use, to something that only this particular site will have.

I thought it might be interesting for you to “watch” a template build as I do it. So what I will do is screenshot every so often so you can see how it is coming on.

This is a mockup that I am going to attempt to come close to;

After I am finished, I -might- try Julians idea of creating some cheat sheets for the different component parts of the template. I also will be selling the template, of course.

The result

Read on for a bit of info as to how it was done. If you compare it against my sketch that I made this morning, I think it stacks up fairly well!

Let me know what you think about this blog post (and the comments!), and what you think about the template that I created today…