Stop simple product images overriding main product gallery after clicking swatchesLink configurable swatches to appropriate simple productChange More product images on color swatch selectSimple product images on product page, search/category and basket pagesConfigurable swatches on category page showing Out Of Stock ProductsSwatches update gallery but only with the first productSimple product images in cartConfigurable Products: Update Media Gallery - Not Just Base ImageProduct gallery disappear after page loadHide Configurable product images from details page when color swatch is selectedConfigurable product doesn't show simple product images

How to stop co-workers from teasing me because I know Russian?

How to have a sharp product image?

How can I practically buy stocks?

If a planet has 3 moons, is it possible to have triple Full/New Moons at once?

How much cash can I safely carry into the USA and avoid civil forfeiture?

Critique of timeline aesthetic

Can someone publish a story that happened to you?

How do I deal with a coworker that keeps asking to make small superficial changes to a report, and it is seriously triggering my anxiety?

What happens to Mjolnir (Thor's hammer) at the end of Endgame?

Aligning equation numbers vertically

On The Origin of Dissonant Chords

Does tea made with boiling water cool faster than tea made with boiled (but still hot) water?

Why did C use the -> operator instead of reusing the . operator?

Don’t seats that recline flat defeat the purpose of having seatbelts?

Is it idiomatic to construct against `this`

How to display Aura JS Errors Lightning Out

What are the steps to solving this definite integral?

How could Tony Stark make this in Endgame?

Checks user level and limit the data before saving it to mongoDB

Extension of 2-adic valuation to the real numbers

How to pronounce 'c++' in Spanish

Should the Death Curse affect an undead PC in the Tomb of Annihilation adventure?

What's the name of these pliers?

Classification of surfaces



Stop simple product images overriding main product gallery after clicking swatches


Link configurable swatches to appropriate simple productChange More product images on color swatch selectSimple product images on product page, search/category and basket pagesConfigurable swatches on category page showing Out Of Stock ProductsSwatches update gallery but only with the first productSimple product images in cartConfigurable Products: Update Media Gallery - Not Just Base ImageProduct gallery disappear after page loadHide Configurable product images from details page when color swatch is selectedConfigurable product doesn't show simple product images






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0















I've upgraded from 2.1.9 to 2.2.3. Now on a configurable product page when a swatch is selected the product page gallery images get overridden by the simple product image for each swatch.



This didn't used to happen and I can't find a way to stop this behaviour. I only want the configurable product images to show as in the past. I actually only have thumbnails associated with simple products to show at the checkout.










share|improve this question






























    0















    I've upgraded from 2.1.9 to 2.2.3. Now on a configurable product page when a swatch is selected the product page gallery images get overridden by the simple product image for each swatch.



    This didn't used to happen and I can't find a way to stop this behaviour. I only want the configurable product images to show as in the past. I actually only have thumbnails associated with simple products to show at the checkout.










    share|improve this question


























      0












      0








      0








      I've upgraded from 2.1.9 to 2.2.3. Now on a configurable product page when a swatch is selected the product page gallery images get overridden by the simple product image for each swatch.



      This didn't used to happen and I can't find a way to stop this behaviour. I only want the configurable product images to show as in the past. I actually only have thumbnails associated with simple products to show at the checkout.










      share|improve this question
















      I've upgraded from 2.1.9 to 2.2.3. Now on a configurable product page when a swatch is selected the product page gallery images get overridden by the simple product image for each swatch.



      This didn't used to happen and I can't find a way to stop this behaviour. I only want the configurable product images to show as in the past. I actually only have thumbnails associated with simple products to show at the checkout.







      configurable-product magento2.2 simple-product swatches gallery






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Apr 18 '18 at 10:16









      Mukesh Prajapati

      1,251416




      1,251416










      asked Apr 18 '18 at 10:00









      SilkSpinSilkSpin

      407




      407




















          2 Answers
          2






          active

          oldest

          votes


















          0














          By adding the following code to the theme's view.xml the image from the simple product is now added to the product gallery rather than replacing the one associated with the configurable product.



          <vars module="Magento_ConfigurableProduct">
          <var name="gallery_switch_strategy">prepend</var>
          </vars>





          share|improve this answer























          • I would still like to find a way to stop the simple product image appearing in the configurable product gallery altogether? I don't need separate photos for each simple product. I only have thumbnails associated with the simple products but they are being shown in the gallery when the swatch image is clicked on. Even though Hide from Product Page is checked.

            – SilkSpin
            Apr 20 '18 at 22:52



















          0














          If you would like to alter the behavior of how the gallery switching happens, I think the function you are looking for is in




          vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js




          called processUpdateBaseImage



          This is completely untested, but you can create a mixin and change that function's behavior, something like:



          Namespace/Module/view/frontend/requirejs-config.js -



          var config = 
          config:
          mixins:
          'Magento_Swatches/js/swatch-renderer':
          'Namespace_Module/js/swatch-renderer-mixin': true
          ,


          ;


          Namespace/Module/view/web/js/swatch-renderer-mixin.js -



          define(['jquery'], function ($) 
          'use strict';

          var mixin =
          /**
          * Update [gallery-placeholder] or [product-image-photo]
          * @param Array images
          * @param jQuery context
          * @param Boolean isInProductView
          * @param Object gallery
          */
          processUpdateBaseImage: function (images, context, isInProductView, gallery)
          var justAnImage = images[0],
          initialImages = this.options.mediaGalleryInitial,
          imagesToUpdate,
          isInitial;

          if (isInProductView)
          imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
          isInitial = _.isEqual(imagesToUpdate, initialImages);

          if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial)
          imagesToUpdate = imagesToUpdate.concat(initialImages);


          imagesToUpdate = this._setImageIndex(imagesToUpdate);
          gallery.updateData(imagesToUpdate);

          if (isInitial)
          $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
          else
          $(this.options.mediaGallerySelector).AddFotoramaVideoEvents(
          selectedOption: this.getProduct(),
          dataMergeStrategy: this.options.gallerySwitchStrategy
          );


          gallery.first();

          else if (justAnImage && justAnImage.img)
          context.find('.product-image-photo').attr('src', justAnImage.img);


          ;

          return function (target)
          return target.extend(mixin);

          );





          share|improve this answer










          New contributor




          asdfasdfasf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.




















            Your Answer








            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "479"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f222804%2fstop-simple-product-images-overriding-main-product-gallery-after-clicking-swatch%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            By adding the following code to the theme's view.xml the image from the simple product is now added to the product gallery rather than replacing the one associated with the configurable product.



            <vars module="Magento_ConfigurableProduct">
            <var name="gallery_switch_strategy">prepend</var>
            </vars>





            share|improve this answer























            • I would still like to find a way to stop the simple product image appearing in the configurable product gallery altogether? I don't need separate photos for each simple product. I only have thumbnails associated with the simple products but they are being shown in the gallery when the swatch image is clicked on. Even though Hide from Product Page is checked.

              – SilkSpin
              Apr 20 '18 at 22:52
















            0














            By adding the following code to the theme's view.xml the image from the simple product is now added to the product gallery rather than replacing the one associated with the configurable product.



            <vars module="Magento_ConfigurableProduct">
            <var name="gallery_switch_strategy">prepend</var>
            </vars>





            share|improve this answer























            • I would still like to find a way to stop the simple product image appearing in the configurable product gallery altogether? I don't need separate photos for each simple product. I only have thumbnails associated with the simple products but they are being shown in the gallery when the swatch image is clicked on. Even though Hide from Product Page is checked.

              – SilkSpin
              Apr 20 '18 at 22:52














            0












            0








            0







            By adding the following code to the theme's view.xml the image from the simple product is now added to the product gallery rather than replacing the one associated with the configurable product.



            <vars module="Magento_ConfigurableProduct">
            <var name="gallery_switch_strategy">prepend</var>
            </vars>





            share|improve this answer













            By adding the following code to the theme's view.xml the image from the simple product is now added to the product gallery rather than replacing the one associated with the configurable product.



            <vars module="Magento_ConfigurableProduct">
            <var name="gallery_switch_strategy">prepend</var>
            </vars>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Apr 20 '18 at 9:44









            SilkSpinSilkSpin

            407




            407












            • I would still like to find a way to stop the simple product image appearing in the configurable product gallery altogether? I don't need separate photos for each simple product. I only have thumbnails associated with the simple products but they are being shown in the gallery when the swatch image is clicked on. Even though Hide from Product Page is checked.

              – SilkSpin
              Apr 20 '18 at 22:52


















            • I would still like to find a way to stop the simple product image appearing in the configurable product gallery altogether? I don't need separate photos for each simple product. I only have thumbnails associated with the simple products but they are being shown in the gallery when the swatch image is clicked on. Even though Hide from Product Page is checked.

              – SilkSpin
              Apr 20 '18 at 22:52

















            I would still like to find a way to stop the simple product image appearing in the configurable product gallery altogether? I don't need separate photos for each simple product. I only have thumbnails associated with the simple products but they are being shown in the gallery when the swatch image is clicked on. Even though Hide from Product Page is checked.

            – SilkSpin
            Apr 20 '18 at 22:52






            I would still like to find a way to stop the simple product image appearing in the configurable product gallery altogether? I don't need separate photos for each simple product. I only have thumbnails associated with the simple products but they are being shown in the gallery when the swatch image is clicked on. Even though Hide from Product Page is checked.

            – SilkSpin
            Apr 20 '18 at 22:52














            0














            If you would like to alter the behavior of how the gallery switching happens, I think the function you are looking for is in




            vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js




            called processUpdateBaseImage



            This is completely untested, but you can create a mixin and change that function's behavior, something like:



            Namespace/Module/view/frontend/requirejs-config.js -



            var config = 
            config:
            mixins:
            'Magento_Swatches/js/swatch-renderer':
            'Namespace_Module/js/swatch-renderer-mixin': true
            ,


            ;


            Namespace/Module/view/web/js/swatch-renderer-mixin.js -



            define(['jquery'], function ($) 
            'use strict';

            var mixin =
            /**
            * Update [gallery-placeholder] or [product-image-photo]
            * @param Array images
            * @param jQuery context
            * @param Boolean isInProductView
            * @param Object gallery
            */
            processUpdateBaseImage: function (images, context, isInProductView, gallery)
            var justAnImage = images[0],
            initialImages = this.options.mediaGalleryInitial,
            imagesToUpdate,
            isInitial;

            if (isInProductView)
            imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
            isInitial = _.isEqual(imagesToUpdate, initialImages);

            if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial)
            imagesToUpdate = imagesToUpdate.concat(initialImages);


            imagesToUpdate = this._setImageIndex(imagesToUpdate);
            gallery.updateData(imagesToUpdate);

            if (isInitial)
            $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
            else
            $(this.options.mediaGallerySelector).AddFotoramaVideoEvents(
            selectedOption: this.getProduct(),
            dataMergeStrategy: this.options.gallerySwitchStrategy
            );


            gallery.first();

            else if (justAnImage && justAnImage.img)
            context.find('.product-image-photo').attr('src', justAnImage.img);


            ;

            return function (target)
            return target.extend(mixin);

            );





            share|improve this answer










            New contributor




            asdfasdfasf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
            Check out our Code of Conduct.
























              0














              If you would like to alter the behavior of how the gallery switching happens, I think the function you are looking for is in




              vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js




              called processUpdateBaseImage



              This is completely untested, but you can create a mixin and change that function's behavior, something like:



              Namespace/Module/view/frontend/requirejs-config.js -



              var config = 
              config:
              mixins:
              'Magento_Swatches/js/swatch-renderer':
              'Namespace_Module/js/swatch-renderer-mixin': true
              ,


              ;


              Namespace/Module/view/web/js/swatch-renderer-mixin.js -



              define(['jquery'], function ($) 
              'use strict';

              var mixin =
              /**
              * Update [gallery-placeholder] or [product-image-photo]
              * @param Array images
              * @param jQuery context
              * @param Boolean isInProductView
              * @param Object gallery
              */
              processUpdateBaseImage: function (images, context, isInProductView, gallery)
              var justAnImage = images[0],
              initialImages = this.options.mediaGalleryInitial,
              imagesToUpdate,
              isInitial;

              if (isInProductView)
              imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
              isInitial = _.isEqual(imagesToUpdate, initialImages);

              if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial)
              imagesToUpdate = imagesToUpdate.concat(initialImages);


              imagesToUpdate = this._setImageIndex(imagesToUpdate);
              gallery.updateData(imagesToUpdate);

              if (isInitial)
              $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
              else
              $(this.options.mediaGallerySelector).AddFotoramaVideoEvents(
              selectedOption: this.getProduct(),
              dataMergeStrategy: this.options.gallerySwitchStrategy
              );


              gallery.first();

              else if (justAnImage && justAnImage.img)
              context.find('.product-image-photo').attr('src', justAnImage.img);


              ;

              return function (target)
              return target.extend(mixin);

              );





              share|improve this answer










              New contributor




              asdfasdfasf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
              Check out our Code of Conduct.






















                0












                0








                0







                If you would like to alter the behavior of how the gallery switching happens, I think the function you are looking for is in




                vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js




                called processUpdateBaseImage



                This is completely untested, but you can create a mixin and change that function's behavior, something like:



                Namespace/Module/view/frontend/requirejs-config.js -



                var config = 
                config:
                mixins:
                'Magento_Swatches/js/swatch-renderer':
                'Namespace_Module/js/swatch-renderer-mixin': true
                ,


                ;


                Namespace/Module/view/web/js/swatch-renderer-mixin.js -



                define(['jquery'], function ($) 
                'use strict';

                var mixin =
                /**
                * Update [gallery-placeholder] or [product-image-photo]
                * @param Array images
                * @param jQuery context
                * @param Boolean isInProductView
                * @param Object gallery
                */
                processUpdateBaseImage: function (images, context, isInProductView, gallery)
                var justAnImage = images[0],
                initialImages = this.options.mediaGalleryInitial,
                imagesToUpdate,
                isInitial;

                if (isInProductView)
                imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
                isInitial = _.isEqual(imagesToUpdate, initialImages);

                if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial)
                imagesToUpdate = imagesToUpdate.concat(initialImages);


                imagesToUpdate = this._setImageIndex(imagesToUpdate);
                gallery.updateData(imagesToUpdate);

                if (isInitial)
                $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
                else
                $(this.options.mediaGallerySelector).AddFotoramaVideoEvents(
                selectedOption: this.getProduct(),
                dataMergeStrategy: this.options.gallerySwitchStrategy
                );


                gallery.first();

                else if (justAnImage && justAnImage.img)
                context.find('.product-image-photo').attr('src', justAnImage.img);


                ;

                return function (target)
                return target.extend(mixin);

                );





                share|improve this answer










                New contributor




                asdfasdfasf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.










                If you would like to alter the behavior of how the gallery switching happens, I think the function you are looking for is in




                vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js




                called processUpdateBaseImage



                This is completely untested, but you can create a mixin and change that function's behavior, something like:



                Namespace/Module/view/frontend/requirejs-config.js -



                var config = 
                config:
                mixins:
                'Magento_Swatches/js/swatch-renderer':
                'Namespace_Module/js/swatch-renderer-mixin': true
                ,


                ;


                Namespace/Module/view/web/js/swatch-renderer-mixin.js -



                define(['jquery'], function ($) 
                'use strict';

                var mixin =
                /**
                * Update [gallery-placeholder] or [product-image-photo]
                * @param Array images
                * @param jQuery context
                * @param Boolean isInProductView
                * @param Object gallery
                */
                processUpdateBaseImage: function (images, context, isInProductView, gallery)
                var justAnImage = images[0],
                initialImages = this.options.mediaGalleryInitial,
                imagesToUpdate,
                isInitial;

                if (isInProductView)
                imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
                isInitial = _.isEqual(imagesToUpdate, initialImages);

                if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial)
                imagesToUpdate = imagesToUpdate.concat(initialImages);


                imagesToUpdate = this._setImageIndex(imagesToUpdate);
                gallery.updateData(imagesToUpdate);

                if (isInitial)
                $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
                else
                $(this.options.mediaGallerySelector).AddFotoramaVideoEvents(
                selectedOption: this.getProduct(),
                dataMergeStrategy: this.options.gallerySwitchStrategy
                );


                gallery.first();

                else if (justAnImage && justAnImage.img)
                context.find('.product-image-photo').attr('src', justAnImage.img);


                ;

                return function (target)
                return target.extend(mixin);

                );






                share|improve this answer










                New contributor




                asdfasdfasf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.









                share|improve this answer



                share|improve this answer








                edited Apr 22 at 18:08









                Pawan

                2,2912721




                2,2912721






                New contributor




                asdfasdfasf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.









                answered Apr 22 at 17:49









                asdfasdfasfasdfasdfasf

                1




                1




                New contributor




                asdfasdfasf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.





                New contributor





                asdfasdfasf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.






                asdfasdfasf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Magento Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f222804%2fstop-simple-product-images-overriding-main-product-gallery-after-clicking-swatch%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Sum ergo cogito? 1 nng

                    三茅街道4182Guuntc Dn precexpngmageondP