Attributes (colors e.g.) as images in product display ?

What could be great is if when you define the node reference field between the product and product display, you specify two options

1. the field from the product display to use as the "name" for the option: title, sku, any other text field, image fields
2. depending on the first selection textfield/image field you would choose the widget to display. for text fields it would be radio/select/checkbox and for images, some sort of js enhanced version of a radiobox/checkbox where you would hide the actual form items and just highlight the image. In addition if you could choose and Image Style preset for the widget it would be awesome.

I would be happy to put together a UI design for this if any developer feels up to working on this.

Idan

@latulipeblanche, you're trying to implement precisely what I'm looking for :)
Using hook_form_alter() looks like a dirty way to me. I think arbel's proposal is more elegant.

@arbel, As I understand, your suggestion involves modifying the product_reference module to add settings to product_reference field. Could you please elaborate on your ideas a bit more?

Here's what I think would work best, first lets define the different UI widgets

These are the standard html widgets

1. Dropdown selection (currently available)
2. Radio buttons
3. Check boxes
4. Multiple select list

The item being select here is the "Product Title". using a product reference on the product display content type.

What I would suggest is to expand upon these options in two ways:

1. Allow the administrator to select the field or multiple field on the PRODUCT that will be used in the product reference field instead of the product node title. for example "product_main_image" or any other field.
Obviously when you an image as the, lets call it representative of the product you can't use a drop down or a multiple select since they accept only text. so you would render them using radio buttons or check boxes in the case of multiple options.

2. since having an image with a checkbox next to it is pretty ugly, I would suggest using some jquery to replace the checkbox and radio functionality by simply adding/removing a class from the a div wrapping the image, which can be styled to represent a selected image. the form should still act the same as it does in the backend, meaning that when you click on an image, jquery would add a class and set the hidden checkbox as checked.

what do you think?

Idan

I found quite a radical workaround. Rather than create a product display with multiple product references and relying on commerce automagical functionality for grouping products, you can make the opposite.

Add a reference field to the product pointing to the product display. And use views with views_slideshow module. The latter one supports using arbitrary fields in the pager. The resulting view can be attached to the product display using eva module.

Just adding here that with the change in Commerce to allow radio buttons as attribute selection widgets, it appears the jQuery UI approach demonstrated in #1199222: JQuery UI 'Button' classes removed with AJAX on add to cart form. would work just fine. You just need to figure out where your images should come from. One solution we're using at Commerce Guys is to use a taxonomy term reference field as the attribute field and to add an image field to the taxonomy terms that we're using. Then it's a quick query to be able to find the appropriate image to use for each option.

There really isn't anything for Commerce to support in core here, though, and it appears there's already a contrib linked above to make this more generic. I'm going to update the status to indicate such, and I'd recommend closing this issue out of this queue as soon as possible.

Why not use taxonomy terms instead of allowed values? That would allow for images being attached to the terms. Then you can use views to display the available terms on the product display node. Combine that with jquery to make it so that a clicked term changes the product selection form.

@AdamGerthel, can you please elaborate a bit more? Where do you propose to add the taxonomy term field? How are you going to make the Drupal Commerce machinery take it into account?

First of all: create a vocabulary containing all terms, and attach images to each term. Create a term reference field on your product type that references the new terms. Then create a view with a contextual filter. Place the view, as a block for example, on your product view node (I wont go into details on views because it takes some time to set up). The view should list the terms available for that product view (i.e. all terms available from the products). Since it's listed from views, you can output your taxonomy fields however you like - so you could output your images. Then you use jquery to tell the browser to change the option in the select list, if someone clicks on an images. Then you can hide your original select list using css.

In our case, we did all of the above, but with an imagefield on the product type. It's simpler, but it should work with taxonomy as well.

Our jquery looks like this:

    // Connect product thumbnails to the "Add to cart" form.
    $('.thumbnail-switcher:not(.cart-processed)').click(function() {
      // Change the value of the select list, and trigger the change event.
      $('.field-name-field-product-article form select').val($(this).attr('rel')).change();
    }).addClass('cart-processed');

FYI we printed the product 'id' in the rel tag, which is why the above snippet works. When using taxonomy terms you would need to use the term ID instead, because that's the value of the options in the select list if you use terms.

Nice idea. Although, it's not entirely clear to me, why do you need the taxonomy field in the first place. Why not just put all the required fields in product entity and output it with view attached to product display?

The taxonomy terms aren't necessary, but are useful if you want to attach images to the terms. They can then be reused on other products or product types.

But if you just want to use images (from imagefield on each of the products) then you only print the images, and not use terms.

So what exactly is the solution for not using taxonomy but using the product option?

I'm just looking around this kind of functionality.

