Option Images Bug Fixes and Enhancements

@gtin: Looks like some of this might be dealt with a bit differently in 6.x-1.x-dev, but here's a patch against the 6.x-1.4 version to help clarify what you modified.

@pillarsdotnet: should these modifications be broken into separate patches?

I had a couple of bugs that this patch when applied against version 1.4 won't have.

This fixes the .js file where switching image in my original patch was not working in older browsers and it also fixes the uploading of images that I broke for mistake. This should be stable since I am already using in my prod website.

Thanks for the update gtin!!

The javascript fix did the job for me in FF on OSX. Still not working on OSX in Opera9 & Safari4. On Windows not working in IE7 nor FF.

I've only been playing with this mod for an hour or so, and the only issue I appear to be having is with the images not switching when the selection or radio is changed.

I noticed in the .js file that there are refs to lightbox. Is use of lightbox the bit that makes the images working on your prod site? I'm using thickbox as recommended somewhere(I think by ubercart!?).

What browsers you tested against on your prod site?

I used IETester and it worked on IE6, IE7 and IE8. Also, I tested on chrome, Firefox 2 and firefox 3.5. I do not have any issues. I wonder if it you need to clear the cache on your browser or in Drupal.

Thanks for getting back to me.

I have a habit of flushing the cache several times during a development session(just in case) as well as clearing browser cache(although I have been known to forget from time to time).

Given it worked across your range of browsers it made me play around further. After a bit of playing around I realized it was only showing when I was logged in as admin. DOH!! a lightning bolt hit me and I'm embarrassed to say I forgot to change the user permissions of the imagecache and the Ubercart options images.

I need to develop a new habit;

1. install a module
2. go to user permissions
3. config the module.

Thanks for the help and fix, it's flying now!!

@gtin

I think you've got a small bug in your js file;

switchImageEffect takes 3 params not 2.

I noticed it because I'm getting blank nids which is forcing the catch.

This worked for me too, but it took me HOURS ti figure out this was the most comprehensive collection of fixes, etc. gtin thanks for packing all of this up... how can we get this updated on the project page?

...actually it worked for me then stopped working... and now i can't figure out which combination of whose fixes from the issue queue made it work for me. dear goodness...

Update from http://drupal.org/node/589476#comment-2092492:

I have gotten this module to work using gtin's update in post #2 above.

Selecting "required" for THE FIRST OPTION under the "attributes" menu while editing a product causes this module not to work. It seems the attribute listed first is automatically "required" by nature as that attribute's default option's image is then used for the product's default catalog image unless using imagecache imagefield to upload other images.
As long as the first attribute in that list is not checked as "required" this module works. It also only seems to work on Garland-based themes... I haven't successfully gotten it to work for any other themes yet.

Can anyone else confirm these things?

Would it not be feasible to commit gtin's update in post #2 above to the main project page? At least it would then install for people without error and work under the conditions i mentioned above. A caveat could be stated on the project page stating the above. How do we do this? Forgive my ignorance in this area. I assume one of the project maintainers would have to do this.

