Magento Question posted in
The official documentation can be found here.

How to use magento x-magento-init accordion with different behaviour on mobile?

I am trying to init magento accordion and I want it to behave differently on mobile than on desktop.

In my case I cannot use a <script> in the phtml with the javascript such as:

<script>
if ($(window).width() <= 480) {
  $('#narrow-by-list').accordion(); // init with mobile params
} else {
  $('#narrow-by-list').accordion(); // init with desktop params
}
</script>

For some reason maybe related to how the content is loaded, sometimes it works and sometimes it breaks.

So instead I am using the x-magento-init that always seems to work fine:

<script type="text/x-magento-init">
    {
        "#narrow-by-list": {
            "accordion": {
                "openedState": "active",
                "collapsible": true,
                "active": <?php echo $this->helper('MagentoFrameworkJsonHelperData')->jsonEncode($activeArray); ?>,
                "multipleCollapsible": true,
            }
        }
    }
</script>

The problem with this method of initialization is that I cannot put the conditions I need to detect mobile resolution and set different accordion params.

What I want to do is on mobile set active as false and multipleCollapsible as false too so that way on desktop the accordion is always open and allows to open multiple items and on mobile it is closed by default and only allows to open one item at a time.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    What I ended up doing after a lot of testing is customizing magento accordion component as following:

    I opened the file located at libwebmageaccordion.js and I have customized it like this:

    define([
    'jquery',
    'mage/tabs'
], function ($, tabs) {
    'use strict';

    $.widget('mage.accordion', tabs, {
        options: {
            active: [0],
            activeMobile: [0], // added new option for mobile
            multipleCollapsible: false,
            multipleCollapsibleMobile: false,  // added new option for mobile
            mobileResolution: 480,  // added new option for mobile
            openOnFocus: false
        },
        
        // overriden the _create method from parent class and added
        // a way to check window resolution and make it use the mobile options
        _create: function () {
          
            if ($(window).width() <= this.options.mobileResolution) {
              console.log('accordion mobileResolution');
              this.options.active=this.options.activeMobile;
              this.options.multipleCollapsible=this.options.multipleCollapsibleMobile;
            }
          
            if (typeof this.options.disabled === 'string') {
                this.options.disabled = this.options.disabled.split(' ').map(function (item) {
                    return parseInt(item, 10);
                });
            }
            this._processPanels();
            this._handleDeepLinking();
            this._processTabIndex();
            this._closeOthers();
            this._bind();
        },
...

    And finally in the phtml calling it with the new options:

    <script type="text/x-magento-init">
    {
        "#narrow-by-list": {
            "accordion": {
                "openedState": "active",
                "collapsible": true,
                "active": <?php echo $this->helper('MagentoFrameworkJsonHelperData')->jsonEncode($activeArray); ?>,
                "activeMobile": false,
                "multipleCollapsible": true,
                "multipleCollapsibleMobile": false,
                "mobileResolution": 480
            },
            "Rokanthemes_LayeredAjax/js/layeredajax": {}
        }
    }
</script>

    Then cleared the static files cache and reloaded the page.

    With this solution I could end up with the exact behavior needed.


  2. 0

    You could do something like this:

    <script type="text/x-magento-init">
    {
        "#narrow-by-list": {
            "accordion": {
                "openedState": "active",
                "collapsible": true,
                "active": <?php echo $this->helper('MagentoFrameworkJsonHelperData')->jsonEncode($activeArray); ?>,
                "multipleCollapsible": true,
            }
        }
    }
</script>
<script>
    require(['jquery', 'domReady', 'accordion'], function($, domReady){
        domReady(function(){
            $('#narrow-by-list').accordion({multipleCollapsible: !!yourIsMobileCheck()});
        });
    })
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search