2

I am looking for advice on a good color swatch extension.

  1. My products are apparel (tshirts) and are setup as configurable products, with three attributes - color, size and gender.
  2. The customer should be able to use the swatches to configure the product in BOTH the category and product pages.
  3. Selecting a color swatch must change the product image to show the image associated with the simple product. This needs to happen on both the category and product pages.

There are lots of extensions out there, and I am not sure which one to choose. Any pointers would be welcome! Thanks!

2

I can recommend you this extension. It works only for the product details page, but I think half of a solution is better than no solution.
The extension can replace the standard dropdowns with labels or simple product images.

| improve this answer | |
2

I've used the Amasty extension for this on a site http://amasty.com/color-swatches-pro.html

They have a demo page for the category page here (click on the image under the dress) http://demo.amasty.com/csp-css/demo-products.html?d2si=63603

I found it works quite well.

| improve this answer | |
1

Try the aheadWorks extension: Product Color Swatches

It works for both product and category pages. Hope that helps.

| improve this answer | |
1
if you are using custom theme then make file (renderer.phtml) in Magento_Swatches\templates\product\view\

i.e.: Magento_Swatches\templates\product\view\renderer.phtml

    and paste below code (only for magento 2.1.0)


    <div class="swatch-opt" data-role="swatch-options"></div>
    <script>
        require(["jquery", "jquery/ui", "Magento_Swatches/js/swatch-renderer"], function ($) {
            var oJsonConfig = <?php echo $block->getJsonConfig(); ?>;
            $('.swatch-opt').SwatchRenderer({                    
                jsonConfig: <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
                jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
                mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
            });
        $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function() {
        // NOTE: Using .one() instead of .on() to prevent duplicate bindings.
        $('.fotorama').one('fotorama:ready', function(e, fotorama, extra) {
          // Update product images faster when clicking on color swatch
          $('.swatch-option.color').click(function() {        
            var sOptionId = this.getAttribute('option-id');
            for (var attributeId in oJsonConfig.attributes) {
              console.log(oJsonConfig);
              var oAttribute = oJsonConfig.attributes[attributeId];
              if (oAttribute.code==='color') {
                for (var i=0; i<oAttribute.options.length; ++i) {
                  var oOption = oAttribute.options[i];
                  if (oOption.id===sOptionId) {
                    // Gather images
                    var aImages = oJsonConfig.images[oOption.products[0]],
                      aFotoramaImages = [];
                    for (var j=0; j<aImages.length; ++j) {
                      if (aImages[j].isMain) {
                        // Main image (first position)
                        aFotoramaImages[0] = {
                          full: aImages[j].full,
                          img: aImages[j].img,
                          thumb: aImages[j].thumb
                        };
                      } else {
                        // Subsequent images
                        aFotoramaImages[aImages[j].position] = {
                          full: aImages[j].full,
                          img: aImages[j].img,
                          thumb: aImages[j].thumb
                        };
                      }
                    }
                    // Load images into Fotorama
                    // API reference: http://fotorama.io/customize/api/
                    fotorama.load(aFotoramaImages);
                    break;
                  }
                }
                break;
              }
            }
          });

        });
      });
    });
    </script>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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