I have a show page via the taxons controller and I'm pulling over
thumbnails based on the product id. I'm listing the thumbnails directly
below the main image of the displayed product, just like it is on the
products#show page. When you click the main product image on taxons#show it
takes you to products#show.

I would like the ability to rollover the thumbnails on the taxons#show page
and the main image above changes -- the exact same functionality that is
default on the products#show page. I tried pulling over ALL the code from
products/_thumbnails.html.erb but it's not working.

I did however pull over:

<!-- BRINGS THUMBNAILS INTO TAXONS PAGE -- PULLED FROM _THUMBNAILS.HTML.ERB
-->
<% if (product.images + product.variant_images).uniq.size > 1 %>
<ul id="product-thumbnails-taxon" class="thumbnails inline"
data-hook>
<% product.images.each do |i| %>
<li class='tmb-all' id='tmb-<%= i.id %>'>
<%= link_to(image_tag(i.attachment.url(:mini)),
i.attachment.url(:product), :class => 'tmb-all', :id => "tmb-#{i.id}") %>
</li>
<% end %>
</ul>
<% end %>
<!-- END THUMBNAILS INTO TAXONS PAGE -->

to 'shared/_products.html.erb' in order to get the thumbnails to display,
which worked perfectly Now I just want the ability to hover the thumbnails
to change the main image.

I'll attach a screenshot of the taxons#show page where I'm trying to get
the hover effect working.

Again, thank you very much for everyone's help. I appreciate this group.

