Foxy Forum Status

We're no longer responding to questions via our forum, but we will keep it up for historical reasons. If you can't find the answer you're looking for, please visit our knowledge base or contact us. If there's enough interest in the future, we may bring the forum back.

Variation thumbnail images not changing in cart (using FoxyShop plugin)

visualpeoplevisualpeople Member
in Help edited January 2014
I'm nearly certain this is a FoxyShop issue but thought I would post here because, well, you never know. I know @sparkweb has been known to contribute often here...

We have a site with products that have a lot of color variations -- each has its own photo that changes based on your selection, or vice versa.

However, when you add the item to the (Foxy)Cart it always shows the "default" image. (so you choose the pink lure and it still always shows the "firetiger" one in the cart)

An example page is here: http://www.llungenlures.com/products/dc-9/

It becomes more of an issue when a customer orders two variations of the same lure -- they look exactly the same in the cart and people get confused and think the cart isn't working right.

So, is this a FoxyCart issue? (ie. can a single product only provide one thumbnail) or is it just a little customization I need to do with FoxyShop? I can't quite figure out what I'd need to change to get it to work, though I suspect it's easier than I'm making it out to be in my head.

Thanks in advance for any help.

- Ryan
Tagged:
Comments
  • winstonwinston FoxyCart Team
    @visualpeople

    So it looks like your form only has the default image like this:
    <input type="hidden" name="image||ca04c3f34de88e5ad0e29d46e96540de445b8f2c42046625e782d3c2cd4482b3||open" value="http://www.llungenlures.com/wp-content/uploads/2013/09/DC-9-Firetiger-150x150.jpg"; id="foxyshop_cart_product_image_55">
    

    I didn't dig into what your js looks like to change the option based on clicking the picture, but what you should be able to do is just swap out the value of that input when you're updating the select box. Since that input is an open input, you shouldn't encounter any issues changing the value.
  • Awesome. Thanks Winston! I'll give that a try.
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    Hi Ryan,

    Yeah, this is definitely a FoxyShop thing. Thanks for checking in.

    I had to spend a while looking at this, but the issue can be fixed in js/variation.process.jquery.js. Add this after line 150:
    $("#foxyshop_cart_product_image_" + current_product_id).val(ikey[new_ikey][1]);
    

    So to be clear, that whole section should look like this:
    //Cloud-zoom
    			if (typeof window.foxyshop_cloudzoom_image_change == 'function') {
    				foxyshop_cloudzoom_image_change(new_ikey);
    				$("#foxyshop_cart_product_image_" + current_product_id).val(ikey[new_ikey][1]);
    

    The issue was that it was updating the hidden product image value for regular products but not for cloudzoom products. I'll make this change in core.

    Thanks for letting me know. Nice site....
  • That works awesome! Thanks so much.

    But (there's always a but, isn't there? ...)

    I have this little script at the top of my foxyshop-single-product.php template that makes the select menu change to match the thumbnail you click on:
    <script>
    jQuery(document).ready(function() {
        jQuery('ul.foxyshop_slideshow a.cloud-zoom-gallery').click(function() {
            /*
             * get the ikey
             */
    
            var thumbnail_elm_id = jQuery(this).attr('id').trim();
            if( thumbnail_elm_id == '' ) { return true; }
            
            var ikey_id_matches = thumbnail_elm_id.match(/([0-9]+)$/);
            if( ikey_id_matches.length == 0 ) { return true; }
    
            var ikey_id = ikey_id_matches[0].trim();
    	if( ikey_id == '' ) { return true; }
    
            /*
             * select the associated entry
             */
    
            jQuery("select.variation-color option[imagekey='" + ikey_id + "']").attr('selected', true);
    
    	return true;
        });
    });
    </script>
    

    And with that there, (or at least the last jQuery("select.... line) I still get the old behavior of only one photo showing. If I comment that line out, it all works as it should. I'm guessing I'm just stepping on something I shouldn't be with my javascript?
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    Why don't you also try triggering a change:
    jQuery("select.variation-color option[imagekey='" + ikey_id + "']").attr('selected', true).trigger('change');
    
  • Hmm...

    No, triggering the change doesn't fix it (and in addition breaks the cloudzoom, for some reason, too.)
  • jbricejbrice Member
    This thread is old but it gave me the solution I needed, so I thought I'd say what fixed it for me:

    I used visualpeople's script so that clicking a variation thumbnail image refreshes the other product info (selection box choice, and price, etc.).

    I also did what sparkweb suggested which is to trigger a change. Like below (of course using your variation name instead of variation-color):
    jQuery("select.variation-color option[imagekey='" + ikey_id + "']").attr('selected', true).change();

    Then I updated js/variation.process.jquery.js per sparkweb's suggestion, which causes the correct variation image to appear in the cart :
    //Cloud-zoom
    if (typeof window.foxyshop_cloudzoom_image_change == 'function') {
    // foxyshop_cloudzoom_image_change(new_ikey);
    $("#foxyshop_cart_product_image_" + current_product_id).val(ikey[new_ikey][1]);

    However, notice the line of code I commented out. That line was causing an infinite loop, because inside the function it triggers another image.click() event. Having it like above worked successfully for me. It accomplished the two goals of (1) refresh all the main product info when user clicks a thumbnail image, and (2) show the correct variation image in the cart.
Sign In or Register to comment.