I saw a site from drupalcommerce.org's showcase http://www.drupalcommerce.org/showcase
is implemented image as attribute selection.
http://makeupcosmeticsdiscount1euro.eu/content/volume-mascara-3x1

I'm not sure how it work behind the scene.

I tried your method on #11. It working fine under views configure page. I could put a nid and only referenced terms should show.

Then I put this block visible only on product display content type.

All terms just shown up.

http://i.min.us/iZc0NutAEY7KI.png

Oh wow! This is exactly what I am looking for.

http://makeupcosmeticsdiscount1euro.eu/content/volume-mascara-3x1

Looks like they just used CSS to suppress the radio buttons and labels. Then but a background image for each radio input. The question is...how did they place a background image for each radio? What hook was used? Any help is appreciated.

It looks rather poorly made on the cosmetics website, but that can easily be achieved using for example jQuery Uniform (http://uniformjs.com/) which can replace a checkbox with an image. Not using JS for it is also an option, but won't work well in most IE browsers.

AdamGerthel - how is that solution poor? I agree the front end of the site could be a little tidier but isn't this the correct solution? Altering the form with form alter?

Can you elaborate more on your jQuery example? For my solution I have hundreds of unique display nodes each including about 20 products each with it's own image representing that products color attribute. So that is in the thousands of actual products.

On the display node I am going to group all the colors like on the below link but my display nodes will have between 5-30 color options each: How would one achieve it to be dynamic to show the products image as each color option.
http://makeupcosmeticsdiscount1euro.eu/content/volume-mascara-3x1

Here is an example of where I am at.
http://staging.tristatetile.com/liuli-glass-panel-collection

@latulipeblanche, do u mean the color attribute field defined in product display node instead of product type ?

@latulipeblanche

To be more clear, is the setup like this ?

product type
- product name (title)
- product desc (body)
- product image field
- product color image field (term reference with a color image field)

product display
- product display name (title)
- product desc (body)
- product reference

@latulipeblanche

Thank you for your detail blog post.

I'm also thinking of how to implement multi-language content in drupal commerce.
Is the node translation (title, description)done on product display node ?

Is Product type should be language neutral ？

@latulipeblanche and @jusdavi

I apologize. I took a quick look and was a bit hasty in my judgement. Your solution looks solid. However, the front-end looked unfinished and I jumped the gun. To be a bit more elaborate: You could do some css work to make it work and feel smoother. The throbber is the standard drupal throbber which doesn't fit well into the site feeling, and also is meant to be used on light backgrounds. The text that is displayed (please wait..) is compressed and could be placed better. When you click the one to the right (on this particular page: (http://makeupcosmeticsdiscount1euro.eu/content/volume-mascara-3x1) a small box appears to the right of the image. See attached screenshot.

Anyway, our final approach & result can be seen here: http://www.olssongerthel.se/produkt/alice-soffbord

subscribe

Where to get Commerce Cart Options, git link in sandbox is broken. http://git.drupal.org/sandbox/ryan.armstrong/1146154.git

Try this link: http://drupal.org/sandbox/ryan.armstrong/1146154

This looks almost exactly what I am looking for except for one problem (correct me if I am wrong):

This basically STILL requires that a product is created for each color...correct?

Yes, that's a hard requirement of Commerce (for your own good). Unless you're selling customizable products where the color doesn't affect the underlying number of the part in inventory, you must do this. If it really is just a customization of a single product, you can accomplish the same through a field on the product line item type instead of the product type itself.

Sandbox project here : http://drupal.org/sandbox/liupascal/1357524

It works with taxonomy fields, and allows you to select an image from your taxonomy vocabulary to replace the taxonomy term.
Much cleaner than using images in the product IMO and the module is pretty simple.

Sorry forgot to change the status - not totally sure if it fits your requirement, but it fits mine :-)

I'll promote to full project if the feedbacks are good - if not i'll keep it as a sandbox and let somebody else come up with a better solution.

edit: don't hesitate to suggest other module name... not sure if the current one is explicit enough

Awesome! Your module work perfectly and is exactly what I was looking for.
+1 for it to become a full project.

Hi!
Thanks for working on this, just what I need.
But I can't seem to get it to work...

Followed the instructions and created a taxonomy called color with one term, blue with an imagefield containing a blue image.

Tried adding the term reference field to the product content type as described in the instructions but that didn't seem quite right - it should be in the product display right?

After adding the term reference field to the product display I was able to configure it per the instructions but nothing changes on the product display and I get the following error messages on the original attribute color field...

Any help would be greatly appreciated!

/Ludvig

