MAGETWO-96593: Image Position issue with Associated Products

Author: nikita-shcherbatykh

app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js

@@ -291,6 +291,8 @@ define([
             images = this.options.spConfig.images[this.simpleProduct];
 
             if (images) {
+                images = this._sortImages(images);
+
                 if (this.options.gallerySwitchStrategy === 'prepend') {
                     images = images.concat(initialImages);
                 }
@@ -309,7 +311,17 @@ define([
                 $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
             }
 
-            galleryObject.first();
+        },
+
+        /**
+         * Sorting images array
+         *
+         * @private
+         */
+        _sortImages: function (images) {
+            return _.sortBy(images, function (image) {
+                return image.position;
+            });
         },
 
         /**

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

@@ -44,6 +44,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

@@ -6,6 +6,7 @@
 
 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;
@@ -311,37 +312,64 @@ 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 = $mediaEntry->getFile();
+            if (!$baseImage || $this->isMainImage($mediaEntry)) {
+                $baseImage = $mediaEntry;
             } elseif (!$baseImage) {
                 $baseImage = $mediaEntry->getFile();
             }
 
-            $gallery[$mediaEntry->getId()] = $this->getAllSizeImages($product, $mediaEntry->getFile());
+            $gallery[$mediaEntry->getId()] = $this->collectImageData($mediaEntry);
         }
 
         if (!$baseImage) {
             return [];
         }
 
-        $resultGallery = $this->getAllSizeImages($product, $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;
+    }
+
     /**
      * @param ModelProduct $product
      * @param string $imageFile

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

@@ -685,10 +685,21 @@ define([
                     images = this.options.mediaGalleryInitial;
                 }
 
-                this.updateBaseImage(images, $main, !this.inProductList, eventName);
+                this.updateBaseImage(this._sortImages(images), $main, !this.inProductList);
             }
         },
 
+        /**
+         * Sorting images array
+         *
+         * @private
+         */
+        _sortImages: function (images) {
+            return _.sortBy(images, function (image) {
+                return image.position;
+            });
+        },
+
         /**
          * Event for swatch options
          *
@@ -1252,9 +1263,6 @@ define([
                         dataMergeStrategy: this.options.gallerySwitchStrategy
                     });
                 }
-
-                gallery.first();
-
             } else if (justAnImage && justAnImage.img) {
                 context.find('.product-image-photo').attr('src', justAnImage.img);
             }

lib/web/mage/gallery/gallery.js

@@ -472,8 +472,18 @@ define([
                      * @param {Array.<Object>} data - Set of gallery items to update.
                      */
                     updateData: function (data) {
+                        var mainImageIndex;
+
                         if (_.isArray(data)) {
                             settings.fotoramaApi.load(data);
+                            mainImageIndex = getMainImageIndex(data);
+
+                            if (mainImageIndex) {
+                                settings.fotoramaApi.show({
+                                    index: mainImageIndex,
+                                    time: 0
+                                });
+                            }
 
                             $.extend(false, settings, {
                                 data: data,