NO BUG: Mini Cart offcanvas on mobile

Bugs
1

pls use mobile chrome browser,

u will find: when u slide the screen up, the browser address bar will slide up,
then, the bottom of offcanve, will appear blank.

2

and when i slide on offcanve, the back body will scroll too


3

Hi,
Thanks so much for your report!

Due to the changing viewport, the mini cart offcanvas needs a (very) short moment to adjust the height accordingly. It’s not as if the gap that occurs is there all the time, but is closed immediately as soon as the address bar is completely gone (as long as you don’t scroll up and down and switch the address bar on and off in the meantime).

Regarding the body scroll: right, there is no setting to disable the body scroll on the mini cart, which is not a bug but a feature request. However, you can easily work around this with an interaction on the mini cart and add the no-scroll class to the body.

Best regards,
timmse

CleanShot 2024-02-29 at 10.52.47@2x
CleanShot 2024-02-29 at 10.52.47@2x698×1952 58.7 KB

4

when click ato cart, the offcanva cart will auto open, how to add class

and how to remove

5

By using the same interaction on the add to cart button, too? If that doesn’t work, please submit a feature request on the idea board to disable the body scroll of the mini cart offcanvas: Idea board – Bricks

6

if set like this,

if i clik “add to cart” button before variation selected, i will open off canva too,
It doesn’t satisfy demand.

7

any other theme builder,
all have not this problem,
when offcanve height 100%, disable body scroll for default would be better

8

@timmse Hi, Stefan. The interaction provided locks the body scroll, but it also disables the ‘View Cart’ and ‘Checkout’ buttons. Clicking within the Mini Cart when open just toggles the attribute set in the Interactions. Any suggestions to avoid this? Popups set to no body scroll do not behave this way.

Thanks!

9

Use this in a code block in your header.

document.addEventListener("DOMContentLoaded", function () {
    // Add event listener to the mini cart link, if it exists
    const miniCartLink = document.querySelector('.mini-cart-link');
    if (miniCartLink) {
        miniCartLink.addEventListener('click', function () {
            document.body.classList.add('no-scroll');
        });
    }

    // Add event listener to the bricks mini cart close button, if it exists
    const miniCartClose = document.querySelector('.bricks-mini-cart-close');
    if (miniCartClose) {
        miniCartClose.addEventListener('click', function () {
            document.body.classList.remove('no-scroll');
        });
    }

    // Add event listener to the off-canvas overlay inside the brxe-woocommerce-mini-cart element
    const miniCartOverlay = document.querySelector('.brxe-woocommerce-mini-cart .off-canvas-overlay');
    if (miniCartOverlay) {
        miniCartOverlay.addEventListener('click', function () {
            document.body.classList.remove('no-scroll');
        });
    }
});
1 Like