MAGETWO-59789: Image Swatch size change not working

- Add swatch image config size

Author: VeronikaYarats

app/code/Magento/Swatches/Block/Product/Renderer/Configurable.php

@@ -473,4 +473,22 @@ public function getIdentities()
             return [];
         }
     }
+
+    /**
+     * Get Swatch image size config data.
+     *
+     * @return string
+     */
+    public function getJsonSwatchSizeConfig()
+    {
+        $imageConfig = $this->swatchMediaHelper->getImageConfig();
+        $sizeConfig = [];
+
+        $sizeConfig[Swatch::SWATCH_IMAGE_NAME]['width'] = $imageConfig[Swatch::SWATCH_IMAGE_NAME]['width'];
+        $sizeConfig[Swatch::SWATCH_IMAGE_NAME]['height'] = $imageConfig[Swatch::SWATCH_IMAGE_NAME]['height'];
+        $sizeConfig[Swatch::SWATCH_THUMBNAIL_NAME]['height'] = $imageConfig[Swatch::SWATCH_THUMBNAIL_NAME]['height'];
+        $sizeConfig[Swatch::SWATCH_THUMBNAIL_NAME]['width'] = $imageConfig[Swatch::SWATCH_THUMBNAIL_NAME]['width'];
+
+        return $this->jsonEncoder->encode($sizeConfig);
+    }
 }

app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml

@@ -18,7 +18,9 @@
                     echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
                 "mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>",
                 "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
-                    'Magento_ConfigurableProduct') ?: 'replace'; ?>"
+                    'Magento_ConfigurableProduct') ?: 'replace'; ?>",
+                "jsonSwatchImageSizeConfig": <?php /* @escapeNotVerified */
+                    echo $block->getJsonSwatchSizeConfig() ?>
             }
         },
         "*" : {

app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js

@@ -67,6 +67,8 @@ define([
      *  - option-label (string)
      *  - option-tooltip-thumb
      *  - option-tooltip-value
+     *  - thumb-width
+     *  - thumb-height
      */
     $.widget('mage.SwatchRendererTooltip', {
         options: {
@@ -86,6 +88,8 @@ define([
                 label = $this.attr('option-label'),
                 thumb = $this.attr('option-tooltip-thumb'),
                 value = $this.attr('option-tooltip-value'),
+                width = $this.attr('thumb-width'),
+                height = $this.attr('thumb-height'),
                 $image,
                 $title,
                 $corner;
@@ -115,7 +119,9 @@ define([
                                 // Image
                                 $image.css({
                                     'background': 'url("' + thumb + '") no-repeat center', //Background case
-                                    'background-size': 'initial'
+                                    'background-size': 'initial',
+                                    'width': width + 'px',
+                                    'height': height +'px'
                                 });
                                 $image.show();
                             } else if (type === 1) {
@@ -476,6 +482,7 @@ define([
         _RenderSwatchOptions: function (config, controlId) {
             var optionConfig = this.options.jsonSwatchConfig[config.id],
                 optionClass = this.options.classes.optionClass,
+                sizeConfig = this.options.jsonSwatchImageSizeConfig,
                 moreLimit = parseInt(this.options.numberToShow, 10),
                 moreClass = this.options.classes.moreButton,
                 moreText = this.options.moreButtonText,
@@ -492,6 +499,8 @@ define([
                     value,
                     thumb,
                     label,
+                    width,
+                    height,
                     attr;
 
                 if (!optionConfig.hasOwnProperty(this.id)) {
@@ -507,6 +516,8 @@ define([
                 type = parseInt(optionConfig[id].type, 10);
                 value = optionConfig[id].hasOwnProperty('value') ? optionConfig[id].value : '';
                 thumb = optionConfig[id].hasOwnProperty('thumb') ? optionConfig[id].thumb : '';
+                width = sizeConfig.swatch_thumb.width;
+                height = sizeConfig.swatch_thumb.height;
                 label = this.label ? this.label : '';
                 attr =
                     ' id="' + controlId + '-item-' + id + '"' +
@@ -519,7 +530,9 @@ define([
                     ' aria-label="' + label + '"' +
                     ' option-tooltip-thumb="' + thumb + '"' +
                     ' option-tooltip-value="' + value + '"' +
-                    ' role="option"';
+                    ' role="option"' +
+                    ' thumb-width="' + width + '"' +
+                    ' thumb-height="' + height + '"';
 
                 if (!this.hasOwnProperty('products') || this.products.length <= 0) {
                     attr += ' option-empty="true"';
@@ -538,7 +551,8 @@ define([
                 } else if (type === 2) {
                     // Image
                     html += '<div class="' + optionClass + ' image" ' + attr +
-                        ' style="background: url(' + value + ') no-repeat center; background-size: initial;">' + '' +
+                        ' style="background: url(' + value + ') no-repeat center; background-size: initial;width:'
+                        + sizeConfig.swatch_image.width + 'px; height:'+ sizeConfig.swatch_image.height + 'px">' + '' +
                         '</div>';
                 } else if (type === 3) {
                     // Clear