Choose your own selection project

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.

Must Agree to Terms and Conditions

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;

2.3.1 Design eBook Supplement – add some candy

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.

New osCommerce eBook: Designing 2.3.1 the complete how to

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

Template Monster template – project complete

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.

Upcoming Project – Mega Drop Down Menu into osCommerce

Upcoming project is to take the Mega Drop Down Menu of Soh Tanaka and integrate it into osCommerce.

It is very straightforward in basic HTML (I managed to get it working within a couple of minutes) based on the examples given, but because I want the category structure to come direct from the database I needed to create some flavour of osCommerce standardised interface to grab the content from the DB, and output it in the required HTML.

It’s always a problem to work with the category structure of osCommerce – especially if the output is required in a certain format. There are a few “css” based category files floating about, but none of them output the HTML in the way that the Mega Drop Down requires, hence the need for a new way to do it, I’m almost there, but not quite right at the moment.

Anyway, should be an interesting project when it does go ahead – here’s proof of concept…

So, we can see that it will work, what I need to do now is make sure that the category structure is correctly outputted automatically rather than my proof of concept which was done manually.

2.3.1 Template – watch as I build…

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…

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.