Discussions

Images as "select-list" of Add-to-cart-form

On a site where we sell lets say ... Mugs :)

There are mugs "with ear" and "without ear".
Mugs without ear in colors : white and black
Mugs wit ear in colors : red and green

So I made one product-type "mugs"
SKU title

M1 Mug without ear black
M2 Mug without ear white
M3 Mug with ear red
M4 Mug with ear green

I want to use an image to represent the color instead of the dropdown-list of the "add-to-chart-form".

What I did so far:

I add an "Image-color"-field to add a thumb of the color to the product-type.
With "term reference" I add a specific color-name to the product-type.

I made a product-display with a term reference to make a taxonomy menu with two items: "mugs with ear", "mugs without ear",

and

a "product reference" field to show one producta time and to be able to change the colorname in the add cart form. (like on the Commerce-Demo-site)

What I want to do is to replace the list in the "add to cart form", by the images representing the color of the mug.

So I go to the mugs "without ears" and I see a white mug, and next to the big image, I see two images of the colors white and black.
When I go to the "mugs with ears" i've got the big image of a Red mug without ear, with next to it the two images Red and Green.

When we click on the colors it's like selecting with the "select-list" of "the add to cart form", but with images.

Maybe I'm going to much in detail but I want to be shure that you know what I'm looking for.

(I tried to create a block in Views with all thumbs related to the product, but I could find the solution.)

latulipeblanche
Posted: Apr 21, 2011

Comments

Scott J on April 24, 2011

If you set this up right, it will automatically do as you desire - it's meant to work that way out-of-the-box.


I add an "Image-color"-field to add a thumb of the color to the product-type.
 - Correct


With "term reference" I add a specific color-name to the product-type.
 - No, you need to add a field of type "list(text)", rather than a term reference.
You would then add another "list(text)" field to choose "with ear" or "without ear". This makes data entry easier, and gives you the option of making it available to customers later if you need to.


I made a product-display with a term reference to make a taxonomy menu with two items: "mugs with ear", "mugs without ear",
 - that sounds OK but is irrelevant to making this work.

If you have added a "product reference" field to your 'product-display' content type, and filled it with SKU values, then you should find that the image updates when you select the color and style.

http://www.drupalcommerce.org/faq/product-attributes

latulipeblanche on May 4, 2011

Tnx for your help but I think it's not realy what I was (am) looking for.

I added three images:

1) lipstick.jpg are the products
2) lipstick-2.jpg product-display with the dropdown menu for the colors
3) lipstick-3.jpg the way I want to present the product with the color-thumbs to choose the color instead of the dropdown menu.

Whould this be possible avec Views ? The color-thumbs linked to the product.

I make a view of the color-images but I don't get it to be linked to the node. When I configure the field I "Link image to: Content" but it both ways the link goes to the store/products/ product page.

In the view I "Output the field as a link to "content/[product_id]" but the result is the same.