Home » Forums » Ubercart » Ideas and Suggestions

Product Preview Brainstorming

Submitted by gash on Sun, 04/20/2008 - 20:52
gash
Posts: 69
 Joined: 04/14/2008

As a fairly new e-commerce developer, I wanted to ask about a fairly common site requirement -- product previews. I've received inquiries about building a product preview dialog that allows customers to "build" a product. The specific items in question are ladies' handbags. The store owner has a fised number of patterns, but literally hundreds of fabric choices (~260 at last count). The desire is for a dialog that will allow users to select their fabrics of choice and see a real-time depiction of how their handbag might look.

Easily solved using a javascript mouseovers, but that would require hundreds of photos (each handbag uses two fabrics and in some cases three fabrics, so the number of possible permutations would prevent either her sewing up samples or the taking of a vast library of images). I suppose flash can do it without the large image requirements? But I was thinking about being a bit more sneaky -- how about a div with a background image set to the fabric of interest. Overlaid on top of said div is a png with the appropriate regions of the handbag transparent, allowing the fabric pattern to show through. Might be really tricky to implement for adjacent regions of the handbag, I suppose. And utterly unusable in IE 5.5 and 6, so not really all that practical an approach, I suppose, even with pngfix.

Any suggestions on how to approach this issue?
permalink #1 Mon, 04/21/2008 - 04:32
Abilnet

Posts: 118
 Joined: 12/28/2007
Uber DonorBug Finder

Good call, I'm also more than willing to find a "preview" solution to product(s). One nice example done with Drupal / Ubercart I like a lot is HERE...just wondering how it is done?!

permalink #2 Mon, 04/21/2008 - 10:34
TR
Posts: 685
 Joined: 11/05/2007
Bug FinderFAQ ModeratorGetting busy with the Ubercode.

Abilnet wrote:
Good call, I'm also more than willing to find a "preview" solution to product(s). One nice example done with Drupal / Ubercart I like a lot is HERE...just wondering how it is done?!

The frames site does a POST back to the server when the Preview button is pressed. It sends the attributes back and presumably the server builds a composite picture based on the attributes. (This can be done with the PHP image functions, http://us2.php.net/manual/en/ref.image.php, or you can use some other toolkit.) Simple enough to do in the case of the frames, since each attribute affects a different region of the picture.

That's one way to go about it. You could also use AJAX. Either would work for the case of handbags. I think it would be better to do this on the server rather than sending the client all the images for all possible combinations. Plus you'd avoid the problem of dealing with browsers that don't handle images properly. I don't know how you would design a feature like this for general use, but for your specific needs this should work fine.

--

<tr>.

permalink #3 Mon, 04/21/2008 - 18:47
gash
Posts: 69
 Joined: 04/14/2008

I agree with using ajax to negotiate the image changes. The butt of the problem lies with the number of product fabric combinations. I don't think this particular client would be willing to sew all of the different possible combinations, so having images of those combinations isn't possible. I'll look into some of the php image functions and see what I can come up with.

Thanks for the input.

permalink #4 Mon, 04/21/2008 - 18:56
TR
Posts: 685
 Joined: 11/05/2007
Bug FinderFAQ ModeratorGetting busy with the Ubercode.

I didn't make it clear, but I think your idea of using an image mask for the bag which would overlay the image of the fabric was a good one, and will give you all the permutations from just 1 image per fabric + 1 image per bag. Just do it on the server side instead of showing/hiding divs on the client side.

--

<tr>.

permalink #5 Mon, 04/21/2008 - 19:34
gash
Posts: 69
 Joined: 04/14/2008

hmm . . . I suppose I had pretty much given up on the image masks as a possibility due to png transparency problems in IE. I suppose GIFs would work fine, although I'd rather use a more open image format if possible.

permalink #6 Mon, 04/21/2008 - 21:36
TR
Posts: 685
 Joined: 11/05/2007
Bug FinderFAQ ModeratorGetting busy with the Ubercode.

You're missing my point ... do the compositing ON THE SERVER, on the fly, so the only thing you're sending to the browser is a single non-transparent PNG (or GIF or JPEG); you don't have to deal with browser differences that way. It's fast, simple and effective.

--

<tr>.

permalink #7 Tue, 04/22/2008 - 01:55
gash
Posts: 69
 Joined: 04/14/2008

No, I'm picking up what you're putting down. I'm simply stating that I had given up on using my image mask idea because of the implications and limitations of client-side image rendering. I hadn't thought of doing the compositing server side, via ajax requests to a php implementation using GD (your suggestion). I think that's a wonderful idea, and I appreciate the input.

permalink #8 Tue, 04/22/2008 - 06:11
Abilnet

Posts: 118
 Joined: 12/28/2007
Uber DonorBug Finder

Interesting talking guys, subscribing. I personally see this preview feature an important one, specially from the business and usability point of view.

Well... I'm not a programmer, but generally, what do you think would be the correct path to plan an Ubercart module for this "Product Preview" -thing... or is it possible at all to have a module with preview features? (or is there any project started or work already done for this?)

permalink #9 Mon, 04/28/2008 - 15:05
gash
Posts: 69
 Joined: 04/14/2008

Thanks for all the input. I've been playing around with image compositing for the last few days, primarily getting comfortable with PHP image libraries. I definitely think this is the way to go -- JQuery's simplified AJAX calls coupled to a php script that composites the images. Just to play around with the idea a bit, I put together a "sample product" image composite script that pulls a random image from the product database, combines it a "frame", gives it a bit of a tilt, and displays it on the greeting page of a customer's storefront. Each time you visit the front page, you're greeted with a new pic. All in all a successful experiment -- thanks for the idea, TR.

I'll start working on the handbag product visualization stuff in the near future, as soon as I stomp all the other fires that need stomping Smiling

permalink #10 Sun, 05/04/2008 - 19:09
fourcws

Posts: 63
 Joined: 04/16/2008
Cool profile pic award.

Impressive! - Am interested in how you did the "We Honor..." Block.

thanks,