MAGETWO-59789: Image Swatch size change not working

- Fix code style

Author: VeronikaYarats

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

@@ -47,6 +47,16 @@ class Configurable extends \Magento\ConfigurableProduct\Block\Product\View\Type\
      */
     const MEDIA_CALLBACK_ACTION = 'swatches/ajax/media';
 
+    /**
+     * Name of swatch image for json config
+     */
+    const SWATCH_IMAGE_NAME = 'swatchImage';
+
+    /**
+     * Name of swatch thumbnail for json config
+     */
+    const SWATCH_THUMBNAIL_NAME = 'swatchThumb';
+
     /**
      * @var Product
      */
@@ -484,10 +494,10 @@ 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'];
+        $sizeConfig[self::SWATCH_IMAGE_NAME]['width'] = $imageConfig[Swatch::SWATCH_IMAGE_NAME]['width'];
+        $sizeConfig[self::SWATCH_IMAGE_NAME]['height'] = $imageConfig[Swatch::SWATCH_IMAGE_NAME]['height'];
+        $sizeConfig[self::SWATCH_THUMBNAIL_NAME]['height'] = $imageConfig[Swatch::SWATCH_THUMBNAIL_NAME]['height'];
+        $sizeConfig[self::SWATCH_THUMBNAIL_NAME]['width'] = $imageConfig[Swatch::SWATCH_THUMBNAIL_NAME]['width'];
 
         return $this->jsonEncoder->encode($sizeConfig);
     }

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

@@ -121,7 +121,7 @@ define([
                                     'background': 'url("' + thumb + '") no-repeat center', //Background case
                                     'background-size': 'initial',
                                     'width': width + 'px',
-                                    'height': height +'px'
+                                    'height': height + 'px'
                                 });
                                 $image.show();
                             } else if (type === 1) {
@@ -516,8 +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;
+                width = _.has(sizeConfig, 'swatchThumb') ? sizeConfig.swatchThumb.width : 110;
+                height = _.has(sizeConfig, 'swatchThumb') ? sizeConfig.swatchThumb.height : 90;
                 label = this.label ? this.label : '';
                 attr =
                     ' id="' + controlId + '-item-' + id + '"' +
@@ -551,8 +551,8 @@ define([
                 } else if (type === 2) {
                     // Image
                     html += '<div class="' + optionClass + ' image" ' + attr +
-                        ' style="background: url(' + value + ') no-repeat center; background-size: initial;width:'
-                        + sizeConfig.swatch_image.width + 'px; height:'+ sizeConfig.swatch_image.height + 'px">' + '' +
+                        ' style="background: url(' + value + ') no-repeat center; background-size: initial;width:' +
+                        sizeConfig.swatchImage.width + 'px; height:' + sizeConfig.swatchImage.height + 'px">' + '' +
                         '</div>';
                 } else if (type === 3) {
                     // Clear