Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #21493

    Hi all–

    I need some help troubleshooting a problem I have with images not changing when a variation is selected. It was doing fine until I updated Woocommerce and updated to the most recent version of Propulsion.

    Here is an example of the issue.

    http://www.pearlsinternational.com/shop/blue-freshwater-pearl-pendant-2/

    Essentially when you select a pearl color under the item, I want it to change the image to match that color. All of the variations have the appropriate image attached to them and they are also all included in the product image slideshow. Like I said, this was working fine until the update. :(

    I have already followed the instructions on these threads:

    http://www.kriesi.at/support/topic/change-photo-when-change-product-variation

    http://www.kriesi.at/support/topic/firebug-error-product-variations

    Additionally, I have my thumbnail image container hidden (on purpose- http://www.kriesi.at/support/topic/invisible-variations-images) using the following in css/custom.css:

    .single-product .thumbnails_container{

    display: none !important;

    }

    Because thumbnails are not visible and selecting a variation is not changing the image as it should, customers are unable to view the correct product.

    What changed to cause this to stop working? How do I fix it?

    Thanks!!

    #112033

    Hi,

    open up propulsionconfig-woocommercewoocommerce-mod.js and replace the code after following line:

    /* Bildanpassung bei Variationen */

    with:

    /* Bildanpassung bei Variationen */
    jQuery(document).ready(function($) {
    variation_adjustment('.variations select');
    });

    function variation_adjustment(select_el)
    {
    var selects = jQuery(select_el);

    //unify select dropdowns
    selects.each(function()
    {
    var el = jQuery(this);

    change_variation_image();

    el.on('change', function()
    {
    setTimeout(function(){
    change_variation_image();
    }, 100);
    });

    });
    }

    function change_variation_image()
    {
    var currentVariationId = jQuery('.single_variation_wrap .variations_button input[name="variation_id"]').val(),
    productid = jQuery('form.variations_form').data('product_id'),
    variationsdata = jQuery('form.variations_form').data('product_variations');

    if ( !productid || !currentVariationId ) return;

    var currentvariation = variationsdata.filter(function (currentvariation) { return currentvariation.variation_id == currentVariationId });

    if(typeof currentvariation[0] == "undefined" || !currentvariation[0]) return;

    var imglink = currentvariation[0].image_link;

    if(imglink){
    jQuery('.slideshow li a img').each(function()
    {
    var imgscr = jQuery(this).attr("src");

    if(imglink == imgscr || imglink.replace(/-d+xd+./, ".") == imgscr.replace(/-d+xd+./, ".")){
    var index = jQuery(this).parents('li').index();
    var container = jQuery(this).parents('.slideshow_container');

    if (index != 0){
    container.find('.slideshow li a:eq(0)').css( "display", "none" );
    }

    var controls = container.next('.thumbnails_container'),
    thumbs = controls.find('.slideThumb');

    thumbs.removeClass('activeslideThumb');
    var current = jQuery('.numeric_controls a:eq('+index+')').addClass('activeslideThumb');
    container.find('.numeric_controls a:eq('+index+')').trigger('click');

    if (index != 0){
    setTimeout(function(){
    container.find('.slideshow li a:eq(0)').css( "display", "block" );
    }, 1500);
    }

    }

    });
    }
    }

    #112034

    Perfect, worked like a charm! Thanks for the quick response!

    #112035

    Hey,

    Glad Dude fixed it. :)

    Regards,

    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Variable Product Image Problem – Again’ is closed to new replies.