--
You received this message because you are subscribed to the Google Groups "Spree" group.
To unsubscribe from this group and stop receiving emails from it, send an email to spree-user+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Search Discussions

  • Nate Lowrie at Mar 14, 2013 at 12:05 pm
    Jameson,

    The functionality you seek is actually being controlled by Javascript.
    See /app/assets/javascripts/store/product.js.coffee for the js that
    controls that rollover functionality. Just by glancing at the js and your
    snippet I see a couple of things to check:


    1. Your main image needs to be wrapped in a div that has an ID of
    main-image
    2. Your thumbnails list tag needs to be wrapped in a div that has an ID
    of #product-images

    Regards,

    Nate
    On Wednesday, March 13, 2013 5:38:31 PM UTC-4, Jameson Trinker wrote:

    I have a show page via the taxons controller and I'm pulling over
    thumbnails based on the product id. I'm listing the thumbnails directly
    below the main image of the displayed product, just like it is on the
    products#show page. When you click the main product image on taxons#show it
    takes you to products#show.

    I would like the ability to rollover the thumbnails on the taxons#show
    page and the main image above changes -- the exact same functionality that
    is default on the products#show page. I tried pulling over ALL the code
    from products/_thumbnails.html.erb but it's not working.

    I did however pull over:

    <!-- BRINGS THUMBNAILS INTO TAXONS PAGE -- PULLED FROM
    _THUMBNAILS.HTML.ERB -->
    <% if (product.images + product.variant_images).uniq.size > 1 %>
    <ul id="product-thumbnails-taxon" class="thumbnails inline"
    data-hook>
    <% product.images.each do |i| %>
    <li class='tmb-all' id='tmb-<%= i.id %>'>
    <%= link_to(image_tag(i.attachment.url(:mini)),
    i.attachment.url(:product), :class => 'tmb-all', :id => "tmb-#{i.id}") %>
    </li>
    <% end %>
    </ul>
    <% end %>
    <!-- END THUMBNAILS INTO TAXONS PAGE -->

    to 'shared/_products.html.erb' in order to get the thumbnails to display,
    which worked perfectly Now I just want the ability to hover the thumbnails
    to change the main image.

    I'll attach a screenshot of the taxons#show page where I'm trying to get
    the hover effect working.

    Again, thank you very much for everyone's help. I appreciate this group.
    --
    You received this message because you are subscribed to the Google Groups "Spree" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to spree-user+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Jameson Trinker at Mar 14, 2013 at 5:12 pm
    Hey Nate,

    Thanks for your response. I got it working, however since it is switching
    the image out on the 'main-image' div when you rollover a thumbnail it
    switches the main image for every large image on the page, so every image
    in the product listing.

    I'm trying to attach <%= product.id %> onto the main-image div inside of
    the coffeescript file. But it's not wanting to take it. I tried including:

    <%= javascript_tag do %>
    window.productID = "<%=j product.id %>";<% end %>


    inside of '_products.html.erb' and then using the 'productID' variable in
    the coffeescript file, but I kept getting a stack level too deep error or
    something else.

    Now I'm trying to using the 'gon gem' but I can't include it. I added it to
    the gemfile, ran bundler, and then inserted '<%= include_gon %>' into the
    head tag but I keep getting a 'undefined local variable or method
    `include_gon' for #<#<Class:0x00000003fa50e8>:0x00000004dba278>'

    error.

    Any ideas on why spree isn't taking gon, or other ways to attach product.id
    to ($ '#main-image') in the js file?

    Thanks, Nate.
    On Thursday, March 14, 2013 7:05:40 AM UTC-5, Nate Lowrie wrote:

    Jameson,

    The functionality you seek is actually being controlled by Javascript.
    See /app/assets/javascripts/store/product.js.coffee for the js that
    controls that rollover functionality. Just by glancing at the js and your
    snippet I see a couple of things to check:


    1. Your main image needs to be wrapped in a div that has an ID of
    main-image
    2. Your thumbnails list tag needs to be wrapped in a div that has an
    ID of #product-images

    Regards,

    Nate
    On Wednesday, March 13, 2013 5:38:31 PM UTC-4, Jameson Trinker wrote:

    I have a show page via the taxons controller and I'm pulling over
    thumbnails based on the product id. I'm listing the thumbnails directly
    below the main image of the displayed product, just like it is on the
    products#show page. When you click the main product image on taxons#show it
    takes you to products#show.

    I would like the ability to rollover the thumbnails on the taxons#show
    page and the main image above changes -- the exact same functionality that
    is default on the products#show page. I tried pulling over ALL the code
    from products/_thumbnails.html.erb but it's not working.

    I did however pull over:

    <!-- BRINGS THUMBNAILS INTO TAXONS PAGE -- PULLED FROM
    _THUMBNAILS.HTML.ERB -->
    <% if (product.images + product.variant_images).uniq.size > 1 %>
    <ul id="product-thumbnails-taxon" class="thumbnails inline"
    data-hook>
    <% product.images.each do |i| %>
    <li class='tmb-all' id='tmb-<%= i.id %>'>
    <%= link_to(image_tag(i.attachment.url(:mini)),
    i.attachment.url(:product), :class => 'tmb-all', :id => "tmb-#{i.id}") %>
    </li>
    <% end %>
    </ul>
    <% end %>
    <!-- END THUMBNAILS INTO TAXONS PAGE -->

    to 'shared/_products.html.erb' in order to get the thumbnails to display,
    which worked perfectly Now I just want the ability to hover the thumbnails
    to change the main image.

    I'll attach a screenshot of the taxons#show page where I'm trying to get
    the hover effect working.

    Again, thank you very much for everyone's help. I appreciate this group.
    --
    You received this message because you are subscribed to the Google Groups "Spree" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to spree-user+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Nate Lowrie at Mar 14, 2013 at 6:39 pm
    Jameson,

    I didn't think about the multiple images. What I would do to get this
    working is:

    1. modify the ID of the main image in the view from #main-image to
    #main-image-[ProductID]
    2. modify the ID of the thumbnail container in the view from
    #product-image-[ProductID]
    3. Copy the image handler coffee script into a new file for you app.
    Modify the copied function to properly select the correct main image
    container and thumbnail based on the ID.

    I have no experience with the gon gem, but think it's unnecessary for what
    you want to do because it's can be done in plain JS/CS.

    Regards,

    Nate
    On Thursday, March 14, 2013 1:12:54 PM UTC-4, Jameson Trinker wrote:

    Hey Nate,

    Thanks for your response. I got it working, however since it is switching
    the image out on the 'main-image' div when you rollover a thumbnail it
    switches the main image for every large image on the page, so every image
    in the product listing.

    I'm trying to attach <%= product.id %> onto the main-image div inside of
    the coffeescript file. But it's not wanting to take it. I tried including:

    <%= javascript_tag do %>
    window.productID = "<%=j product.id %>";<% end %>


    inside of '_products.html.erb' and then using the 'productID' variable in
    the coffeescript file, but I kept getting a stack level too deep error or
    something else.

    Now I'm trying to using the 'gon gem' but I can't include it. I added it
    to the gemfile, ran bundler, and then inserted '<%= include_gon %>' into
    the head tag but I keep getting a 'undefined local variable or method
    `include_gon' for #<#<Class:0x00000003fa50e8>:0x00000004dba278>'

    error.

    Any ideas on why spree isn't taking gon, or other ways to attach
    product.id to ($ '#main-image') in the js file?

    Thanks, Nate.
    On Thursday, March 14, 2013 7:05:40 AM UTC-5, Nate Lowrie wrote:

    Jameson,

    The functionality you seek is actually being controlled by Javascript.
    See /app/assets/javascripts/store/product.js.coffee for the js that
    controls that rollover functionality. Just by glancing at the js and your
    snippet I see a couple of things to check:


    1. Your main image needs to be wrapped in a div that has an ID of
    main-image
    2. Your thumbnails list tag needs to be wrapped in a div that has an
    ID of #product-images

    Regards,

    Nate
    On Wednesday, March 13, 2013 5:38:31 PM UTC-4, Jameson Trinker wrote:

    I have a show page via the taxons controller and I'm pulling over
    thumbnails based on the product id. I'm listing the thumbnails directly
    below the main image of the displayed product, just like it is on the
    products#show page. When you click the main product image on taxons#show it
    takes you to products#show.

    I would like the ability to rollover the thumbnails on the taxons#show
    page and the main image above changes -- the exact same functionality that
    is default on the products#show page. I tried pulling over ALL the code
    from products/_thumbnails.html.erb but it's not working.

    I did however pull over:

    <!-- BRINGS THUMBNAILS INTO TAXONS PAGE -- PULLED FROM
    _THUMBNAILS.HTML.ERB -->
    <% if (product.images + product.variant_images).uniq.size > 1 %>
    <ul id="product-thumbnails-taxon" class="thumbnails inline"
    data-hook>
    <% product.images.each do |i| %>
    <li class='tmb-all' id='tmb-<%= i.id %>'>
    <%= link_to(image_tag(i.attachment.url(:mini)),
    i.attachment.url(:product), :class => 'tmb-all', :id => "tmb-#{i.id}")
    %>
    </li>
    <% end %>
    </ul>
    <% end %>
    <!-- END THUMBNAILS INTO TAXONS PAGE -->

    to 'shared/_products.html.erb' in order to get the thumbnails to
    display, which worked perfectly Now I just want the ability to hover the
    thumbnails to change the main image.

    I'll attach a screenshot of the taxons#show page where I'm trying to get
    the hover effect working.

    Again, thank you very much for everyone's help. I appreciate this group.
    --
    You received this message because you are subscribed to the Google Groups "Spree" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to spree-user+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Jameson Trinker at Mar 14, 2013 at 8:08 pm
    So would it be:

    div id="main-image-<$= product.id %>">
    and
    div id="product-images-<$= product.id %>"> ?

    If so, how do I pull that ruby object into the coffeescript function? How
    do I attach that to:

    ($ '#main-image') and
    ($ '#main-image img')

    Thanks Nate. I seriously appreciate it.

    Jameson

    On Thursday, March 14, 2013 1:39:34 PM UTC-5, Nate Lowrie wrote:

    Jameson,

    I didn't think about the multiple images. What I would do to get this
    working is:

    1. modify the ID of the main image in the view from #main-image to
    #main-image-[ProductID]
    2. modify the ID of the thumbnail container in the view from
    #product-image-[ProductID]
    3. Copy the image handler coffee script into a new file for you app.
    Modify the copied function to properly select the correct main image
    container and thumbnail based on the ID.

    I have no experience with the gon gem, but think it's unnecessary for what
    you want to do because it's can be done in plain JS/CS.

    Regards,

    Nate
    On Thursday, March 14, 2013 1:12:54 PM UTC-4, Jameson Trinker wrote:

    Hey Nate,

    Thanks for your response. I got it working, however since it is switching
    the image out on the 'main-image' div when you rollover a thumbnail it
    switches the main image for every large image on the page, so every image
    in the product listing.

    I'm trying to attach <%= product.id %> onto the main-image div inside of
    the coffeescript file. But it's not wanting to take it. I tried including:

    <%= javascript_tag do %>
    window.productID = "<%=j product.id %>";<% end %>


    inside of '_products.html.erb' and then using the 'productID' variable in
    the coffeescript file, but I kept getting a stack level too deep error or
    something else.

    Now I'm trying to using the 'gon gem' but I can't include it. I added it
    to the gemfile, ran bundler, and then inserted '<%= include_gon %>' into
    the head tag but I keep getting a 'undefined local variable or method
    `include_gon' for #<#<Class:0x00000003fa50e8>:0x00000004dba278>'

    error.

    Any ideas on why spree isn't taking gon, or other ways to attach
    product.id to ($ '#main-image') in the js file?

    Thanks, Nate.
    On Thursday, March 14, 2013 7:05:40 AM UTC-5, Nate Lowrie wrote:

    Jameson,

    The functionality you seek is actually being controlled by Javascript.
    See /app/assets/javascripts/store/product.js.coffee for the js that
    controls that rollover functionality. Just by glancing at the js and your
    snippet I see a couple of things to check:


    1. Your main image needs to be wrapped in a div that has an ID of
    main-image
    2. Your thumbnails list tag needs to be wrapped in a div that has an
    ID of #product-images

    Regards,

    Nate
    On Wednesday, March 13, 2013 5:38:31 PM UTC-4, Jameson Trinker wrote:

    I have a show page via the taxons controller and I'm pulling over
    thumbnails based on the product id. I'm listing the thumbnails directly
    below the main image of the displayed product, just like it is on the
    products#show page. When you click the main product image on taxons#show it
    takes you to products#show.

    I would like the ability to rollover the thumbnails on the taxons#show
    page and the main image above changes -- the exact same functionality that
    is default on the products#show page. I tried pulling over ALL the code
    from products/_thumbnails.html.erb but it's not working.

    I did however pull over:

    <!-- BRINGS THUMBNAILS INTO TAXONS PAGE -- PULLED FROM
    _THUMBNAILS.HTML.ERB -->
    <% if (product.images + product.variant_images).uniq.size > 1 %>
    <ul id="product-thumbnails-taxon" class="thumbnails inline"
    data-hook>
    <% product.images.each do |i| %>
    <li class='tmb-all' id='tmb-<%= i.id %>'>
    <%= link_to(image_tag(i.attachment.url(:mini)),
    i.attachment.url(:product), :class => 'tmb-all', :id => "tmb-#{i.id}")
    %>
    </li>
    <% end %>
    </ul>
    <% end %>
    <!-- END THUMBNAILS INTO TAXONS PAGE -->

    to 'shared/_products.html.erb' in order to get the thumbnails to
    display, which worked perfectly Now I just want the ability to hover the
    thumbnails to change the main image.

    I'll attach a screenshot of the taxons#show page where I'm trying to
    get the hover effect working.

    Again, thank you very much for everyone's help. I appreciate this group.
    --
    You received this message because you are subscribed to the Google Groups "Spree" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to spree-user+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Jameson Trinker at Mar 14, 2013 at 9:50 pm
    Hello again,

    I'm sorry to keep bothering you. I'm thinking one of the problems might
    have been that the 'main-image' and 'product-images' divs were ids and not
    classes. I suppose that's why it was unable to iterate through them all. So
    I went ahead and changed them to classes and updated the product.js.coffee
    code to this:

    <%
    paginated_products = @searcher.retrieve_products if params.key?(:keywords)
    paginated_products ||= products
    %>
    <% if products.empty? %>
    <%= t(:no_products_found) %>
    <% elsif params.key?(:keywords) %>
    <h6 class="search-results-title"><%= t(:search_results, :keywords =>
    h(params[:keywords])) %></h6>
    <% end %>
    <div class="product_grid_container">
    <div class="grid_2"><%= image_tag("store/featured/#{@featured}.jpg")
    %></div>
    <% if products.any? %>
    <ul id="products" class="inline product-listing" data-hook>
    <% products.each do |product| %>
    <% if product.on_display? %>
    <div class="grid_1">
    <li id="product_<%= product.id %>" class="columns three <%=
    cycle("alpha", "secondary", "", "omega secondary", :name => "classes") %>"
    data-hook="products_list_item" itemscope
    itemtype="http://schema.org/Product">
    *<div class="main-image" data-productid="<%= product.id %>">*
    * <%= link_to large_image(product, :itemprop => "image", :class =>
    "product-image"), product, :itemprop => 'url' %>*
    * </div><!-- main-image-->*
    * <div class="prod_info_box">*
    * <%= link_to truncate(product.name, :length => 50), product, :class
    => 'info', :itemprop => "name", :title => product.name %>*
    * <span class="price selling" itemprop="price"><%=
    product.price_in(current_currency).display_price %></span>*
    * *
    * <!-- BRINGS THUMBNAILS INTO TAXONS PAGE -- PULLED FROM
    _THUMBNAILS.HTML.ERB -->*
    * <div class="product-images" data-productid="<%= product.id %>">*
    * <% if (product.images + product.variant_images).uniq.size > 1 %>*
    * <ul id="product-thumbnails-taxon" class="thumbnails inline"
    data-hook>*
    * <% product.images.each do |i| %>*
    * <li class='tmb-all' id='tmb-<%= i.id %>'>*
    * <%= link_to(image_tag(i.attachment.url(:mini)),
    i.attachment.url(:product), :class => 'tmb-all', :id => "tmb-#{i.id}") %>*
    * </li>*
    * <% end %>*
    * </ul>*
    * <% end %>*
    * </div><!-- product-images -->*
    * <!-- END THUMBNAILS INTO TAXONS PAGE -->*
    <div id="product-description-taxon">
    <p><%= product.description %></p>
    </div><!-- product-description-taxon -->
    </div><!-- prod_info_box -->
    </li>
    </div>
    <% end %>
    <% end %>
    <% reset_cycle("classes") %>
    </ul>
    <% end %>
    </div><!-- product_grid_container -->
    <% if paginated_products.respond_to?(:num_pages) %>
    <%= paginate paginated_products %>
    <% end %>

    Essentially changing the corresponding #'s to dots. But alas no luck.
    Here's a link if you'd like to
    see. http://pants.telegraphbranding.com/t/women/long-sleeve

    Thanks Nate!
    On Thursday, March 14, 2013 3:08:46 PM UTC-5, Jameson Trinker wrote:

    So would it be:

    div id="main-image-<$= product.id %>">
    and
    div id="product-images-<$= product.id %>"> ?

    If so, how do I pull that ruby object into the coffeescript function? How
    do I attach that to:

    ($ '#main-image') and
    ($ '#main-image img')

    Thanks Nate. I seriously appreciate it.

    Jameson

    On Thursday, March 14, 2013 1:39:34 PM UTC-5, Nate Lowrie wrote:

    Jameson,

    I didn't think about the multiple images. What I would do to get this
    working is:

    1. modify the ID of the main image in the view from #main-image to
    #main-image-[ProductID]
    2. modify the ID of the thumbnail container in the view from
    #product-image-[ProductID]
    3. Copy the image handler coffee script into a new file for you app.
    Modify the copied function to properly select the correct main image
    container and thumbnail based on the ID.

    I have no experience with the gon gem, but think it's unnecessary for
    what you want to do because it's can be done in plain JS/CS.

    Regards,

    Nate
    On Thursday, March 14, 2013 1:12:54 PM UTC-4, Jameson Trinker wrote:

    Hey Nate,

    Thanks for your response. I got it working, however since it is
    switching the image out on the 'main-image' div when you rollover a
    thumbnail it switches the main image for every large image on the page, so
    every image in the product listing.

    I'm trying to attach <%= product.id %> onto the main-image div inside
    of the coffeescript file. But it's not wanting to take it. I tried
    including:

    <%= javascript_tag do %>
    window.productID = "<%=j product.id %>";<% end %>


    inside of '_products.html.erb' and then using the 'productID' variable
    in the coffeescript file, but I kept getting a stack level too deep error
    or something else.

    Now I'm trying to using the 'gon gem' but I can't include it. I added it
    to the gemfile, ran bundler, and then inserted '<%= include_gon %>' into
    the head tag but I keep getting a 'undefined local variable or method
    `include_gon' for #<#<Class:0x00000003fa50e8>:0x00000004dba278>'

    error.

    Any ideas on why spree isn't taking gon, or other ways to attach
    product.id to ($ '#main-image') in the js file?

    Thanks, Nate.
    On Thursday, March 14, 2013 7:05:40 AM UTC-5, Nate Lowrie wrote:

    Jameson,

    The functionality you seek is actually being controlled by Javascript.
    See /app/assets/javascripts/store/product.js.coffee for the js that
    controls that rollover functionality. Just by glancing at the js and your
    snippet I see a couple of things to check:


    1. Your main image needs to be wrapped in a div that has an ID of
    main-image
    2. Your thumbnails list tag needs to be wrapped in a div that has
    an ID of #product-images

    Regards,

    Nate
    On Wednesday, March 13, 2013 5:38:31 PM UTC-4, Jameson Trinker wrote:

    I have a show page via the taxons controller and I'm pulling over
    thumbnails based on the product id. I'm listing the thumbnails directly
    below the main image of the displayed product, just like it is on the
    products#show page. When you click the main product image on taxons#show it
    takes you to products#show.

    I would like the ability to rollover the thumbnails on the taxons#show
    page and the main image above changes -- the exact same functionality that
    is default on the products#show page. I tried pulling over ALL the code
    from products/_thumbnails.html.erb but it's not working.

    I did however pull over:

    <!-- BRINGS THUMBNAILS INTO TAXONS PAGE -- PULLED FROM
    _THUMBNAILS.HTML.ERB -->
    <% if (product.images + product.variant_images).uniq.size > 1
    %>
    <ul id="product-thumbnails-taxon" class="thumbnails inline"
    data-hook>
    <% product.images.each do |i| %>
    <li class='tmb-all' id='tmb-<%= i.id %>'>
    <%= link_to(image_tag(i.attachment.url(:mini)),
    i.attachment.url(:product), :class => 'tmb-all', :id => "tmb-#{i.id}")
    %>
    </li>
    <% end %>
    </ul>
    <% end %>
    <!-- END THUMBNAILS INTO TAXONS PAGE -->

    to 'shared/_products.html.erb' in order to get the thumbnails to
    display, which worked perfectly Now I just want the ability to hover the
    thumbnails to change the main image.

    I'll attach a screenshot of the taxons#show page where I'm trying to
    get the hover effect working.

    Again, thank you very much for everyone's help. I appreciate this
    group.
    --
    You received this message because you are subscribed to the Google Groups "Spree" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to spree-user+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupspree-user @
categoriesrubyonrails
postedMar 13, '13 at 9:38p
activeMar 14, '13 at 9:50p
posts6
users2
websitespreecommerce.com
irc#RubyOnRails

2 users in discussion

Jameson Trinker: 4 posts Nate Lowrie: 2 posts

People

Translate

site design / logo © 2022 Grokbase