MAGETWO-96594: Image Position issue with Associated Products

Author: Sergey Shvets

app/code/Magento/Swatches/Controller/Ajax/Media.php

@@ -52,6 +52,7 @@ public function __construct(
      * Get product media for specified configurable product variation
      *
      * @return string
+     * @throws \Magento\Framework\Exception\LocalizedException
      */
     public function execute()
     {

app/code/Magento/Swatches/Helper/Data.php

@@ -5,9 +5,9 @@
  */
 namespace Magento\Swatches\Helper;
 
+use Magento\Catalog\Api\Data\ProductAttributeMediaGalleryEntryInterface;
 use Magento\Catalog\Api\Data\ProductInterface as Product;
 use Magento\Catalog\Api\ProductRepositoryInterface;
-use Magento\Catalog\Helper\Image;
 use Magento\Catalog\Model\Product as ModelProduct;
 use Magento\Catalog\Model\Product\Image\UrlBuilder;
 use Magento\Catalog\Model\ResourceModel\Eav\Attribute;
@@ -324,35 +324,61 @@ private function addFilterByParent(ProductCollection $productCollection, $parent
      * @param ModelProduct $product
      *
      * @return array
+     * @throws \Magento\Framework\Exception\LocalizedException
      */
-    public function getProductMediaGallery(ModelProduct $product)
+    public function getProductMediaGallery(ModelProduct $product): array
     {
         $baseImage = null;
         $gallery = [];
 
         $mediaGallery = $product->getMediaGalleryEntries();
+        /** @var ProductAttributeMediaGalleryEntryInterface $mediaEntry */
         foreach ($mediaGallery as $mediaEntry) {
             if ($mediaEntry->isDisabled()) {
                 continue;
             }
-
-            if (in_array('image', $mediaEntry->getTypes(), true) || !$baseImage) {
-                $baseImage = $mediaEntry->getFile();
+            if (!$baseImage || $this->isMainImage($mediaEntry)) {
+                $baseImage = $mediaEntry;
             }
 
-            $gallery[$mediaEntry->getId()] = $this->getAllSizeImages($mediaEntry->getFile());
+            $gallery[$mediaEntry->getId()] = $this->collectImageData($mediaEntry);
         }
 
         if (!$baseImage) {
             return [];
         }
 
-        $resultGallery = $this->getAllSizeImages($baseImage);
+        $resultGallery = $this->collectImageData($baseImage);
         $resultGallery['gallery'] = $gallery;
 
         return $resultGallery;
     }
 
+    /**
+     * Checks if image is main image in gallery
+     *
+     * @param ProductAttributeMediaGalleryEntryInterface $mediaEntry
+     * @return bool
+     */
+    private function isMainImage(ProductAttributeMediaGalleryEntryInterface $mediaEntry): bool
+    {
+        return in_array('image', $mediaEntry->getTypes(), true);
+    }
+
+    /**
+     * Returns image data for swatches
+     *
+     * @param ProductAttributeMediaGalleryEntryInterface $mediaEntry
+     * @return array
+     */
+    private function collectImageData(ProductAttributeMediaGalleryEntryInterface $mediaEntry): array
+    {
+        $image = $this->getAllSizeImages($mediaEntry->getFile());
+        $image[ProductAttributeMediaGalleryEntryInterface::POSITION] =  $mediaEntry->getPosition();
+        $image['isMain'] =$this->isMainImage($mediaEntry);
+        return $image;
+    }
+
     /**
      * Get all size images
      *

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

@@ -684,11 +684,21 @@ define([
                 if (!images) {
                     images = this.options.mediaGalleryInitial;
                 }
-
-                this.updateBaseImage(images, $main, !this.inProductList);
+                this.updateBaseImage(this._sortImages(images), $main, !this.inProductList);
             }
         },
 
+        /**
+         * Sorting images array
+         *
+         * @private
+         */
+        _sortImages: function (images) {
+            return _.sortBy(images, function (image) {
+                return (image.isMain === true) ? -1 : image.position;
+            });
+        },
+
         /**
          * Event for swatch options
          *