spree/spree — pull request #2218 by radar (2012-11-15 05:01:23+00:00)
Title: Products.js Javascript Fixes

When viewing a product in the store that has variants with images such as:

http://localhost:3000/products/ruby-on-rails-baseball-jersey

the javascript code switches the thumbnail images displayed based on the variant that is chosen. So in the above example, clicking on the __Size: S, Color: Red__ option switches the thumbnails to show the red jersey options.

The problem is that the __Main__ image for the product will only show the __main product__ image if that image exists.

So, using the above example, clicking on the __Size: S, Color: Red__ option continues to show the __black__ (maybe navy blue) image, requiring that the user hover over, or click the red thumbnail in order to view the red shirt.

It is my opinion that the __Red__ shirt should be displayed by default in the main image automatically if the __Size: S, Color: Red__ option was selected.

This can be accomplished by changing the __show_variant_images__ method in the product.js.coffee file that currently looks like this:

```coffeescript
show_variant_images = (variant_id) ->
($ 'li.vtmb').hide()
($ 'li.vtmb-' + variant_id).show()
currentThumb = ($ '#' + ($ '#main-image').data('selectedThumbId'))
if not currentThumb.hasClass('vtmb-' + variant_id) and not currentThumb.hasClass('tmb-all')
thumb = ($ ($ 'ul.thumbnails li:visible').eq(0))
newImg = thumb.find('a').attr('href')
($ 'ul.thumbnails li').removeClass 'selected'
thumb.addClass 'selected'
($ '#main-image img').attr 'src', newImg
($ '#main-image').data 'selectedThumb', newImg
($ '#main-image').data 'selectedThumbId', thumb.attr('id')
```

with this

```coffeescript
show_variant_images = (variant_id) ->
($ 'li.vtmb').hide()
($ 'li.vtmb-' + variant_id).show()
currentThumb = ($ '#' + ($ '#main-image').data('selectedThumbId'))
if not currentThumb.hasClass('vtmb-' + variant_id)
thumb = ($ ($ 'ul.thumbnails li:visible.vtmb').eq(0))
thumb = ($ ($ 'ul.thumbnails li:visible').eq(0)) unless thumb.length > 0
newImg = thumb.find('a').attr('href')
($ 'ul.thumbnails li').removeClass 'selected'
thumb.addClass 'selected'
($ '#main-image img').attr 'src', newImg
($ '#main-image').data 'selectedThumb', newImg
($ '#main-image').data 'selectedThumbId', thumb.attr('id')
```

The pieces to notice are the removal of:

```coffeescript
and not currentThumb.hasClass('tmb-all')
```

and the addition/modification of:
```coffeescript
thumb = ($ ($ 'ul.thumbnails li:visible.vtmb').eq(0))
thumb = ($ ($ 'ul.thumbnails li:visible').eq(0)) unless thumb.length > 0
```

Additionally, the current code for the method __add_image_handlers__ in the same file causes twitter bootstrap thumbnail support to stop working.

I recognize that twitter bootstrap isn't part of the core Spree code, but a small change to this file allows them to play together without a problem.

The current __add_image_handlers__ method that looks like this:

```coffeescript
add_image_handlers = ->
($ '#main-image').data 'selectedThumb', ($ '#main-image img').attr('src')
($ 'ul.thumbnails li').eq(0).addClass 'selected'
($ 'ul.thumbnails a').on 'click', (event) ->
($ '#main-image').data 'selectedThumb', ($ event.currentTarget).attr('href')
($ '#main-image').data 'selectedThumbId', ($ event.currentTarget).parent().attr('id')
($ this).mouseout ->
($ 'ul.thumbnails li').removeClass 'selected'
($ event.currentTarget).parent('li').addClass 'selected'
false

($ 'ul.thumbnails li').on 'mouseenter', (event) ->
($ '#main-image img').attr 'src', ($ event.currentTarget).find('a').attr('href')

($ 'ul.thumbnails li').on 'mouseleave', (event) ->
($ '#main-image img').attr 'src', ($ '#main-image').data('selectedThumb')
```

Should be changed to this:
```coffeescript
add_image_handlers = ->
($ '#main-image').data 'selectedThumb', ($ '#main-image img').attr('src')
($ '#product-thumbnails li').eq(0).addClass 'selected'
($ '#product-thumbnails a').on 'click', (event) ->
($ '#main-image').data 'selectedThumb', ($ event.currentTarget).attr('href')
($ '#main-image').data 'selectedThumbId', ($ event.currentTarget).parent().attr('id')
($ this).mouseout ->
($ '#product-thumbnails li').removeClass 'selected'
($ event.currentTarget).parent('li').addClass 'selected'
false

($ '#product-thumbnails li').on 'mouseenter', (event) ->
($ '#main-image img').attr 'src', ($ event.currentTarget).find('a').attr('href')

($ '#product-thumbnails li').on 'mouseleave', (event) ->
($ '#main-image img').attr 'src', ($ '#main-image').data('selectedThumb')
```

Basically every instance of:

```
ul.thumbnails
```

has been replaced with:

```
#product-thumbnails
```

The aforementioned ul.thumbnails targets __EVERY__ ul that has a thumbnail class on __ANY__ page that has the products.js included (which means every page since it gets compiled into all.js). Since the __mouseenter__, __mouseleave__, and __click__ handlers are all overridden here, the twitter bootstrap handlers for thumbnails gets clobbered.

I would appreciate if the __add_image_handlers__ method was fixed in the Spree core so that we play nicer with other javascript.

Thanks,
Chris