Guess who it is. To a web designer slash web developer the most dangerous animal is a graphic designer who doesn’t build web sites. Who has no idea of how web sites work.Who has never written a line of CSS or XHTML (or HTML for that matter). But they’re the one telling you how the site should look. They make a pretty picture in fireworks or indesign with out a care in the world about how web sites actually work and you’re left holding the bag. It’s up to you to deliver the site looking the way the graphic designer wants it, which is usually not that much of a challenge, until it is. I’m sure we’ve all run up against the moment the picture and reality don’t quite match up. For these moments we have position:absolute or Jquery to try to get it to happen.
Case in point: A shopping cart that is also a Slide show.
Well, we’ve seen a slide show requested on a product details page.
We’ve seen a Featured Products Scroller (but here no creation of a featured product category could solve the issue since we had to put each the product in a slide show regardless of category).
We’ve seen a slide show requested on the landing/hub/splash page.
But a shopping cart that is also a slideshow? We’d never been asked for such madness. Never in our protected, sheltered lives. We grasped the concept but we quaked in fear just the same. We’d put add to cart buttons in funny places before so we knew it wasn’t entirely impossible though we did have to have a little cry in the bathroom once.
We have more gray hair and our eyes are smaller, redder and more beady than ever but we did it.
Most catalog (multiple products on one page) page templates have HTML and if we have HTML to mess with we can hook our Jquery into it by turning the main div into the container for the slide show and then hiding all the other looped products until the clicking action of the slideshow brought them in to view. Our tools were the wp-e-commerce plugin and our years of hacking the product page templates to pieces.
So here was the wireframe: A container with a large image up top with a strip of thumbnails under it. The large image being the first product in the slideshow. Click one of the thumbnails underneath and you bring up the next product in the catalog. On the side, to the left of the large image there was the product details(sizes,colors,etc) and the add to cart button. We still have the challenge of producing next and previous arrows but we are very close. We are beginning to see the end of this project in sight!