14

I have followed Mage documentation from Magento official website on clicking it's jumping on top: I am using 2.3.3, any way to stop jumping?

<div class="product data items"
     data-mage-init='{"mage/tabs": {"openedState": "active", "animate": {"duration": 100}, "active": 1, "disabled": [2], "disabledState": "disabled"}}'>
    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-cars">Cars</a>
    </div>
    <div id="tab-cars" class="item content" data-role="content">Cars content</div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-movies">Movies</a>
    </div>
    <div id="tab-movies" class="item content" data-role="content">Movies content</div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-music">Music</a>
    </div>
    <div id="tab-music" class="item content" data-role="content">Music Content</div>
</div>
23

Now, this functionality is embedded inside lib/web/mage/collapsible.js. And to disable scrolling and transfer this possibility to scroll to the initialization options need to create mixin for this jQuery widget.

app/design/frontend/<VendorName>/<ThemeName>/requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/collapsible': {
                'js/mage/collapsible-mixin': true
            }
        }
    }
};

app/design/frontend/<VendorName>/<ThemeName>/web/js/mage/collapsible-mixin.js

define([
    'jquery',
], function ($) {

    var hideProps = {},
        showProps = {};

    hideProps.height =  'hide';
    showProps.height =  'show';

    return function (widget) {

        $.widget('mage.collapsible', widget, {
            options: {
                scrollTo: false
            },

            _create: function () {
                this.storage = $.localStorage;
                this.icons = false;

                if (typeof this.options.icons === 'string') {
                    this.options.icons = $.parseJSON(this.options.icons);
                }

                this._processPanels();
                this._processState();
                this._refresh();

                if (this.options.icons.header && this.options.icons.activeHeader) {
                    this._createIcons();
                    this.icons = true;
                }

                if (this.options.scrollTo) {
                    this.element.on('dimensionsChanged', function (e) {
                        if (e.target && e.target.classList.contains('active')) {
                            this._scrollToTopIfVisible(e.target);
                        }
                    }.bind(this));
                }

                this._bind('click');
                this._trigger('created');
            },
        });

        return $.mage.collapsible;
    };
});

UPD: that was fixed in Magento 2.3.4 (Pull Request)

| improve this answer | |
  • I will try and let you know if this solution works for anyone please comment here. – Arunendra Nov 14 '19 at 12:57
  • @Volodymyr, I am experiencing the same issue and tried your method above, issue is resolved but all other collapsible sections such as discount code, summary section on cart, checkout page right nav secton etc. are stopped clicking after this implementation. Please help me on this. – Kamlesh Yaduwanshi Nov 20 '19 at 13:46
  • @Arunendra - did you get any final solution on this. please help me. – Kamlesh Yaduwanshi Nov 20 '19 at 13:47
  • @KamleshYaduwanshi If you didn't change the default behavior it should work fine. Tested on the Magento 2.3.3 (fresh install). – Volodymyr Lisniak Nov 20 '19 at 19:49
  • @KamleshYaduwanshi I have downgraded its version to 2.3.2 as I was in a hurry. – Arunendra Nov 21 '19 at 4:51
2

Looks like this have been fixed here. Worked for us. This will still trigger scrolling but only if the extended content extends beyond the bottom of the viewport. This solution has been merged to Magento repo by their team and this issue will be solved in next release.

Same issue on github. Hope this helps.

| improve this answer | |
0

this is a new option added to magento 2.3.3

to remove it use this patch

create a file in your main dir

revert_scrolltop.patch

add this content to file

Index: lib/web/mage/collapsible.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- lib/web/mage/collapsible.js (revision 7ade7283f9b19976781dd039f15f75cf04716b66)
+++ lib/web/mage/collapsible.js (revision 3df55dc134678c0eddfd83f158a902420e5dacc6)
@@ -517,9 +517,9 @@
                 'aria-hidden': 'false'
             });

-            this.element.trigger('dimensionsChanged', {
+            /*this.element.trigger('dimensionsChanged', {
                 opened: true
-            });
+            });*/
         },

         /**

then import it with patch command

patch < revert_scrolltop.patch

clear cache and run

php bin/magento s:up && php bin/magento s:s:d -f
| improve this answer | |
0

Update for version 2.3.5

As per this pr/issue, https://github.com/magento/magento2/pull/23862/files

now it is already embedded and fixed within magento core code itself.

Thanks.

| improve this answer | |
-1

override and comment the below js code in collapsible.js

this.element.trigger('dimensionsChanged', { opened: true });

this was worked for me....

| improve this answer | |

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.