Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

How did they built this customization feature on this site and which courses must I watch to learn how?

Hello-

I would like to build something similar to this bike customizer, but when I inspect it, it seems to be React or Angular or something, but I'm not sure. I remember watching some pretty fancy things on here and am wondering if there is content somewhere that will teach me how to build this feature?

Thank you.

3 Answers

Steven Parker
Steven Parker
231,269 Points

I don't know what you mean by "that's not how it was built". Perhaps you misunderstood my explanation. I'll go into a bit more detail:

Each view is a composite of several images of parts, all made from the perspective of a specific angle. There are 8 possible views, one for each major and secondary compass direction. The images are kept in separate folders representing each view direction, bike style, and chosen part color. For example, the image for a purple boy's saddle viewed when the bike is facing "south east" direction has this URL: .../parts/view8/boy/purple/saddle.png and looks like this (it's big so you'll need to scroll down a bit for the rest of the text): purple angled saddle Notice how there is a good deal of blank space on the image. While each image is mostly transparent, it takes up the full space of the final composite, with the component already located at the proper position. This simplifies the combining process. And there are quite a few images! The script establishes event handlers for clicks on the controls, and then using the choices made combines the sub-images for each of the component parts to make up the total view.

All this keeps the script relatively simple but a significant effort was required from the graphics person(s) to create the large number of images that the script uses.

Does it make sense now?

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Yeah that makes sense. I was missing:

While each image is mostly transparent, it takes up the full space of the final composite,

That's a ton of .pngs and not as tricky as I thought. Just very time consuming. Thanks for your help!

Steven Parker
Steven Parker
231,269 Points

At first glance, this seems to use a jQuery plugin called "colorbox" but nothing fancier than that. All the various colored parts seem to be individual images so the user is simply choosing which images to display.

Assuming you're already familiar with JavaScript, you might want to take jQuery Basics and Using jQuery Plugins.

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Thanks, the features of the tool that are novel to me are the rotate feature while the hover modifications persist. It's like sprites or something, but it's really tricky.

Steven Parker
Steven Parker
231,269 Points

I think it's still just images from another angle. And they were a bit sloppy, at some angles the frame appears to be inside the spokes.