How To Display Parent Products Of Child Variable Products Pertaining To Different Colors

[daviddawn]

HI People,

 

My database is set out as follows, products, sizes, colors, and images, I then use an intermediary table product_variants to link unique products together via primary and foreign keys, for example

 

SKU        PRODUCT_ID   COLOR_ID   SIZE_ID   IMAGE_ID

10113     101                     1                    3              1

10123     101                     2                    3              2

 

on selection of the desired color of a product, i issue a query to retrieve all available sizes for that product with the selected color, however how do i initially display a product to the customers with many variables of a product, which image_id value should i use? i dont just want to select a default color like black or white, because then all my products will show in the catalog as all black or white, i have seen many other retailers do this then use javascript for the user to select another available color for that product on the catalog page which then retrieves the image for that respective unique product, im trying to find the best way to do this, any ideas?

 

thanks in advance.

[HartleySan]

I'm a bit unclear on what you're asking, but are you talking about something like the following, where you have one big image and smaller thumbnail images you can click on to make them the big image?

http://www.zappos.com/puma-no-1-logo-tee-athletic-grey-heather-black-marshmallow

[daviddawn]

HI Hartley,

 

No, to put it simply, lets say i have a t-shirt with a lion on it, a t-shirt with a dog on it and another t-shirt with a cat on it, all the t-shirts come in different sizes and colors, but when the customer is browsing the catalog which color do they see? because the intermediary table which helps to retrieve a products details, retrieves the image value from the images table using the image id, but which image id value should these products use ? black? white? red? blue? hope that makes sense.

 

or... do you think it would be best to display the product separately for each available color, then when the user clicks on that item, all they need to select would be the size they require.

 

many thanks

[HartleySan]

I worked as a developer for about eight months for a fairly larger online clothing vendor, and as far as I could tell, they had an entire marketing team that decided which picture/color should be the default for each product.

Of course, below the main image for a product were the color swatches, which you could click on any one of them to switch the color/image displayed.

 

I guess the point is, if you're a small operation and don't have the time/money to invest in such things, just pick whatever you think is best, or always have it be black, etc., or have it be random.

Truth be told, while I'm not in expert in that sort of thing, that seems like the kind of optimization that is probably not worth worrying about during the initial building of your site.

[daviddawn]

yes i thought they were selected arbitrarily, in regards to your previous post, yes i am wanting something like that, pls check out the link below, i am wanting something like this, i assume its a prepared query getting executed via javascript? when you hover over a thumbnail image, it shows the color in the larger image for the customer to view, am i right in thinking thats the way its done?

 

http://www.kettlewellcolours.co.uk/products/long-sleeve-tops

 

many thanks

[HartleySan]

It's pretty simple to do what you want.

 

The first thing to do is load the initial images for each product on the page. This is basic HTML.

Once that's done, then use JS to load all the images that are used when a color swatch is moused over.

All of those extra images can be simply loaded into the DOM and hidden, or "displayed" but hidden out of the bounds of an element with overflow: hidden, etc. Point being, there are any number of ways to hide all the other images, but have them readily available for swapping in and out.

 

Also, when the page loads, you'll want to set up mouseover event handlers for each of the color swatches, and then swap the currently displayed image out with the moused-over image each time a color swatch is hovered over.

Again, there are any number of specific implementations that are possible here, but the general principle is the same.

 

Lastly, if you want to support smartphones and tablets, know that they don't support mouseover events, so you'll have to set up a click event for the swatches on mobile.

 

Hopefully that answers your questions.