Product Configurator Module?

[michaywood]

I'm working on a site and would be cool to have one of those "build your own" sections of the site where you can change product color, accessories, etc...

Here's a few examples:

http://www.ducatiusa.com/bikes/configur ... a/index.do
http://garia.com/configurator/_GOLF_ROADSTER/index.html (like the simplicity of this one and the share options at the end)

Does anyone know of an app/module that would allow this? I'd love to have it where it was easily edited by the customer through their admin portal.

[Rolf]

Does this help?
http://forum.cmsmadesimple.org/viewtopi ... =4&t=67039

[michaywood]

that's a great job! but I'm looking for something for the website visitor to be able to change while on the website. they want a green car, click the green button and the image of the car changes to green, for example.

[calguy1000]

This is really not that hard to do... if you have the images, and are familiar with javascript. I'm going to assume you only need one product, and your going to use formbuilder to send an email or something.

Say for example you have 3 dropdowns for T-Shirts
Size: Small / Large / XL
Color: Red / Green / Blue
Style: Mens / Ladies

A: You need 18 images ... (3 * 3 * 2) = 18 representing every permutation and combination of option.
i.e: Small + Green + Ladies

B: You would use a naming scheme for your images.
i.e: tshirt_SGL.jpg (Small Green Ladies)
tshirt_SRL.jpg (Small Red Ladies)
etc.

C: Setup your dropdowns in formbuilder... for the values for each of the options use the code that will be used to generate the filename. i.e: for size
S=Small
L=Large
X=XL
use similar codes for color and style.

D: Use jQuery to add onchange events to the dropdowns to grab the values from
all of the dropdowns and change an image div. Then bob is your uncle.
$('select').change(function(){
var fname = 'tshirt_';
fname = fname + $('#size').val();
fname = fname + $('#color').val();
fname = fname + $('#type').val();
fname = fname + '.jpg';
$('#img').src('uploads/images/'+fname);
});

Things you need:
1: the appropriate number of images all in one directory with an appropriate naming
scheme. Images should all have the same (or similar) sizes, aspect ratio, and rotation.
2: JQuery enabled in your page template
3: Named formbuilder elements
4: The values of the dropdowns should match the naming scheme you setup in step 1 such that you can 'build' a filename.
5: A bit of jquery/javascript knowledge, and a custom formbuilder template.