Notice: Undefined offset: 0 in commerce_taxonomy_field_product_attribute_form_field_ui_field_edit_form_alter() (line 19 of /sites/all/modules/commerce_taxonomy_field_product_attribute/commerce_taxonomy_field_product_attribute.module).
Notice: Undefined index: field_name in _commerce_taxonomy_field_product_attribute_taxonomy_field_options() (line 50 of /sites/all/modules/commerce_taxonomy_field_product_attribute/commerce_taxonomy_field_product_attribute.module).
Notice: Undefined index: label in _commerce_taxonomy_field_product_attribute_taxonomy_field_options() (line 50 of /sites/all/modules/commerce_taxonomy_field_product_attribute/commerce_taxonomy_field_product_attribute.module).
Notice: Undefined index: field_name in _commerce_taxonomy_field_product_attribute_taxonomy_field_options() (line 50 of /sites/all/modules/commerce_taxonomy_field_product_attribute/commerce_taxonomy_field_product_attribute.module).
Notice: Undefined index: field_name in _commerce_taxonomy_field_product_attribute_taxonomy_field_options() (line 50 of /sites/all/modules/commerce_taxonomy_field_product_attribute/commerce_taxonomy_field_product_attribute.module).
Notice: Undefined index: label in _commerce_taxonomy_field_product_attribute_taxonomy_field_options() (line 50 of /sites/all/modules/commerce_taxonomy_field_product_attribute/commerce_taxonomy_field_product_attribute.module).
Notice: Undefined index: field_name in _commerce_taxonomy_field_product_attribute_taxonomy_field_options() (line 50 of /sites/all/modules/commerce_taxonomy_field_product_attribute/commerce_taxonomy_field_product_attribute.module).

@ludde_t:
The taxonomy reference field should be attached to the product *entity* not the product display.

Please post issues directly in the module's issue queue rather than this topic.

OK! Thanks!
That does not solve the problem though, get the same errors as in my last post after adding the field to the product *entity*.
Started an issue here if anyone have any tips,
http://drupal.org/node/1360756

@liupascal Thanks for this - it worked just fine for me.

@liupascal - thanks for the module. Got it installed and working fine. Time to figure out the styling and stuff now.

@AdamGerthel - any chance on some info on how you've achieved yours? It looks great. How have you removed the radio buttons and are just using images for example?

Any help on this greatly appreciated.

This topic is on the same lines of what I want to do, and I imagine others might want to do. But not quite the same.

I have radio buttons as term reference fields on a line item. The term reference field is then used as an "add to cart" function.

I spent the better part of the day forum searching for ways to alter the taxonomy terms so they display the images associated to those terms, but have come up very empty handed. It would have been quicker (and more adorable) to assign like so:

$form[$line_item_fields']['field_name']['und']['#options']['tid'] = <img src="http://www.placekitten.com/150/150" />

But this would mean that if I need to update the images, I have to go back and code, not very friendly for the person taking over.

Is there a way to use the image field associated with the taxonomy term as a product attribute where the product image doesn't change?

Hi Tim,

may be this thread can help you: http://drupal.org/node/1068286
greetings, Martijn

Martijn,

Thanks for the quick reply. I tried to implement the "Taxonomy Icon" module, but was unsuccessful in adding the the images to the list.

I'll try Gave up on tweaking the module. Lets hope for some success!

Ended up opening a new issue for the sandbox module "Commerce Taxonomy Field Product Attribute." Changing Commerce Product to Commerce Line Item The module as it stands alters the product *entity*. I'm trying to alter the product line item.

While this seems different to the original topic it is still an attribute that is being selected to define the product.

Any suggestions are welcome.
Thanks!

Hi,
Would be great if an advanced module like http://drupal.org/node/870026#comment-5530970 (altered uc_option_image), would be available for Drupal Commerce to get attributes (colors e.g), as images in product display!
Greetings, Martijn

After looking through this thread and the Commerce Taxonomy Field Product Attribute sandbox module, I realized I wanted something in between the two options presented. I needed the image to be sourced from the product and not from the taxonomy term because the swatches for the products on my site will vary by product. I also wanted to include the ability to pick any field from the product to use as a replacement (thus eliminating the need to name your swatch field something specific). This new module incorporates the ability from the sandbox project to select any field on the product to use as the replacement field (even a different text field) by adding the select menu on the term reference field settings page. The field is then rendered in place of the label for the radio button, so there is no need for any javascript to attach background images.

Not sure what to do with this module variation, so I figured I would just post it here like latulipeblanche, and hope that anyone looking for this functionality will come across this page like I did.

Cheers,
Jason

Hey guys, this module is really great and most i searched for a long time, thanks a lot the coder. But I want to ask for an additional feature: In my taxonomy vocabulary I have 2 fields for images. One if the product is checked and one if it's not. Is there a way to change that image while the ajax refresh?

Greetings iGFORC3

AdamGerthel, how was it that you achieved your final result?

I've just updated a colleague's sandbox with code that also does this: http://drupal.org/sandbox/Artusamak/1559106

From the readme:

This module provides a "Rendered term" attribute mode, that
shows the rendered term instead of a radio button (degrades to a normal
radio button when JS is off).

Example usage:
0) Enable this module.
1) Create a Color vocabulary, add a text field called "Color" that will hold
hex values. Go to "Manage Display", click the tab called "Add to Cart form - Attribute",
enable only the color field (with the label hidden).
2) Create several terms with matching hex colors (Black: #cccccc, White: #ffffff, etc).
3) Add a Color taxonomy_term_reference field to a product type.
4) On the Field UI edit page for the Color field, select "Rendered term" as
the attribute type.

