Commit 424b795e83a802992aadeedddc06403979d30eea
1 parent
6dcb2e05
Exists in
staging
and in
42 other branches
Zoomable product images on catalog
* New method on display helper to create a product image link * Tweaks on catalog/index to show the zoomable images * Small fix on browse_catalogs.feature * Fixes on application.css to correctly show the images
Showing
4 changed files
with
43 additions
and
5 deletions
Show diff stats
app/helpers/display_helper.rb
| ... | ... | @@ -8,6 +8,14 @@ module DisplayHelper |
| 8 | 8 | opts |
| 9 | 9 | end |
| 10 | 10 | |
| 11 | + def image_link_to_product(product, opts={}) | |
| 12 | + return _('No product') unless product | |
| 13 | + target = product_path(product) | |
| 14 | + link_to image_tag(product.default_image(:big), :alt => product.name), | |
| 15 | + target, | |
| 16 | + opts | |
| 17 | + end | |
| 18 | + | |
| 11 | 19 | def price_span(price, options = {}) |
| 12 | 20 | content_tag 'span', |
| 13 | 21 | number_to_currency(price, :unit => environment.currency_unit, :delimiter => environment.currency_delimiter, :separator => environment.currency_separator), | ... | ... |
app/views/catalog/index.rhtml
| ... | ... | @@ -11,7 +11,12 @@ |
| 11 | 11 | <li class="product <%= "not-available" unless product.available %>"> |
| 12 | 12 | <ul> |
| 13 | 13 | <% if product.image %> |
| 14 | - <li id="product-image-link"><%= link_to_product product, :class => 'product-big', :style => 'background-image:url(%s)' % product.default_image(:big) %></li> | |
| 14 | + <li id="product-image-link"> | |
| 15 | + <div class="zoomable-image"> | |
| 16 | + <%= image_link_to_product product, :class => 'product-big' %> | |
| 17 | + <a href='<%= product.default_image(:big).gsub('_big','') %>' class="zoomify-image"><span><%= _('Zoom in') %></span></a> | |
| 18 | + </div> | |
| 19 | + </li> | |
| 15 | 20 | <% else %> |
| 16 | 21 | <li class="product-big no-image"><%= _('No image') %></li> |
| 17 | 22 | <% end %> |
| ... | ... | @@ -88,3 +93,13 @@ |
| 88 | 93 | </ul> |
| 89 | 94 | |
| 90 | 95 | <%= pagination_links @products, :params => {:controller => :catalog, :action => :index, :profile => profile.identifier} %> |
| 96 | + | |
| 97 | +<link href="/stylesheets/fancybox.css?1323903734" media="screen" rel="stylesheet" type="text/css" /><script src="/javascripts/jquery.fancybox-1.3.4.pack.js?1323903734" type="text/javascript"></script><script type="text/javascript"> | |
| 98 | +//<![CDATA[ | |
| 99 | +jQuery(function($) { | |
| 100 | + $(window).load( function() { | |
| 101 | + $('.zoomify-image').fancybox(); | |
| 102 | + }); | |
| 103 | + }); | |
| 104 | +//]]> | |
| 105 | +</script> | ... | ... |
features/browse_catalogs.feature
| ... | ... | @@ -95,6 +95,14 @@ Feature: browse catalogs |
| 95 | 95 | And I should not see "qualifiers" |
| 96 | 96 | And I should not see "price composition" |
| 97 | 97 | |
| 98 | + Scenario: display "zoom in" button | |
| 99 | + Given the following products | |
| 100 | + | owner | category | name | price | img | | |
| 101 | + | artebonito | categ1 | Agrotox | 12.34 | agrotox | | |
| 102 | + And I am on /catalog/artebonito | |
| 103 | + And I should not see "No image" | |
| 104 | + And I should see "Zoom in" within ".zoomify-image" | |
| 105 | + | |
| 98 | 106 | Scenario: image links to product page |
| 99 | 107 | Given the following products |
| 100 | 108 | | owner | category | name | price | img | |
| ... | ... | @@ -122,6 +130,7 @@ Feature: browse catalogs |
| 122 | 130 | | owner | category | name | price | description | |
| 123 | 131 | | artebonito | categ1 | Produto2 | 12.34 | A small description for a product that doesn't exist. | |
| 124 | 132 | And I am on /catalog/artebonito |
| 133 | + And I reload and wait for the page | |
| 125 | 134 | Then I should see "Produto2" within "li.product-link" |
| 126 | 135 | And I should see "12.34" within "span.product-price" |
| 127 | 136 | And I should see "description" within "#product-description-button" | ... | ... |
public/stylesheets/application.css
| ... | ... | @@ -1075,10 +1075,12 @@ code input { |
| 1075 | 1075 | text-align: left; |
| 1076 | 1076 | background: transparent url(/images/black-alpha-pixel.png); |
| 1077 | 1077 | border-bottom: 1px solid #333; |
| 1078 | + text-decoration: none; | |
| 1078 | 1079 | } |
| 1079 | 1080 | |
| 1080 | 1081 | .zoomable-image:hover .zoomify-image { |
| 1081 | 1082 | display: block; |
| 1083 | + text-decoration: none; | |
| 1082 | 1084 | } |
| 1083 | 1085 | |
| 1084 | 1086 | #article .zoomify-image { |
| ... | ... | @@ -1093,6 +1095,7 @@ code input { |
| 1093 | 1095 | border-bottom: 1px solid #eee; |
| 1094 | 1096 | display: block; |
| 1095 | 1097 | background: transparent url(/images/zoom.png) left center no-repeat; |
| 1098 | + color: #fff; | |
| 1096 | 1099 | } |
| 1097 | 1100 | |
| 1098 | 1101 | #article pre { |
| ... | ... | @@ -2980,7 +2983,7 @@ div#activation_enterprise div { |
| 2980 | 2983 | } |
| 2981 | 2984 | #product-list li.product { |
| 2982 | 2985 | width: 200px; |
| 2983 | - min-height: 260px; | |
| 2986 | + min-height: 280px; | |
| 2984 | 2987 | float: left; |
| 2985 | 2988 | padding: 10px 30px 10px 0; |
| 2986 | 2989 | margin-bottom: 10px; |
| ... | ... | @@ -3122,11 +3125,14 @@ div#activation_enterprise div { |
| 3122 | 3125 | #product-list .product-big { |
| 3123 | 3126 | display: block; |
| 3124 | 3127 | width: 200px; |
| 3125 | - height: 140px; | |
| 3128 | + height: 160px; | |
| 3126 | 3129 | border: 1px solid #BFBFBF; |
| 3127 | - background-repeat: no-repeat; | |
| 3128 | - background-position: 50% 50%; | |
| 3130 | +/* background-repeat: no-repeat; | |
| 3131 | + background-position: 50% 50%; */ | |
| 3129 | 3132 | position: relative; /* work arround msie bug */ |
| 3133 | + text-align: center; | |
| 3134 | + display: table-cell; | |
| 3135 | + vertical-align: middle; | |
| 3130 | 3136 | } |
| 3131 | 3137 | #product-list .product-big.no-image { |
| 3132 | 3138 | line-height: 145px; | ... | ... |