Android back button behavior with LFD detail overlay

Get Help
1

When someone clicks on an item in my LFD to view the detail overlay I want the android back button to just close the overlay, not go back to the last screen.

Does anyone have an example of code that would do this?

2

From the following code, you can achieve your desired output.

////////////// Code Starts /////////////////

let lfd_type = 'small-card';
document.addEventListener(
  'backbutton',
  function() {
    if (Modernizr.android) {
      var classList = $('.' + lfd_type + '-detail-overlay').attr('class');
      if (classList) {
        var classArr = classList.split(/\s+/);
        var found = classArr.includes('open');
        if (found == true) {
          $('.' + lfd_type + '-detail-overlay-close').click();
        } else {
          Fliplet.Navigate.back();
        }
      } else {
        Fliplet.Navigate.back();
      }
    }
  },
  false
);

////////////// Code Ends /////////////////

Since we have different types of lfd layouts. You will need to change the following variable per your chosen layout for the lfd.

let lfd_type = ‘small-card’;

The above variable code is for a small card lfd layout but in case you want to make it work for a simple list lfd layout, you will need to change the variable code to the following.

let lfd_type = ‘simple-list’;

In case you are not clear about the class of your chosen lfd layout, you can always use the HTML inspect browser tools to check the class of your chosen list.

Hope it helps :slightly_smiling_face:

3

Thank you so much! I will implement this when I get back from my weekend out of town!

1 Like