Show Sidebar Trigger Code

Hello.

Can you provide us with the code to trigger and show the off canvas sidebar in shop page?

We want to create a custom button and assign to that button the functionality to open the sidebar when someone press it.

I tried to assign the class “woodmart-show-sidebar-btn” to a button or menu item but i think there is some JS code involved too.

Can you help us?

Thanks.

Hi,

Here is a JavaScript code to show the hidden sidebar

$('.sidebar-container').addClass('show-hidden-sidebar');
$('body').addClass('woodmart-show-hidden-sidebar');
$('.woodmart-show-sidebar-btn').addClass('btn-clicked');

if( $(window).width() >= 1024 ) {
    $(".sidebar-inner.woodmart-sidebar-scroll").nanoScroller({
        paneClass: 'woodmart-scroll-pane',
        sliderClass: 'woodmart-scroll-slider',
        contentClass: 'woodmart-sidebar-content',
        preventPageScrolling: false
    });
}

Regards

Thank you very much.

What class i have to put on button element or text etc to make trigger this code?

Can you help me implement this code on a button?

Hi,

Try this code

$('.open-sidebar-btn').click(function() {
$('.sidebar-container').addClass('show-hidden-sidebar');
$('body').addClass('woodmart-show-hidden-sidebar');
$('.woodmart-show-sidebar-btn').addClass('btn-clicked');

if( $(window).width() >= 1024 ) {
    $(".sidebar-inner.woodmart-sidebar-scroll").nanoScroller({
        paneClass: 'woodmart-scroll-pane',
        sliderClass: 'woodmart-scroll-slider',
        contentClass: 'woodmart-sidebar-content',
        preventPageScrolling: false
    });
}
});

And then add open-sidebar-btn class to your button.

Regards

It works! Thanks

You are welcome!

[Author]

Posts