Heya Guys,

I am currently working on a project, on which my customer wants to have a customizable object.

Now, what i mean by this is that the customer wants a customizable "shoe" on their site. Whereby visitors can choose the colour of the laces, the lace holes etc etc.

What would you suggest be the best way to go about this?

Obviously different customizations are going to affect the overall cost of the item, therefore whatever method i choose must be able to speak with the database and get the prices.

I have seen things like this done before and most of then seem to use flash. Is this the way you would go as well?

Thanks in advance,

Kindest Regards,

Tribal

Recommended Answers

All 3 Replies

You could try using flash, or layering many images, according to the options.
Make a layered shoe in photoshop, export all the different options to images, then, using pngs or gift, just set javascript to show/hide the absolutely positioned images on eachother.
Keep an attribute in the images on price, so you can calculate the final price using that.
I'd recommend using the jquery and for the options, probably customized checkboxes, or jquery ui, or links...
You can store the information using cookies with json.

Ah right. Fantastic. Thank you.

Do you know if JavaScript is capable of editing the colour of the images? Because my main problem is that there are going to be hundreds of combinations.

Or would you suggest i go straight ahead and use flash?

Use a png image over a colored div square... that way, you can change the div and the png will change.
Even better, consider using https://developer.mozilla.org/en/Canvas_tutorial
You could also use the imagemagic or gdk libraries to generate those images.
You might be able to have a flash creator, who sends info to a php renderer script, that will keep the image throughout the session. (using a db)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.