Change srcset on swatch change

Plugin/Swatches/Helper/Data/AppendSrcsetInformationPlugin.php

@@ -0,0 +1,78 @@
+<?php
+
+namespace Fastly\Cdn\Plugin\Swatches\Helper\Data;
+
+use Fastly\Cdn\Model\AdaptivePixelRatio;
+use Fastly\Cdn\Model\Config;
+use Magento\Catalog\Model\Product;
+use Magento\Swatches\Helper\Data;
+
+class AppendSrcsetInformationPlugin
+{
+    private $config;
+    private $adaptivePixelRatio;
+
+    private $pixelRatios = [];
+
+    // \Magento\Swatches\Helper\Data::getAllSizeImages
+    private const IMAGE_SIZES = [
+        'large',
+        'medium',
+        'small',
+    ];
+
+    public function __construct(
+        Config $config,
+        AdaptivePixelRatio $adaptivePixelRatio
+    ) {
+        $this->config = $config;
+        $this->adaptivePixelRatio = $adaptivePixelRatio;
+    }
+
+    public function afterGetProductMediaGallery(Data $subject, array $result, Product $product): array
+    {
+        if (empty($result) || !$this->isPixelRatioEnabled()) {
+            return $result;
+        }
+
+        $result['fastly_srcset'] = $this->buildFastlySrcset($result);
+
+        if (isset($result['gallery']) && is_array($result['gallery'])) {
+            foreach ($result['gallery'] as &$galleryImg) {
+                $galleryImg['fastly_srcset'] = $this->buildFastlySrcset($galleryImg);
+            }
+        }
+
+        return $result;
+    }
+
+    private function buildFastlySrcset(array $images): array
+    {
+        $srcSets = [];
+
+        foreach (self::IMAGE_SIZES as $size) {
+            if (isset($images[$size]) && is_string($images[$size])) {
+                $srcSets[$size] = $this->generateSrcSet($images[$size]);
+            }
+        }
+
+        return $srcSets;
+    }
+
+    private function isPixelRatioEnabled(): bool
+    {
+        return $this->config->isImageOptimizationPixelRatioEnabled()
+            && !empty($this->config->getImageOptimizationRatios());
+    }
+
+    private function generateSrcSet(string $url): string
+    {
+        $pixelRatios = $this->pixelRatios;
+        if (empty($pixelRatios)) {
+            $pixelRatios = $this->config->getImageOptimizationRatios();
+            $this->pixelRatios = $pixelRatios;
+        }
+
+        return implode(', ', $this->adaptivePixelRatio->generateSrcSet($url, $pixelRatios));
+    }
+}

etc/di.xml

@@ -94,4 +94,9 @@
     <type name="Magento\MediaStorage\App\Media">
         <plugin name="fastly_disable_image_generation" type="Fastly\Cdn\Plugin\MediaStorage\App\AroundMedia" />
     </type>
+
+    <type name="Magento\Swatches\Helper\Data">
+        <plugin name="fastly_swatch_ajax_append_srcset"
+                type="Fastly\Cdn\Plugin\Swatches\Helper\Data\AppendSrcsetInformationPlugin" />
+    </type>
 </config>

view/frontend/web/js/swatch-renderer-mixin.js

@@ -7,7 +7,14 @@ define([
     return function (swatchRenderer) {
 
         $.widget('mage.SwatchRenderer', swatchRenderer, {
-
+            lastImageResponse: null,
+
+            imageSizes: [
+                'large',
+                'medium',
+                'small',
+            ],
+
             _init: function () {
                 if (_.isUndefined(this.options) || _.isEmpty(this.options))
                         return this._super();
@@ -33,9 +40,75 @@ define([
                 });
 
                 return this._super();
+            },
+
+            _ProductMediaCallback: function ($this, response, isInProductView) {
+                this.lastImageResponse = response;
+                return this._super($this, response, isInProductView);
+            },
+
+            updateBaseImage: function (images, context, isInProductView) {
+                this._super(images, context, isInProductView);
+                if (isInProductView || !this.lastImageResponse) {
+                    return;
+                }
+
+                var currentSrc = context.find('.product-image-photo').attr('src');
+                if (!currentSrc) {
+                    return;
+                }
+
+                var srcset = this.findEquivalentSrcset(currentSrc);
+                if (srcset) {
+                    context.find('.product-image-photo').attr('srcset', srcset);
+                }
+            },
+
+            findEquivalentSrcset: function (src) {
+                if (!this.lastImageResponse || !this.lastImageResponse.fastly_srcset) {
+                    return null;
+                }
+
+                var srcset = this.findSrcsetInImageResponse(src, this.lastImageResponse);
+                if (srcset) {
+                    return srcset;
+                }
+
+                var gallery = this.lastImageResponse.gallery;
+                if (!gallery) {
+                    return null;
+                }
+
+                for (var i in gallery) {
+                    if (!gallery.hasOwnProperty(i)) {
+                        continue;
+                    }
+
+                    srcset = this.findSrcsetInImageResponse(src, gallery[i]);
+                    if (srcset) {
+                        return srcset;
+                    }
+                }
+
+                return null;
+            },
+
+            findSrcsetInImageResponse: function (src, list) {
+                if (!list.fastly_srcset) {
+                    return null;
+                }
+
+                for (var i = 0; i < this.imageSizes.length; i++) {
+                    var size = this.imageSizes[i];
+                    if (list[size] && list[size] === src) {
+                        return list.fastly_srcset[size];
+                    }
+                }
+
+                return null;
             }
         });
 
         return $.mage.SwatchRenderer;
     };
-});
+});