Disable modal when clickin detail page image

Shopware 5 International (English Only)
1

Hi everyone,

I am trying to disable the modal displayed when you click on the detail page image, I just need to remove that function completly, I found the jquery.image-gallery.js which handle that funcionality onclick event.

So my question if there’s a way to disable it? is there an option for the onclick event to pass and deactivate it? or should I just remove that piece of code? by CSS display: none is an option but is the best?

Thanks in advance.

 

/**
         * Will be called when the detail page image slider was clicked..
         * Opens the lightbox with an image slider clone in it.
         *
         * @event onClick
         */
        onClick: function (event) {
            var me = this,
                imageSlider = me.$el.data('plugin_swImageSlider');

            $.modal.open(me.$template || (me.$template = me.createTemplate()), {
                width: '100%',
                height: '100%',
                animationSpeed: 350,
                additionalClass: 'image-gallery--modal no--border-radius',
                onClose: me.onCloseModal.bind(me)
            });

            me._on(me.$zoomInBtn, 'click touchstart', $.proxy(me.onZoomIn, me));
            me._on(me.$zoomOutBtn, 'click touchstart', $.proxy(me.onZoomOut, me));
            me._on(me.$zoomResetBtn, 'click touchstart', $.proxy(me.onResetZoom, me));

            picturefill();

            me.$template.swImageSlider({
                dotNavigation: false,
                swipeToSlide: true,
                pinchToZoom: true,
                doubleTap: true,
                maxZoom: me.opts.maxZoom,
                startIndex: imageSlider ? imageSlider.getIndex() : 0,
                preventScrolling: true
            });

            me.toggleButtons(me.getImageSlider());

            $.publish('plugin/swImageGallery/onClick', [me, event]);
        }

 

2

Hi Daniel,
you could just remove the swImageGallery plugin entirely from the product detail page:
window.StateManager.removePlugin(’*[data-image-gallery=„true“]’, ‚swImageGallery‘)

You have to call this method after the registration of the plugin here shopware/jquery.shopware-responsive.js at 5.3 · shopware/shopware · GitHub .
The removePlugin-method is documented here: jQuery plugins and the StateManager

Best way to call it is by include your js file as described here

Regards

3

@simkli schrieb:

Hi Daniel,
you could just remove the swImageGallery plugin entirely from the product detail page:
window.StateManager.removePlugin(‚*[data-image-gallery=„true“]‘, ‚swImageGallery‘)

You have to call this method after the registration of the plugin here https://github.com/shopware/shopware/blob/5.3/themes/Frontend/Responsive/frontend/_public/src/js/jquery.shopware-responsive.js#L93 .
The removePlugin-method is documented here: https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/#class-methods-0

Best way to call it is by include your js file as described here

Regards

Hi Simkli, thanks for helping. I am new in shopware so I hope I followed your instructions correctly.

1 - What I did first was to add the line of code you said just right below the code to register a method so the code looks like this so far:

// jquery.shopware-responsive.js
//... more code above
.addPlugin('*[data-image-gallery="true"]', 'swImageGallery')
.removePlugin('*[data-image-gallery="true"]', 'swImageGallery')
//... more code bellow

2 - Then that file I uploaded it into src > js from my custom theme.

3 - Then edited the Theme.php file from my custom theme to add that jquery.shopware-responsive.js file, so now it looks like this so far:

protected $javascript = array(
   'src/js/another_file.js',
   'src/js/jquery.shopware-responsive.js' /*added this one*/
);

4 - Finally, I cleared the cache and reloaded the page, but still can see the modal showing up.

Did I do something wrong?

4

Any clue about it?

5

Hi Daniel,

  1. do not modify any Shopware files. That is bad practice and you’ll loose your changes after an update

  2. do not copy any Shopware files 1:1 into your theme/plugin. That’s also bad practice. You should only add modifications into your theme/plugin. When a Shopware update is released the original files could be changed. If you copy them 1:1 into your theme/plugin the updated original files will be overriden with the old ones by your plugin. This can lead to sideeffects. 

1 - What I did first was to add the line of code you said just right below the code to register a method so the code looks like this so far:

Undo that. That’s not the way I told you. Please reread my post. You should just call this function in an empty js file which will be registered in your plugin /theme.

 

Maybe you can send a link to your shop and provide some details about your setup (theme/plugins).

Best regards

6

I finally made it work, as you said I had to create a custom JS file, added it and before the domready I had to write:

window.StateManager.removePlugin('*[data-image-gallery="true"]', 'swImageGallery');

Thanks for your help.