It took me a couple of hours to learn jquery selectors and figure out a way to select the right objects from the DOM tree in a way to allow the images to switch independently of the theme being used (see here for help on jquery selectorshttp://docs.jquery.com/Selectors).

The uc_option_image.js has now changed to not rely on a parent that has a class of .content. I think that this was causing the module to not work with other themes. Please test this with other themes and let me know if it does not work.

PS: remove the _.txt extension after downloading the file

Nice job, gtin. I did a little quick testing on a few themes for fun and can confirm that this module now appears to work for Acquia Prosper and the Sky themes!!!! YAY!!! Whereas AD Novus and Forest Floor resulted in some weird behavior of the image fading out and nothing fading back in... but perhaps that wasn't because of the .js file at all.... this was not thorough testing by any means. I"m just starting the feedback. Awesome improvement, THANKS gtin!!

I also just wanted to contribute this with respect to the uc_option_image.js file as well.

All seems to work great for me with firefox, but with Internet explorer 8 (and in 7 compat mode) it does this:

The first option with images select box works great and images fade in and out... but the second doesn't trigger any image fading.

you can see what i mean here: http://www.countryinspirations.com/content/wooden-sign-assorted-sayings if you use IE (hopefullY)

I'm definitely newbie to this modules development, but shouldn't line 862 of uc_option_image.module (the one from gtin's latest update http://drupal.org/node/550344#comment-2004092 above) be this:

rather than this:

...and then line 879 similarly be this:

rather than this:

I was noticing all rows (except for the rows with the attribute name) in the table of options at /node/*/edit/options were shifted one cell to the left.
This seems to have fixed the problem for me.

Thanks for pointing this out. I noticed that problem also in the edit options page but it never bothered me. I will implement your changes and test it out later today. I am not sure about the multiple attribute options not working with fade in/fade out. If I have time I will look at this also. I will try the other themes that are not working and see what the issue is.

With all the changes, does the "required" option still have to be unchecked? Most of my attribute options are required.

Either way, I'll be reinstalling today and trying again. Thanks guys!

From my experience so far currently yes the required option does still need to be unchecked for the first listed attribute; however, from my experience the first listed attribute automatically/inherently becomes required with the option images module installed... Maybe this is why it can't be somehow redundantly marked as required.

Good luck.

Here are the changes:

1) The issues with the module not working with AD Novus and Forest Floor have been fixed. The .js file was extracting the node id from the HTML file and these themes did not have node id stored in the same way as the garland theme. I changed the .module file and the .js file for this fix. I would expect this to work with most of the themes now if not all of them.

2) The issue of the required attributes not working has been fixed as well

3) Editing the options page has been fixed as per comment #13.

Please give it a try and let me know if you have any issues.

P.S. I could not understand or reproduce the issue of the images not fade in/out in IE when using multiple attributes

Edit: had to delete to whole module folder and reload it, then it worked perfectly!

Great work, gtin- and THANKS!

I can confirm that module works with Acquia Prosper- and very likely most any of them.

The only issue i noticed had to do with:

2) The issue of the required attributes not working has been fixed as well

This indeed has been fixed however a new side effect i noticed was that now, IF the first listed attribute is indeed checked as required, the main/default catalog image for that product then seems to fall back on whatever imagecache image was is assigned to the product and in page view "no image" is displayed by default, rather than the option images module item default. Does this make sense?

I can see how this is the idea configuration unless you would like the products default image to be that of the first listed default option image and have it checked as required... except... that is irrelevant i suppose because you could just upload it as the first imagecache image as well. Does that make sense? This is not really an issue i suppose but just thought i'd mention it. :)

...otherwise, it behaves as it did before.

Also, another small note... i'm noticing that the No Image image for me is now pointing to:
http://www.site.com/sites/default/files/imagecache/medium/sites/all/modu...
...however i'm not finding that file exists. There was a no-image.png file there but that has since disappeared ( i flushed the medium preset cache)

Nice work!

Thanks for checking on the issue of the images not fade in/out in IE when using multiple attributes... i'll get back to you on this...

With respect to the issue of the images not fade in/out in IE when using multiple attributes...

I believe this is an incompatibility with the UC Attribute Stock Filter module of some sort. Please see my example of this occuring here:

http://www.countryinspirations.com/content/ie-test

Do this:

• under Print, select "Americana"
  • In FF and IE you'll hopefully notice that the picture fades as it should to a new image (Please don't mind the random irrelevant picture)
• then under Sign Saying, select "Believe / [...]"
  • In FF the picture fades out and into the one for the "Believe / [...]" attribute, but in IE the picture does not change.
• if you happened to refresh the page and select the same options i mentioned above in reverse order the same thing would happen respectively in IE and FF

This all seems to be happening because for this test product i'm showing you, i have some combinations of attributes with SKU TEST that are in stock, and some other combinations of attributes with SKU TEST1 and SKU TEST2 that are out of stock. So the out of stock combinations of attributes options are filtered out. If all combinations of attributes were in stock the above would work fine in IE.

AS A SEPERATE IE vs Firefox bug (seemingly independent from the issue above):

• In IE, if you try to "start over" by selecting "Please select" you'll notice the Option image abruptly disappears and then doesn't reappear with the selection of any attributes. If you try this with FF it continues functioning as it should with the reselection of any attributes.

I hope this helps- let me know if you have any questions or suggestions. THanks!!

Now this is becoming complicated. I would think that this would be related to jquery compatibility in these two browsers. have you tried a different out of stock module? this is the one I am using http://drupal.org/project/uc_out_of_stock

I would think that even with this module there would be still an issue but I think it is worth trying. the noimage.png it should have been no_image.png. It is in the .zip file.

I downloaded Microsoft Script Debugger and turned on Debuging under tools->internet options in IE8. what I noticed is that even though the Jquery selector returns both select tags it only trigger the event of the first object that gets a selection under IE.

here is the code where I believe the issue is:

// Selects
$('.add-to-cart select.form-select').change(function(){
if (aid = UCOI.getAID(this)){
UCOI.switchImage(aid, this, size);
}
});

This code is in the .js file under UCOI.init = function()

Here are a few things to try as a refrence:
1) use jquery update module v2 to see if it fixes this issue. (see http://drupal.org/project/jquery_update & http://justinhileman.info/articles/jquery-update-in-a-multisite-drupal-e...)
2) attach the code above to Drupal.behaviours.MyModuleBehaviours as described here http://api.drupal.org/api/drupal/developer--topics--javascript_startup_g...

Thank-you for this. This has solved many of the issues I had and provide many awesome new features! A+++

I had this module working just fine with UC2-rc3 and now on rc7 all seems broken, and looking this module's issue queue doesn't give much hope. It seems that you guys have been pretty much on top of this module here and on #589476: Has anyone got this working???.

Is there anyone that can summarize the status of the module patches and stuff, what should be applied and what's the words from the module's maintainer?

Should I use the latest zip from this issue or any other?

Is there any possibility of actively helping with this module, maybe having CVS access to it and help with the development?

I am a maintainer of several modules and this is one I used to use, so If I can get this one right I might be able to help.

Thanks,
a.=

I feel that the zip from post #17 in this thread is the best version of this module yet. It resolves a lot of issues, and I plan to put it fully to the test tomorrow afternoon while I knock out my cart site.

+1

Post number 17 worked for us.

We're using a custom theme.

I don't think this module should be listed as working, to my mind, not installing is a big problem that needs to be fixed before something should be listed as working.

Thanks a million to everyone on these threads who have helped us get this working.

I think this module needs a new maintainer, didn't the guy who wrote it say he couldn't keep working on this? Can someone else take over? gtin for example.

Yup, big thanks to everyone.

I second that this module should be downgraded to "in development."

Thanks to the original developer and to gtin for your fixes in post #17, I'm trying this module out and it's very promising.

Without understanding too much of how this works yet, I noticed the product node page was calling for an image "noimage.png" inside my module folder, until I chose an option. There are several comments about this in the issues, but I didn't quite understand how to fix it. There isn't an image by that name by default, but that's easy to take care by either renaming the image in the module folder or updating the code in the .module file from no_image.png to noimage.png (around line 800).

I'd rather it show a default option image until another options is chosen, so I'll have to figure that out (has someone done this?).

It would really cool to show all the different option images as thumbnails beneath a large product image, and when you choose one of the options, the main product image is swapped out with the new option image (e.g.- I see thumbnails of a product in different colors, and then choosing the 'red' option, the main product image changes to the red shot). Of course then I should develop that feature, rather than just mention it. Maybe a future project will help pay for that...

This UC Radio Images module looks like another route to go, for just showing images next to options: http://www.ubercart.org/contrib/12322

It would really cool to show all the different option images as thumbnails beneath a large product image, and when you choose one of the options, the main product image is swapped out with the new option image (e.g.- I see thumbnails of a product in different colors, and then choosing the 'red' option, the main product image changes to the red shot).

+1

I tried this module and all worked fine until the last update of views and uc_rc 7. Now on my views pages all attr's images are gone. Then I applied module from the #17 comment and it didn't help. Did anybody else have similar issues?

just tryed #17 with Ubercart 2.2: installed flawlessly and seems to play nice :) thanks!

shall we move this to RTBC?