I am sure that anyone else trying to use WP e-commerce would join me in lamenting the lack and quality of the documentation for the plugin. That being said, I’m still loving the plugin for its relative ease of set-up and easy integration with the powerful content management features of WordPress.

The basic plugin contains almost everything you need for a basic store, but for just $40 extra you get the Gold Cart plugin with a few extras. In my case I was hunting down the ability to have multiple images associated with each product in my store. Additionally I am more than happy (and I think my client will be as well) to send a small amount of money in the direction of the developers.

Within a few minutes I had the upgrade installed and had uploaded my first set of multiple images to some products. Easy! But then trying to get them displayed within my product listings was not so obvious.

The plugin natively includes the ability to display the first product image and a function (apparently – as it didn’t work for me) to display any further images in a gallery with a lightbox script. However I didn’t want to use a Lightbox, or give up too much of the code generation for my pages to the plugin.

After a few minutes of Googling for a solution, I decided it was going to be a lot quicker to just write my own PHP function to query the database for all the images. Voila:


function get_all_images($product) {
global $wpdb;
return $wpdb->get_results( "SELECT image FROM wp_wpsc_product_images WHERE product_id=$product ORDER BY image_order ASC" );
}


Just pass this function the Product ID that you are interested in and it will return an object with all the images for you to play around with in PHP. It should be noted that it only returns the filename and extension, so you will have to prepend the path to the file.

One of my projects at the moment is an online shop for a new start-up social enterprise to run inside Shopify. So it seemed like the perfect opportunity to try build a beautifully degrading HTML5 design. Upon making that decision I realised there is a bit of a jump from passively reading about new features in the HTML5 spec to actually working out how to implement them.

Getting to grips with the concepts

At the moment it seems as though every other blog posts community out of the web community is about HTML5. However to help with actually implementing HTML5 I was looking for something a lot more holistic and cohesive, something that I could jump back to every other minute for advice and guidance.
HTML5 isn’t set in stone yet and understanding the processes that will shape it in the future is crucial to building a site that will still function once things settle down.
I found the brilliant site DiveIntoHTML5.org by Mark Pilgrim. The first few chapters (don’t be too daunted by the lengthy sound of that) could possibly be skipped, but give you a whistle-stop tour of how HTML5 came about, stretching backing to the dinosaur years of the early 90′s through the inner working of the W3C up unto the present day. This might all seem superfluous, but you have to remember HTML5 isn’t set in stone yet and understanding the processes that will shape it in the future is crucial to building a site that will still function once things settle down.

I haven’t made it through the full book yet, but found the description of new features, how to use them and links to the spec pages extremely helpful. Obviously we all think we are masters of Google, able to track down any information at a moments notice. But having someone to pull all this information together (and make it freely available) is a massive productivity booster.

I ♥ document hierarchies

A few CSS3 features had already popped up in some recent projects, mainly through a liberal sprinkling of rounded corners through the border-radius feature. However this was the first time that I had used HTML5′s new more semantic markup such as header, article, section, nav and aside.

Actually implementing these alternate tags proved a lot harder that I anticipated. Not due to any technical problems, but for example the distinction between a section and an aside can be a tough call. And there aren’t millions of sites out there yet to turn to for inspiration and examples (well this is the internet, there probably are millions, but you get what I mean). Fortunately the official spec provided examples of content for each, but in the end you just have to make a call and check back in a few months to see what other people are doing.

For me the saving tool was a little Chrome extension called HTML5 Outline to generate HTML hierarchies for the page, so that all your tag decision could be assessed in context. For anyone dynamically generating content and plugging widgets into multiple location, the new titling and hierarchy generation in HTML5 is a god-send.

And for those troublesome browsers

The community seems pretty strongly behind Modernizr at the moment to implement HTML5 and CSS3 features. A decision I have no qualms with.

Just link to the Modernizr JS script and you are away, with most of the new markup working in older browsers. However the real powerhouse of Modernizr comes from it’s feature support detection, which allow you to build fallbacks for browsers that don’t support the latest features.

I haven’t been getting too fancy, sticking with some additional CSS3 styling such as drop-shadows, multiple-backgrounds, gradients, rotation, transforms and rounded corners for now. Modernizr allowed me to go through systematically and think about how I wanted each element to look when the fancy features wouldn’t work.

To be honest most of these problems could be resolved with Progressive Internet Explorer (PIE), a script that you link to in your stylesheets to give IE a helping hand with gradients, corners and box-shadows. But Modernizr was crucial when the browser didn’t support multiple background and I didn’t want to leave it up to the browser to decide which was more important.

(Yes I know I’m getting into CSS3 here and not HTML5, but let’s forgive the little segway)

Wading further in

Was it mission critical to role out HTML5 markup and CSS3 features into the site? No. At the same time it proved far more than just a novelty.

The more semantic markup made me think harder about the rest of my code: how I organised my CSS classes and IDs, the document structure, how features will degrade in older browsers. And by the time the business I am working for goes live and gets established these HTML5 features will be more mainstream and my client should be ahead of the curve.

After 12 months living in Sydney and with just 7 days until I get on a plane back to the UK; it’s clear out time. Now as much as I would like a Kindle I am sadly still in the analogue age of paper books, of which I accumulate 2 to 3 of a month. Therefore this morning’s mission was to get them down to Newtown and donate them to Vinnies.

As I wandered home I started to wonder what will happen to the books. I will never get to find out how quickly they sell and how much the charity will make from my donation. Or even more interestingly what that money will go towards. If only I could get a warm fuzzy feeling from tracking my donations online and seeing how I’ve made life better for someone else.

Obviously my mind then started running through all the different ways this could work from cataloguing at the point of donation, through stock control and sales, how the donator could track online… However the real question is what the “business” case would be for the charity?

Will it make more money?

They key take-away I got from Mary Portas‘ Queen of Charity Shops series on the BBC was that the charity shop is there to raise money, to achieve its mission. So tracking my donations might give me a warm fuzzy feeling, but does it make the charity any more money? I think it would.
So tracking my donations might give me a warm fuzzy feeling, but does it make the charity any more money? I think it would.
Mary also showed that the key to making money was donations. She overhauled the store itself, but also had to overhaul the donations. With high quality donations, that could fetch higher prices they could generate more revenue for the charity.

Bringing me back for more

Firstly if I can see the positive effect of my donation and get that warm fuzzy feeling, then I’m more likely to donate again and probably more regularly.

Beating my score

Secondly, when I go to donate again I will have seen what items make more money for the charity and probably try to beat my “score” from last time. Maybe I could even use the system to see how much certain items typically fetch and work out the value of my donations before I leave the house.

On a recent podcast the guys from Boagworld were chatting about how bringing game elements into applications can make it more enjoyable, but also help bring users back. Where on FourSquare you can earn a “Crunked” badge for checking in at 4 places in one night, you could instead earn badges for funding a hot meal, a goat or an education.

Widening the circle

Then there is the effect on my friends: I could publish my donation tally on Facebook and Twitter, let all my friends know what a good samaritan I am. Research shows that if your neighbours are trying to lead a greener life, it is likely to rub off on you in an attempt to keep up – so I figure the same should apply to my donating behaviour.

Maybe not for everyone

This might not be right for every charity shop. The necessary stock control system to support this might be too burdensome for some operations. But for anyone trying to build a lasting relationship with their donators to drive up the value of donations, I believe it would be a very powerful move.