JQuery UI 'Button' classes removed with AJAX on add to cart form.

Oooh, that looks very sharp. It would be a very nice solution to #1180016: Attributes (colors e.g.) as images in product display ? as well.

What you're experiencing is the Forms API's AJAX refresh. When the throbber shows, it's because the form is being submitted, rebuilt, and re-rendered server side. We then return part of the form to be replaced in the page. It appears the re-rendered form does not include your classes, and the question is why. To know that I'd need to see how you're attempting to add the classes. If you do it through a form alter, the classes should be re-applied when the form is rebuilt. If you were just doing it via JavaScript after the page loaded, then you'd lose the classes.

Yes @gamepaused, show us how you did it !! :)

I'm looking for, how to get "Images as "select-list" of Add-to-cart-form" (http://www.drupalcommerce.org/node/466#comment-1411).

@gamepaused: you are probably not loading your Javascript properly. It needs to go into a Drupal.behavior thingie.

See http://drupal.org/node/756722#behaviors for more.

If you do that we could link it in from DC.org and wherever we need. I'll tweet it up, too. : )

Maybe we can just keep a handbook here on d.o linking to various tutorials like Views Slideshow did for the one I posted to my blog.

@rszrama Do you think that this could work with the image-colors representing the colors of the products ?

i dont knw.. not working for me :| any suggestion

first this didn't worked for me, too. then i figured out that it is important to set the drupal_add_library and the drupal_add_js!

so the full code to put in your productdisplay.tpl.php is:

<?php
drupal_add_library('system', 'ui.button');
drupal_add_js('jQuery(document).ready(function(){jQuery(".form-radio").button();});', 'inline');
?>

  	<script>
	(function ($) {
Drupal.behaviors.mytheme = {
attach: function (context, settings) {
$('.form-radio', context).button() ;
}
};

}(jQuery));
	</script>

(setted this up to the class .form-radio instead of #button)

Newbie question: So where do the images go? in the tpl?

@aussiejen did you figure out where images go?

A bigger newb question though: Where does the code go? I have looked at quite a bit of documentation but nothing quite covers how to handle this.

Thanks for the help.

what i posted was in my productnode.tpl.php

then it is possible to give the labels background images with css.

but there was a big problem maybe someone could work this out?

every input has a id, e.g.: "edit-attributes-field-color-red". So in css the only way to give the label a background is:

label[for="edit-attributes-field-color-red"] {
   background-image:...
}

when clicking on a color all colors are rerendered and the id changes to "edit-attributes-field-color-red--2", "edit-attributes-field-color-red--3", "edit-attributes-field-color-red--4", ... and so on.

So after clicking on another color all background images are gone. so i needed to do some javascript for all of my 30 colors:
$('label[for^="edit-attributes-field-farbe-color-red"]').css('background-image','url(files/color/00.jpg)');

the little hook "^" says "all labels that start with edit-attributes-field-farbe-color-red"

I would please you "commerce team" to give the input's a class too which does not change. so its <input id="edit-attributes-field-color-red" class="edit-attributes-field-color-red"> and the class does not change after reloading the input fields.

when this is worked out i will write tutorial how to theme the (color) dropwdown into pictures.

I'm pretty sure that's a different issue than this one. This is just a core Drupal issue in that it increments IDs on AJAX refreshes. To get around it, I rely on classes (even otherwise unique classes that match element IDs) to target my styles. See for example our targeting of product fields injected into node displays.

Great issue, it really helped me.

I would like also to add my final solution (thanks to all your posts):

1) I used a standard select list field for the color.
2) I added all the predefined web color values to that list (X11 color names - Aliceblue, Antique white,.....)
3) The client who inserts a product just selects a color from the list.
4) I used the following code to the node--product-display.tpl.php: (thanks to all your posts)

<?php
drupal_add_library('system', 'ui.button');
drupal_add_js('jQuery(document).ready(function(){jQuery(".form-radio").button({label:"."});});', 'inline');
?>

<script>
(function ($) {
Drupal.behaviors.mytheme = {
attach: function (context, settings) {
$('.form-radio', context).button();

var myradios = $('label.ui-button');
    myradios.each(function() {
      $(this).css('background',$(this).children(':first').text());
	  $(this).css('color',$(this).children(':first').text());    	  
    });
}
};

}(jQuery));
</script>
<?php

----------------

5) Style the ui.button in the css

You could use taxonomy instead of standard list of course, but my main point is that you don't have to use an image field. The little box gets the respective color just with the following jquery code :
$(this).css('background',$(this).children(':first').text());

Therefore the client doesn't have to upload separate images for each product (or external jpgs like 'url(files/color/00.jpg)). unless you really need it.

palamidaras50, I want to add this code to my e-shop. Write me please, what i need to edit in this. thanks in advance

Hi, still I do not get this to get images as select options...for image-site this is very importent. I know this issue is closed, but may be someone has made a module/sandbox to get this easy done?
greetings, Martijn

sorry- double post..