Hi!

I'm modifying entity.guidednavigationgrid.xml.config on my 9.5 test site to work better with the Bootstrap responsive skin. Among my changes, I made the search filters (using the two-column layout) into an off-canvas menu for small/mobile screens (using the script at http://getbootstrap.com/examples/offcanvas/.) It almost works... but when I click the toggle button to show the search-filter column, the whole page reloads and returns the left column to its default hidden state. The event appears to occur onclick, and as far as I can tell, the offcanvas script only changes a couple style classes and triggers a simple animation, so I'm not sure what's causing the whole page to reload. The issue does not seem to be in the guidednavigation.js; when I disable that script, the page still reloads on offcanvas toggle (and, of course, GuidedNav stops working.) I'm using the same offcanvas script & styles on a couple topic pages with no problems. Any ideas? I can DM the entity xml package if anyone wants to see it.

Thanks,

Bill
in Smart One Page Checkout by (310 points)

1 Answer

0 votes

Fixed it... changed this

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active');
  });
});
 
to this
 
$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active');
event.preventDefault();
  });
});

I'm so glad I don't do this for a living :)

by (310 points)
...