The Add To Cart form will now show the colors.

The full README also has instructions on how to get the colors shown on the product display page.
Of course, this relies on a text field that holds a hex value, and a formatter that turns that hex value into a div.
That's how my team wanted it. You can just use an imagefield instead if that's your thing.

I guess the module now needs a better name and to be promoted to a full project.

Hi Bojan this looks great. Hopefully fancy attributes becomes a real module!
Greetings, Martijn

I've promoted Fancy Attributes to a full module, see: http://drupal.org/project/commerce_fancy_attributes.
Seems stable. Testing and feedback welcome.

I see liupascal's sandbox is similar in approach to my code (though I went a bit further). I'm open to sharing commit access.

Let's mark this issue as fixed, and direct further bug reports / feature requests to the commerce_fancy_attributes issue queue.

You da man!

bojanz you rock!!!!! Can someone say that again?!!
and glorious archangel rszrama - i bow to thee! :)

Hi jasondecamp - post #48 - I think this is exactly the functionality I need. I have a series of attrib driven products and i want to be able to display the images from the commerce prods as a set of img thumbs to be selected as add to cart (instead of the standard drop down prod ref. or fancy attribs that use taxonomy which is not my use case)

I have tried to set this up using your module but not having much luck as yet - can you please give me a step by step to get this working? Do I just need to add a new prod ref field to the prod display or do I need to add a field to the commerce prod as well?

I did try this solution but couldnt get it working - http://drupal.org/node/1941516#comment-7408476

Many thanks in advance!

kevster,

I) Set up the taxonomy
1) Create a one or more vocabularies and terms for your product variants.
2) Add an image field to the vocabulary.
3) Under "Manage Display", choose the "Add to Cart form - Attribute" display.
4) Hide all fields except for your image field. Do not link the field to anything.
5) Add terms and their corresponding images to your vocabulary

II) Set up your product
1) Add a new field for your attribute, it should be of type "Term reference", with a widget of "Check boxes/Radio buttons".
2) Under "Attribute field settings", check "Enable this field to function as an attribute field on...". Set "Attribute selection widget" to "Rendered term". This should be a single valued field.
3) Under manage display, format your new attribute field as "Rendered entity" rendered as "Add to Cart form - Attribute".

Add some products and select the appropriate attributes. That should be it. After reading your last post here http://drupal.org/node/1941516#comment-7408476, I made a proof of concept demo: http://commerce.nerdyit.com/content/usb-cable-cfat

Hey jbova - many thx for replying and the detailed how to, also the demo! Appreciate you spending the time to set this up. I'll give this a go hopefully today and report back (was on holidays last week hence the delay).

I think one of your examples should work for me - the nerdyit example is how I want to use the prod display but need to use/reference the commerce product images as opposed to adding images to a taxonomy directly. Ive built a facetted search product listing built on the commerce product as opposed to prod display which works well - I had to do it this way when I realised the wrong prod images were being displayed e.g. a prod with several colour versions showed the wrong img in the results which was bad for UI.

I built my facet search based on commerce prods and then used the new commerce prod url module so I could link to the id of the correct prod in the display which is very useful - https://drupal.org/project/commerce_product_urls. As soon as the project is live I can link to it but its behind htaccess at the moment.

#48 Hi, jasondecamp. It is a good idea, but now it does not work because of this patch . How can I fix this?

Added liupascal's sandbox Project.

kolebas,

Maybe it's too late for you, but here is a corrected file for this module I have just edited, it wasn't working because of the attribute widget which value is referenced as '#type' and not 'value' anymore and the function commerce_product_build_content is deprecated, so I simply used the syntax found inside this old function (see here).

It is working great now.
And thanks to jasondecamp who made this great module !

On a side note, I get a 403 forbidden error when I try to download the .info file, so I have made a new one. I am unsure of the dependecies though. I have only commerce, but I don't know if I should add more.

I have uploaded the module in a zip file.

Sorry for duplicate comment, the files wasn't uploading with the first one.

Oops, sorry again, that's my first time posting files here.