Preview custom product options with image overlay

Question

I'm currently working on a store selling on-order products. These products need to be customized by the client. I'd like to preview the custom options chosen by the client by graphically showing them placed on the item.

I'm imagining making a seperate transparent image for each option, making them the same size as the entire preview image size, and then placing them on top of each other.

If my intentions aren't clear, please let me know. I'll create a graphical representation of what I mean.

Are there any known extensions doing this? Paid for or free.

Answer 1

So, if I understand your question correctly, you want to build a layered image display of selectable items?

Thus if I sell hats, the base image is a person's head, and then the user selects a hat, and the hat image is layered on top of the head?

Very interesting concept, and I would very much like to see the the end result :)

How I would do it:

The main product would need to be either a configurable, or a bundle product, with child products attached. This would give you the ability to have the customizable aspects using core magento functionality, so no extra code required.

The main product image would be placed in a container div, so its id/class is known. Lets call it 'image_container'. The child image for the parent product would be positioned absolute within this container.

Each of the child products would have the planned layered image as its image configured as its base image, again pure core functionality.

Now you'd need some custom js code to bind on the change events of the selectable child inputs (be they select/radios etc) This would fire off some ajax to get the path to the image for that child as a result. The resulting ajax call would then insert a new img element into the DOM, as a child for the container image 'image_container', and positioned absolute on top of the parent image. You can easily get the correct x/y coords from the known static parent image.

You could then pop new images in/out as the options are changed.

You could even make the child image draggable so the client can position it somewhere else on the parent (if this is required)

Hope this helps.

Answer 2

There is an extension available for this. Product Configurator by justSelling is the one. It does exactly what you require.

Check the demo here: http://demo.product-configurator.biz/index.php/functions/demo-6.html