4

I am experiencing some problems with my configurable swatches. I have set up a configurable product with 2 different attributes(color & size) with 1 configurable swatch being the color.

EXAMPLE

The base image is a red shirt. When I select a blue shirt it changes the image from red to blue as it is supposed to, but when I select a different size it changes back to the base image..

I've found a way to resolve this by adding a picture for every simple Item, but I have over 200 simple items and I would like to know if there is a faster way to fix this.

1
  • Did you ever solve this problem? I am facing the same problem now and it looks like there are no quick fixes available?
    – K.I
    Nov 15, 2016 at 10:08

3 Answers 3

2

If you only have two configurable attributes; go to the configurable product page on the backend > associated products tab > slide the color attribute to the top. enter image description here

The way configurable works is that every time you change the top attribute resets other attributes to only show the options that are available according to inventory and availability rules that still apply to possible combination of attributes. Since color is the only visual change on the product options moving it to the top will make the cascading affect dependent of the color.

Note that there is another a little more complicated solution, but I only recommend it if this first one doesn't work or if you have more than 2 configurable attributes, as it becomes more complicated to achieve, specially if you are controlling inventory and combinations of product are very different from each other.

1
  • Hi Goku, thanks for your help. I've tried this method but it didn't work for me. If you have a look at the website I'm talking about you can see that the image still changes to the base image when a size is selected : revro2wielers.nl/shop/kleding/booster-kevlar-hoodie.html
    – Jeff
    Jun 23, 2015 at 11:32
2

You could try to upgrade to 1.9.3.0 because there are several bug fixes available in this version for the colorswatches. One of the bug fixes is loads by the correct image.

1

Facing with the same problem, today I wrote the following fix, it works both with attribute selectors and configurable swatches.

$j(document).ready(function() {
    if (typeof ConfigurableMediaImages === 'undefined' || typeof optionsPrice === 'undefined' || typeof Product === 'undefined') return;

    /**
     * Returns true, if there is a label-matching image on config product for the selected option's label
     * @param el
     * @returns {boolean}
     */
    var matchingImageExists = function(el) {
        // copy from product-media.js:150-152
        var select = $j(el);
        var label = select.find('option:selected').attr('data-label');
        var productId = optionsPrice.productId; //get product ID from options price object

        // the inspection, based on product-media.js:94
        return ConfigurableMediaImages.productImages[productId]['option_labels'][label]['configurable_product'][ConfigurableMediaImages.imageType];
    };

    // activation for attribute selectors (selectors as used in product-media.js:175)
    $j('.product-options .super-attribute-select')
        .off('change', ConfigurableMediaImages.updateImage(this))
        .on('change', function() { if (matchingImageExists(this)) { ConfigurableMediaImages.updateImage(this); } });

    // activation for swatches (overriding Product.ConfigurableSwatches.prototype.updateSelect method in swatches-product.js:722)
    Product.ConfigurableSwatches.prototype.updateSelect = function(attr) {
        // fire select change event
        // this will trigger the validation of the select
        // only fire if this attribute has had a selected option at one time
        if (attr._e.selectedOption !== false && attr._e.optionSelect) {
            this._F.nativeSelectChange = false;
            if (matchingImageExists(attr._e.optionSelect)) ConfigurableMediaImages.updateImage(attr._e.optionSelect);
            this.productConfig.handleSelectChange(attr._e.optionSelect);
            this._F.nativeSelectChange = true;
        };
    }
});

You can include it in a separate JS, so don't need to modify any of the core files.

matchingImageExists() checks, whether there's an image set in the configurable product with the selected option.

In the last two blocks we are overriding the core attribute selector event handler and the Product.ConfigurableSwatches.prototype.updateSelect method for placing the matchingImageExists() control, so we let Magento change the product images only in that case if a label-matching image exists on config product for the selected option's label.

Hope it'll help you. Please notify in case of bugs as I'll use this fix in my shop as well.

2
  • (Magenta Version 1.9.2) - I've added this script and it's not stopping other option selections from changing the image - Nothing has changed. - I’ve added a javascript alert to test if it’s functioning when you select an option and it fires off the alert each time I select something - so the script is being implemented - It’s just not effecting any change to the current behaviour. - On a positive note I now know a really good practice of how to override a Javascript function in Magento. - Thanks
    – Nicolas
    Mar 26, 2016 at 11:15
  • Did I have to edit the code somewhere to match the Color option dropdown somewhere?
    – Nicolas
    Mar 26, 2016 at 11:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.