Hi,

Thank you for your message.

Could you please more elabore on the issue? I'm not sure what you are trying to do. Also the product options are listed here -> http://devnet.kentico.com/docs/ecommerceguide/index.html?product_options.htm Do you want to show an image based on this product option in the transformation of product?

Also this is more of a html/javascript question so I would refer to something like: http://stackoverflow.com/questions/18110413/dropdown-menu-select-selecting-an-item-and-picture-shows-based-on-the-selec you can also have something like: http://stackoverflow.com/questions/9508029/dropdown-select-with-images

Kind regards,
Richard Sustek

Below is code that was posted in another forum previously. I only modified it to change the image onmouseover. Here is the code that willl allow this to happen. One thing to note is that this code goes in the file /CMSModules/Ecommerce/Controls/ProductOptions/ProductOptionSelector.ascx.cs file under the method loadselector(). Place it right before the comment //WAI validation. (you can place in other places, but this is where I verified that it works)

Also, the code below will only change the options that are in the horizontal radio button list. You can change this by changing the switch statement or adding other cases with the same code, just choose a different enum type.

 //Added
            switch (this.OptionCategory.CategorySelectionType)
            {
                case OptionCategorySelectionTypeEnum.RadioButtonsHorizontal:

                    LocalizedRadioButtonList boxListHorizontal = (LocalizedRadioButtonList)this.SelectionControl;
                    foreach (ListItem item in boxListHorizontal.Items)
                    {
                        if (item != null)
                        {
                            SKUInfo sku = SKUInfoProvider.GetSKUInfo(ValidationHelper.GetInteger(item.Value, 0));

                            if (sku != null && !string.IsNullOrEmpty(sku.SKUImagePath))
                            {
                                item.Text += " <div class=\"OptionImage\"><img alt=\"" + sku.SKUName + "\" src=\"" + URLHelper.ResolveUrl(sku.SKUImagePath) + "\" width=\"50\" height=\"50\" /></div>";
                                //Set for the onclick event- Changes the "MainProductImage" to whichever image was clicked.
                                item.Attributes.Add("onclick", "jQuery('.fancyboxProductImg').html('<img alt=\"" + sku.SKUName + "\" src=\"" + URLHelper.ResolveUrl(sku.SKUImagePath) + "\" width=\"240\" height=\"240\" />')");
                                //Added for the onmouseover event, when a customer hovers over the image, it will perform the same action as above.
                                item.Attributes.Add("onmouseover", "jQuery('.fancyboxProductImg').html('<img alt=\"" + sku.SKUName + "\" src=\"" + URLHelper.ResolveUrl(sku.SKUImagePath) + "\" width=\"240\" height=\"240\" />')");
                            }
                        }
                    }
                    break;
            }
            //End Added