Variable Product Image Problem - Again « Support Forum | Kriesi.at

Support Forum » Propulsion

Variable Product Image Problem - Again

4 posts from 3 voices

Started 2 months ago by PearlsIntl
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

PearlsIntl
Member

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!!

Posted 2 months ago #

Dude
Dude

Hi,
open up propulsion\config-woocommerce\woocommerce-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+x\d+./, ".") == imgscr.replace(/-\d+x\d+./, ".")){
                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);
                }

            }

        });
    }
}

Posted 2 months ago #

PearlsIntl
Member

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

Posted 2 months ago #
Ismael
Moderator

Hey,

Glad Dude fixed it. :)

Regards,
Ismael

Posted 2 months ago #