3

I recently upgraded my Magento version from 2.1.9 to 2.3.3, after upgrade everything is working fine else the changing of configurable swatches.

On changing the configurable swatches product image is not changing and the Ajax in network is returning a 404 (it should have returned a json with image URLs).

https://magentodomain.com/swatches/ajax/media/

This is the Ajax that is returning to 404.

Any idea ?

3
  • I got the same error. If you have any solution please share. Thanks. Aug 6 '20 at 12:48
  • I got to fix that by removing customization done in swatch-rendere.js in my custom theme. May be you can replace that with the current core and give that a try. Aug 8 '20 at 0:16
  • What I exactly do? Please explain briefly. Aug 10 '20 at 5:00
0

Stumbling upon the very same issue, after upgrading a Magento 2.1.6 installation to 2.3.5, was able to retrace the cause. As stated by @Narendra Vyas, make sure every rewrite (for example, custom theme), mixing or similar implementation changes of the JS core file Magento_Swatches/web/js/swatch-renderer.js is matching the one of the Magento version you upgraded to.

Note: file web/js/swatch-renderer.js, in the Magento_Swatches core module, was moved from view/frontend to view/base since version 2.3.4. See commit a93def11 in the GitHub repository.

Creating a diff between Magento versions 2.1.6 and 2.3.5 of the core JS file (web/js/swatch-renderer.js) generated next result:

            mediaCallData = {
-                'product_id': productId,
-                'attributes': attributes,
-                'additional': $.parseQuery()
+                'product_id': this.getProduct()
             };
+
             mediaCacheKey = JSON.stringify(mediaCallData);

             if (mediaCacheKey in $widget.options.mediaCache) {
+                $widget._XhrKiller();
+                $widget._EnableProductMediaLoader($this);
                 mediaSuccessCallback($widget.options.mediaCache[mediaCacheKey]);
             } else {
                 mediaCallData.isAjax = true;
                 $widget._XhrKiller();
                 $widget._EnableProductMediaLoader($this);
-                $widget.xhr = $.post(
-                    $widget.options.mediaCallback,
-                    mediaCallData,
-                    mediaSuccessCallback,
-                    'json'
-                ).done(function () {
+                $widget.xhr = $.ajax({
+                    url: $widget.options.mediaCallback,
+                    cache: true,
+                    type: 'GET',
+                    dataType: 'json',
+                    data: mediaCallData,
+                    success: mediaSuccessCallback
+                }).done(function () {
                     $widget._XhrKiller();
                 });
             }

Key differences are:

  • mediaCallData no longer passes the selected attribute options. Calculation of resulting simple product id is done in the JS code and passed directly to the swatches/ajax/media controller. See commit 71398adc.
  • swatches/ajax/media controller now only accepts GET requests, being the root cause to the original POST request returning a 404 and no longer working after the upgrade. Updating HTTP method to GET in the XHR call resolves the 404.

Once the swatches media requests / related swatch renderer JS snippet were updated, swatch image reloading upon changing product options started working again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.